인프런 커뮤니티 질문&답변
작성한 질문수
useEffect의 dependency array에 빈 배열
작성
·
309
0
안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?
답변 1
0
이정환 Winterlood
지식공유자
안녕하세요 이정환입니다.
결론부터 말씀드리자면 그렇게 하셔도 문제가 발생하지는 않습니다.
다만 Edit 컴포넌트에서 originData State에 값이 초기화 되기 이전에 DiaryEditor의 렌더링이 발생하게 된다면 DiaryEditor는 originData를 undefined으로 읽어가는 문제가 발생할 수 있습니다.
그러나 이 문제를 방지하기 위해 우리 프로젝트에서는 Edit 컴포넌트의 리턴문 내부에 {originData && <DiaryEditor/>} 같이 단락회로 평가를 이용해 originData State의 초기값 설정이 완료된 경우에만 DiaryEditor 컴포넌트를 렌더링 하도록 해 두었기 때문에 이런 문제는 발생하지 않을 텐데요
그럼에도 Edit 페이지의 변경 사항에 일부 실수가 있거나 향후 originData State의 값에 변동이 생길 경우에도 충분히 대응할 수 있도록 그렇게 처리하였습니다.
이정환 Winterlood
지식공유자
안녕하세요 이정환입니다.
넵! 맞습니다. React Router에 의해 새로운 페이지가 렌더링되면서
DiaryEditor도 동시에 렌더링됩니다.
다만 향후에 그럴일은 없겠지만,
Edit 페이지에서 New 페이지로 이동하는 기능이 추가되게 될 경우에는
두 페이지에 모두 DirayEditor가 동일하게 등장하기 때문에
이때에는 Unmount되었다가 Mount되지 않는다는 점도 기억해두시면 더 좋을 것 같습니다!
빠른 답변 감사드립니다!! 그럼 home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 리렌더가 아닌 mount 되는 것은 맞는 건가요?