📖Side Effect (부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다.
- React에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오는 경우
- 이벤트를 활용해 DOM 직접 조작하는 경우
Pure Function (순수 함수)
오직 함수의 입력만 함수의 결과에 영향을 주는 함수를 말한다. 순수 함수는 Side Effect가 없고, 항상 똑같은 값이 리턴된다.
React 컴포넌트에서의 Side Effect
React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나가므로 Side Effect가 없으며, 순수 함수로 작동합니다.
하지만 타이머 사용(setTimeout)이나 데이터 가져오기(fetch API, localStorage)를 사용할 경우 Side Effect가 발생할 수 있다. 이경우 React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.
📖Effect Hook
useEffect(함수)
useEffect(함수, [종속성1, 종속성2, ...])
useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다. 컴포넌트가 렌더링 될 때마다 Hook이 실행된다.
- 컴포넌트 생성 후 처음 화면에 렌더링(표시)
- 컴포넌트에 새로운 props가 전달되며 렌더링
- 컴포넌트에 상태(state)가 바뀌며 렌더링
첫번째 인자는 함수로 렌더링 시 실행될 함수이고 두번째 인자는 배열로 배열 내의 어떤 값이 변할 때에만 함수가 실행된다. 예를 들어만약 2번째 인자로 []빈배열을 넣는다면 컴포넌트가 처음 생성될 때만 effect함수가 실행된다.
Hook 사용 주의점
- 최상위에서만 Hook을 호출한다.
- React 함수 내에서 Hook을 호출한다.
긍정적으로~✍️(◔◡◔)