2021-08-21-context-api-redux

[utterances-bot]

Context API가 존재하지만 여전히 사람들이 redux와 전역 상태관리 라이브러리를 쓰는 이유

context api는 글로벌 상태관리 라이브러리를 대체할 수 없고, 여전히 많은 리액트 개발자들이 redux, mobx 등을 사용하고 있다.

https://yrnana.dev/post/2021-08-21-context-api-redux

[intoday87]

좋은 내용의 글 공유 감사합니다:). 오타가 있는것 같아서 여쭤봐요. 여기에서

- 마찬가지로 ModalProvider 내부에서 show가 변경되더라도 children인 <Modal />과 <ModalToggleButton />에는 영향을 주지 않는다.
+ 마찬가지로 ModalToggleButton 내부에서 show가 변경되더라도 children인 <Modal />과 <ModalToggleButton />에는 영향을 주지 않는다. 

ModalProvider가 아니라 ModalToggleButton 같은데 아닌가요?

[yrnana]

@intoday87 안녕하세요! 댓글 감사합니다.

const ModalProvider = ({ children }) => {
  const [show, setShow] = useState(false);
  return (
    <ModalContext.Provider value={[show, setShow]}>
      {children}
    </ModalContext.Provider>
  );
};

const App = () => {
  return (
    <ModalProvider>
      <ModalToggleButton />
      <Modal />
    </ModalProvider>
  );
};

리액트에서는 상위컴포넌트가 가지고 있는 상태값이 변경되면 하위컴포넌트도 같이 렌더링이 되지만, ModalProvider를 위와 같이 작성하면 ModalProvider 내부에서 선언된 state인 show가 ModalToggleButton에 의해서 변경되더라도 children props인 Modal과 ModalToggleButton는 리렌더링이 되지 않는다는 부분에 대해 언급하기 위해서 ModalProvider 내부에서 show가 변경되더라도 < 이렇게 작성했습니다! (물론 show가 변경되었기 때문에 Modal은 리렌더링이 될 것 같네요!)

[intoday87]

@yrnana 답변 감사드립니다! 말씀주신거 보고 다시 읽어보니 이해가 가네요:)

[euijinkk]

context 의 한계 설명 너무 이해가 잘 되네요. 감사합니다.