useEffect2 useEffect의 Dependency Array 비교 원리 요약 useEffect의 Dependency Array 비교 원리를 파악한다. Reference Type일 경우 useEffect의 callback을 호출하지 않기 위해 dependency를 어떻게 비교할 것인지에 대해 대안을 알아본다. useEffect가 존재하는 Component Render Flow First Render: init Component -> useEffect Re-Render: init Component -> clean up useEffect -> useEffect react-reconciler useEffect의 update 조건이 충족할 때, dependency를 확인하는 코드를 보자. // https://github.com/facebook/react/blob/ddd1faa1972.. 2022. 5. 25. useEffect 정리 Effect Hook을 사용하면 컴포넌트에서 side effect를 수행할 수 있다. 데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects다. 정리(Clean-up)를 이용하지 않는 Effects 리액트가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우이다. Class 리액트의 class 컴포넌트에서 render 메서드 그 자체는 side effect를 발생시키지 않는다. DOM을 업데이트하고 난 이후에 effect를 수행한다. 리액트 class에서 side effect를 componentDidMount.. 2021. 7. 22. 이전 1 다음