요새 또 블로그를 게을리하고 있었는데 다시 차근차근 써보도록 하겠습니다. 기본기가 많이 없어서 한동안은 React의 기본적인 Hook 이나 메서드 같은 걸 공부하도록 하겠습니다.
일반적으로 함수형 컴포넌트 내부에서 발생하는 side effect를 처리할 때 React 모듈에서 제공하는 useEffect 함수를 사용합니다. 이 때 두번째 파라미터로 입력하는 dependency array에 의한 useEffect의 동작 원리를 이해하고자 합니다.
useEffect의 동작 원리
첫 번째 파라미터로 입력한 함수가 호출되는 시점은 컴포넌트가 첫 렌더링이 되는 시점과 두 번째 파라미터로 입력된 dependency array의 각 element의 값이 변경되었을 때입니다.
그렇다면 dependency array의 각 element의 값이 변경되는지 판단하는 시점은 언제일까요?
답은 컴포넌트가 렌더링되는 시점입니다.
컴포넌트가 렌더링 될 때마다 선언해 놓은 useEffect함수가 실행되고 콜백 함수와 dependency array가 파라미터로 전달된다.
dependency array
언뜻 생각해보면 dependency array에 어떤 변수를 넣어도 해당 변수의 값이 변하면 콜백함수가 호출된다고 생각할 수도 있다. 하지만 dependency array를 비교하려면 useEffect함수가 실행이 되어야 합니다. useEffect함수가 실행이 된다는 것은 컴포넌트 함수가 호출된다는 것이고 이것은 곧 컴포넌트가 렌더링 된다는 것과 같은 뜻입니다.
순서
- (재)렌더링
- useEffect함수 호출 (파라미터로 콜백함수, dependency array 전달)
- 이전 dependency array와 비교
3-1. 3에서 다른 점이 발견 될 시 콜백 호출
렌더링이 일어나지 않으면 콜백함수도 실행되지 않는다. 따라서 브라우저의 너비가 변화되면 특정 로직을 수행하기 위해 dependency array로
useEffect(() => {
console.debug('브라우저 너비 변경!')
},[document.body.clientWidth]}위와 같이 렌더링과 무관한 값을 넣었을 때 해당 값이 변경이 되더라도 콜백은 실행되지 않는다는 것을 기억할 것. 하지만 렌더링이 일어나기 전에 실제로 clientWidth가 변경되고 렌더링이 되면 이전 clientWidth와 새로운 clientWidth가 달라서 콜백이 실행되므로 의도한거라면 사용 가능합니다. 하지만 컴포넌트의 동작이 복잡해서 렌더링 시점이 제대로 컨트롤 되지 않는다면 원하지 않는 동작이 발생할 수 있다는 것을 주의해야합니다.
결론
useEffect는 컴포넌트의 side effect를 처리하기 위함 함수입니다. 어디까지 컴포넌트의 side effect라고 정하는 것은 각자의 몫이지만 useEffect 함수를 만든 의도는 컴포넌트의 상태 (props, state)의 변화에 따라 상태를 이용해 리액트와 관련업는 부수적인 작업(side effect, dom 직접변경, api호출 등)을 처리하기 위한 것이기 때문입니다.
