useEffect의 dependency array에 빈 배열

Question

안녕하세요.10분 30초 쯤에useEffect(() => { }, [originData, isEdit]);여기서 만약 dependency array에 빈 배열을 전달해주면 구체적으로 어떤 문제가 생기나요?home에서 일기 수정하기 버튼이나 새로 만들기 버튼을 누를 때마다 DiaryEditor가 mount 된다고 생각하여 빈 배열을 넣어줘도 된다고 생각했는데, 그게 아니라 리렌더가 되는 건가요?

Answer

안녕하세요 이정환입니다.결론부터 말씀드리자면 그렇게 하셔도 문제가 발생하지는 않습니다.다만 Edit 컴포넌트에서 originData State에 값이 초기화 되기 이전에  DiaryEditor의 렌더링이 발생하게 된다면 DiaryEditor는 originData를 undefined으로 읽어가는 문제가 발생할 수 있습니다.그러나 이 문제를 방지하기 위해 우리 프로젝트에서는 Edit 컴포넌트의 리턴문 내부에  {originData && <DiaryEditor/>} 같이 단락회로 평가를 이용해 originData State의 초기값 설정이 완료된 경우에만 DiaryEditor 컴포넌트를 렌더링 하도록 해 두었기 때문에 이런 문제는 발생하지 않을 텐데요그럼에도 Edit 페이지의 변경 사항에 일부 실수가 있거나 향후 originData State의 값에 변동이 생길 경우에도 충분히 대응할 수 있도록 그렇게 처리하였습니다.

frontluv123

useEffect의 dependency array에 빈 배열

이 글과 비슷한 Q&A

html a태그에 이미지를 표시하는 것은 웹 접근성 기준으로 올바른 것인지에 대한 질문입니다.

cypress 와 jest에서 타입만 다르다면? 그래도 같이 쓰는것도 좋지 않나요?

antd ui라이브러리를 사용하니까 Cannot use import statement outside a module 에러가 나옵니다.

docker-compose.yml 파일 환경변수 관리