1. Side Effect(부수 효과)
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 한다.
React에서
Side Effect가 발생하는 경우
1. 네트워크 요청을 하는 경우 (fetch API..)
2. 타이머 사용(setTimeout)
3. LocalStorage
순수 함수
순수 함수는 함수에 입력된 값만이 함수의 결과에 영향을 주고, 입력된 값을 수정하지 않는 함수를 말한다.
Math.random()은 항상 같은 값이 리턴되지 않으므로 순수 함수가 아니다.
2. useEffect
useEffect는 컴포넌트 내에서 side Effect를 실행할 수 있게 하는 Hook이다.
Hook 사용 시 주의점
- 최상위에서만 호출한다.
- React 함수 내에서 호출한다.
useEffect(함수,[종속성1, 종속성2, ...])
두 번째 인자에 따라서 함수가 실행된다.
1. 두 번째 인자가 없을 경우
- 컴포넌트 생성 후 처음 화면에 렌더링 될 때
- 컴포넌트에 새로운 props가 전달되며 렌더링 될 때
- 컴포넌트에 state가 바뀌며 렌더링 될 때
2.두 번째 인자에 배열이 들어갈 때
- 배열 내의 값이 변할 때마다 함수 실행
3.두 번째 인자에 빈 배열이 들어갈 때
- 컴포넌트가 처음 생성될 때 한 번만 실행
