min

[항해 99 주특기 주차 11일차] 본문

TIL

[항해 99 주특기 주차 11일차]

minprogramming 2023. 7. 5. 18:52

<회고록>

오늘은 어제하던 과제를 이어서 진행했다. 즉 항해 99 3주차 과제(모달창 구현)을 진행했다. 그래서 오늘은 이 모달창을 구현을 진행하면서 어려웠던 점들 그리고 이를 어떻게 해결했는지에 대해서 작성해볼려고 한다.

 

1. 모달창 너무 만만하게 봤다.... ㅎㅎ

: 모달창을 구현할 때 어려웠던 점은 크게 2가지 정도가 있던거 같다. 첫번째는 이 모달창을 어떻게 하면 전체 화면에 출력할 수 있을까?  두번째는 모달창을 여러개를 만들 때는 어떻게 처리하는 것이 좋을까? 이렇게 2가지다. 각각 자세하게 설명하겠다.

1-1) 모달창을 전체화면으로 띄우는 것

모달창을 전체화면에 띄울려면 body 밑에 자식 요소로 들어있어야지 가능하다. 이 말을 이해하기 위해서 다음과 같은 예시를 준비했다.

<body>
   <div className = "parent">
      <div className = "child"></div>
   </div>
</body>

만약에 다음과 같은 구조에서 child의 크기가 화면에 꽉찰려면 어떻게 해야할까?  내가 생각하는 답은 parent의크기를 100%로 맞추고 child를 parent의 크기로 맞취야 한다. 즉 일을 2번해야 한다. 근데 만약에 div가 100개라면 어떨까? 위 방법을 200번을 해야 할 것이다. 이는 결과적으로 엄청난 개발 비용을 불러온다. 이는 코드의 유지보수와 가독성에 있어서 굉장히 큰 문제를 불러온다. 그렇다면 위 문제점을 어떻게 해결할 수 있을까? 방법은  부모 자식 관계를 만들지 않고 수평적인 구조로 div을 작성하는 것이다.

<body>
   <div></div>
   <div></div>
</body>

즉 이런식으로 수평적인 구조를 만들면 아무 div나 크기를 화면 비율에 맞출 때 부모의 영향을 받지 않기 때문에 코드의 비용적인 면에서 아주 큰 이익을 벌 수 있다. 그래서 나는 root DOM 말고도 portal-target이라는 DOM을 하나 더 만들었다.

<body>
    <div id = "root"></div>
    <div id = "portal-target"></div>
</body>

1-2) 모달이 여러개면 어떡하지?

위의 구조로 모달창을 만든다면 다음과 같은 의문이 생길 것이다. 내가 #root에다가 button을 만들었는데 그럼 button을 클릭했을 때의 데이터를 portal-target에게 어떻게 전달하지? 였다. 나는 props를 통한 상태관리는 부모와 자식관계에서만 성립하기에 redux를 사용해서 전역상태를 만들었다. 그리고 이를 root portal-target에서 관리하도록 만들었다. 근데 여기서 발생하는 문제점은 모달이 1개일때는 상관이 없지만 modal이 여러개라면 상태를 어떻게 관리할 것인가 였다. 즉 자세히 말하자면 initialState를 어떻게 설정할 것인가 였다. 나는 이 문제점을 해결하기 위해서 관점을 달리해서 생각했다. 만약 관리해야 하는 모달이 여러개라면 initialState를 주지 않고 button을 누를때 마다 initialState에 값을 추가하고 삭제한다. 라는 것이 내 생각이었다. 그리고 이는 실제로 구현가능한 아이디어 였다. 그래서 나는 Modal을 만들때마다 state에 해당 정보를 추가하고 초기 상태로는 아무 것도 없는 빈 배열로 시작했다.

const MODAL_OPEN = "modal/open";
const MODAL_CLOSE = "modal/close";

export const modalOpen = (id) => ({ type: MODAL_OPEN, id });
export const modalClose = (id) => ({ type: MODAL_CLOSE, id });

const initialState = {};

function modal(state = initialState, action) {
  switch (action.type) {
    case MODAL_OPEN:
      return { ...state, [action.id]: true };
    case MODAL_CLOSE:
      return { ...state, [action.id]: false };
    default:
      return state;
  }
}

export default modal;

위 작성한 코드를 보면 초기상태로는 아무것도 넣어주지 않고 액션이 들어올 때 마다 해당 상태에 추가적인 값을 넣는 식으로 진행했다.

이렇게 처리하고 나는 modal의 종류 , 갯수에 상관없이 상태를 관리할 수 있으며 plain redux의 한계점인 보일플레이트도 막을 수 있다. 이렇게 나는 redux의 UI는 위의 그림과 같은 행식으로 redux로직은 최대한 간단하게 짜봤다. 이로 인해서 결과적으로는  진행하는 일을 해결하는데 굉장히 빠르게 늘어났다.

저작자표시

'TIL' 카테고리의 다른 글

[항해 99 주특기 주차 13일차]  (0) 2023.07.08
[항해 99 주특기 주차 12일차]  (0) 2023.07.07
[항해 99 주특기 주차 10일차]  (0) 2023.07.04
[항해 99 주특기 주차 9일차]  (0) 2023.07.03
[WIL 항해 99 3주차 #2]  (0) 2023.07.02
'TIL' Related Articles more