10.10 항해 28일차 TIL

이걸 어떻게 일주일만에 다 하지? 라고 생각했던 4주차도 무사히 끝이 났다.
이번 주에 개인적으로 재미있던 부분은 캘린더 만들기 프로젝트에서 [완료된 일정 보기] 만들기 라는 항목이 있었는데, 이 부분을 구현 한 10명의 코드를 보면 10명이 모두 다른 방법으로 기능을 구현 했었던 것이다.
내가 생각하지 못한 방법이 이렇게나 많이 있었구나 싶기도 하고 다음에는 저 방법도 써먹어 봐야겠다 하는 생각도 들어서 여기저기 꼼꼼히 살펴 보려고 노력했다.
그리고 리액트의 전역 상태관리에 대해서 정리를 해보았다.

내가 구현 한 방법은 라이브러리 공식 문서를 찾아보다가 이벤트 display 옵션이 있어서 그냥 그 옵션을 사용 했다.

  //완료 일정 보기
  //state의 show_end값을 체크하여 true => false, false => true 변경
  const show_end = useSelector((state) => state.schedule.show_end);


  const onEndSch = () => {
    if (!show_end) {
      dispatch(schActions.showSch(true));
    } else {
      dispatch(schActions.showSch(false));
    }
  };



// Reducer
 [SHOW_SCH]: (state, action) =>
      produce(state, (draft) => {
   // state 를 현재 액션으로 받아 온  true, false로 바꾼다.
        draft.show_end = action.payload.show_end;

   // state가 true (완료 된 일정만 보기), 
   //일정이 완료 되지 않았을 때(is_end : false) display : none 추가
        if (draft.show_end) {
          draft.sch_list.map((s, idx) => {
            if (!s.is_end) {
              draft.sch_list[idx] = { ...s, display: "none" };
            }
          });
          // state가 false (모든 일정 보기),
          // display : black 추가
          // 이벤트가 점으로 뜨는게 맘에 들지 않아 'auto'가 아닌 'block' 사용
        } else {
          draft.sch_list.map((s, idx) => {
            draft.sch_list[idx] = { ...s, display: "block" };
            draft.show_end = false;
          });
        }
      })

너무 많은 방법이 있어 따로 올리지는 않았지만 아무튼 여러가지 길을 볼 수 있다는 생각을 가지게 된 계기가 생긴 것 같다.

리액트의 전역 상태관리

전역상태관리란 말하는바 그대로 전역에서 상태를 관리한다는 의미이다.
리액트에서는 상위에서 하위로 상태값을 전달하여 상태를 관리하게 되어있다.
그러나 컴포넌트가 분리되어 점점 많아지면 상태를 관리하기 위해서는 결국 props를 통해 사용하는 하위 컴포넌트까지 값을 전달 해야 한다.

하위 컴포넌트에서 사용 하기 위해 불필요한 prop를 전달받는 상황이 발생하고 prop drilling 현상이 발생한다.

Prop Drilling?
Prop Drilling 은 prop를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정이다.

예시

import React from "react";

export default function App() {
  return (
    <div className="App">
      <FirstComponent content="Who needs me?" />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <h3>I am the first component</h3>;
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <h3>I am the second component</h3>;
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <h3>I am the third component</h3>;
      <ComponentNeedingProps content={content} />
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>;
}

content 를 App > First > Second > Third > ComponentNeedingProps 순으로 전달한다.

ComponentNeedingProps 컴포넌트에서 해당 props를 사용하기 위해 전달하는 과정을 거치게 된다.

Prop Drilling 이 문제가 되지는 않지만 prop 전달이 10개, 15개 같이 더 많은 과정을 거치게 된다면 코드를 읽을 때 해당 prop을 추적하기 매우 힘들고 유지보수 또한 어려워진다.

그렇기 때문에 과도한 Prop Drilling 을 피하기 위해서 전역상태관리 라이브러리를 사용하는 방법이 있다.

나는 Redux 만 사용 해봤지만 MobX, recoil 등 다른 라이브러리도 있고 리액트 Hook 에서 제공하는 Context API 라는 것도 있었다.

Context API는 Redux와 마찬가지로 상태의 중앙 관리를 위한 상태 관리 도구인데, Redux와 다르게 React에서만 사용할 수 있고 여러 저장소가 존재할 수 있다.

Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider, 그리고 전역 상태를 받아 사용하는 Consumer로 나뉘어져 있다.

리덕스에 관한 것은 전에 정리를 했으니 다음엔 Context API도 더 자세히 찾아봐야겠다.