인프런 커뮤니티 질문&답변

xxiiuu님의 프로필 이미지
xxiiuu

작성한 질문수

만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript)

React.js context 활용한 Auth 처리

렌더마다 변경되는 값이라서 context Provider에 못 넣는 에러

작성

·

177

0

선생님 강의 5:10 쯤에 temp obj를 provider value에 넣으려고 할 때, "매번 변경되는 값이라서 들어가지 않으니 hook으로 빼주면 된다고" 하셨는데요-!
처음엔 그냥 따라쳤는데 복습하다 보니까 왜 custom hook으로 빼주면 괜찮은지 궁금해요.
에러 메시지가 제안하는 대로 useMemo를 쓰지 않는 건 함수가 async 라서 그런 건가요.

답변 1

1

totuworld님의 프로필 이미지
totuworld
지식공유자

안녕하세요 츄츄님.

우선 context provider 에 tempObj 를 넣는게 문제가 되죠.

이건 아래 예시처럼 매번 새로운 값을 넣기 때문에 문제가 되는거에요.

 <MyContext.Provider value={{something: 'something'}}>

 

왜 문제가 되냐면 매번 새로운 값을 만들어서 넣기때문에 Provider 가 렌더링 될때마다 하위에서 구독중인 컴포넌트가 모두 리렌더링됩니다.

이 문제를 방지하려면 위쪽에서 useMemo 등으로 value가 항상 새로 생성되지 않는 처리를 해도 됩니다.

 

강의에서 이 부분을 모두 custom hook 으로 빼준건 전달해야하는 값이 여러개이고, useState와 useEffect를 활용해서 값 변경이 일어날 때 자동으로 state를 변경하는 일이 발생하기 때문입니다.

이 코드가 provider 가 있으면 다른 일을 하는 두 코드가 같이 있게 됩니다. 이게 싫어서 분리한거에요.

(한 곳에 몰아 넣어도 문제되지 않습니다)

xxiiuu님의 프로필 이미지
xxiiuu

작성한 질문수

질문하기