useEffect
첫번째 파라미터 => 함수
두번째 파라미터 => 의존성 배열 (deps)
일단 마운트, 언마운트가 뭔데?!
내가 이거를 확실하게 모르는 이유는 클래스형 컴포넌트의 라이프사이클에 대해서 모르기 때문이다.
useEffect는 클래스형 컴포넌트의 라이프 사이클을 함수형 컴포넌트에도 사용하기 위해 등장한 훅 함수이다.
컴포넌트에 진입하여 처음 렌더링을 하고 나면 값이 바뀌더라도 컴포넌트가 렌더링되지 않는다.
하지만 사용자에 의해 입력 받는 값이나 리렌더링이 필요한 경우가 있다.
이때 조건에 따라 렌더링을 할 수 있도록 만들어진 훅 함수이다.
의존성 배열이 빈 배열이라면: 컴포넌트가 처음 렌더링될 때만 함수 호출
useEffect에서 함수를 반환할 수 있는데 이것을 cleanup 함수라고 한다.
cleanup 함수는 useEffect를 뒷정리해주는 역할로 deps가 비어있는 경우에는
렌더링된 후 외부 동작에 의해 컴포넌트가 사라질 때 cleanup 함수를 호출한다.
의존성 배열에 인자가 두개 이상일 때는: 컴포넌트가 인자의 값이 하나씩 변경되는지 판단하고 리렌더링한다.
이때, 렌더링을 할 필요가 없지만 인자의 값이 바뀌어 불필요한 렌더링이 발생하는 경우
다음과 같이 두 개 이상의 인자의 값이 변한다면 최종적으로 렌더링이 필요하다는 boolean 값을 전달하는 인자 하나만 넘겨준다.
참고문서링크
https://react.vlpt.us/basic/16-useEffect.html
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 · GitBook
16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기 이번에는 useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리
react.vlpt.us
https://reese-dev.netlify.app/react/optimizing_useeffect/
useEffect 최적화 하기 (의존성 배열에 condition 전달)
useEffect는 componentDidMount + componentDidUpdate + componentWillUnmount 의 조합이다. 여러 라이프사이클에 해당하는 기능을 useEffect 하나로 모두 처리할 수 있다는건 편리하지만 불필요하게 effect가 실행돼서
reese-dev.netlify.app
'react native' 카테고리의 다른 글
| 22.06.10 invalid Hook (0) | 2022.06.10 |
|---|---|
| 22.05.30 {"_U": 0, "_V": 0, "_W": null, "_X": null} (0) | 2022.05.30 |
| 22.03.01 navigation.navigate 타입 지정 (1) | 2022.03.01 |
| 22.02.27 Can't perform a React state update on an unmounted component (0) | 2022.02.27 |
| 22.02.05 useEffect안에서 useQuery 쓰고 싶을 때 (0) | 2022.02.05 |