side-effect
useEffect()는 React의 side-effect 중 하나이다. 그리고 side-effect는 어떤 함수를 실행함에 따라 외부 값이 변화하는 현상을 말한다. 그렇기 때문에 개발자가 원하는 값을 바꾸는 것에 있어 유용하기도 하지만 원치 않는 값의 훼손을 불러올 수도 있기 때문에 선택적으로 발생하는 것이 좋다.
useEffect()의 구조
useEffect()는 React 팀이 라이브러리에 만들어 둔 side-effect 제어 함수이다. 우리는 이 함수를 통해 원하는 데이터의 변화를 통제할 수 있게 된다. 다음은 useEffect()의 형태이다.
useEffect(()=>{
console.log('checked')
}, ['지정대상'])useEffect의 구조는 크게 두 가지를 기억하면 된다. 첫 번째는 실행 시킬 함수, 두 번째는 '주시 할 대상' 이다. 주시할 대상에 한 해서 그 대상이 변화하여 새롭게 렌더링 될 때마다 함수를 실행시키는 것이다.
그렇기 때문에 만약 두 번째 주시대상을 비어놓는다면, 모든 것이 주시 대상이 되는 것으로 간주하기 때문에 React가 렌더링 되기만 하면 함수가 실행된다.
이와 반대로, []으로 '그 어느것도 지정대상으로 하지 않겠다.'고 하면 처음 페이지가 로딩될 때의 렌더링 이외 그 어더한 렌더링에도 반응하지 않게 된다.
이러한 주시대상을 React팀에서는 'Dependencies' 라고 부른다.
Dependency로 지정 할 것과 아닌 것
dependency를 어떻게 설정하느냐에 따라 side-effect를 효과적으로 통제할 수 있는지가 결정된다. 그렇다면 무엇을 dependency로 설정하는 것이 좋고, 무엇을 설정하지 않아도 될까?
1) 변화가 일어나는 '값'을 dependency로 설정한다.
예를 들어, 아래와 같이 변화가 일어날 text값은 dependency의 대상으로 알맞다.
const [text, setText] = useState('')2) state를 바꾸는 함수는 지정하지 않아도 된다.
위에서 setText의 경우 변화하는 값이 아닌 state를 어떻게 변화시킬지 지정하는 함수이다. 이미 지정된 함수는 변화가 일어나지 않기 때문에 이를 dependency로 지정한다 한들 우리가 얻는 이점은 없다.
3) 외부에서 불러오는 API나 전역 함수는 지정하지 않아도 된다.
이렇게 지정된 외부의 것들은 페이지가 렌더링되는 것에 아무런 영향을 받지 않으며, 변화가 일어나지 않기 때문에 지정해도 달라지는 것은 없다.
4) 해당 컴포넌트 밖의 함수는 지정하지 않아도 된다.
외부의 함수를 지정해도 그 함수는 이미 정해졌고, 변화가 일어나지 않을 것이지 때문에 dependency로 지정해도 react는 아무런 추가 동작을 일으키지 않을 것이다.
