useEffect

1. Side Effect(부수효과)

• 부수효과란, 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다.
  ex) React 컴포넌트에서의 Side Effect
  • 타이머 사용(setTimeout)
  • 데이터 가져오기(fetch API, localStorage)

2. Pure Function(순수함수)

• 순수함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다.
• 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수함수는 입력으로 전달된 값을 수정하지 않는다.
• 순수함수에는 네트워크 요청과 같은 Side Effect가 없다. 순수 함수의 특징 중 하나는, 어떠한 전달인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 그래서 예측 가능한 함수이기도 하다.
• Q. Math.random()은 순수함수 일까?
  • No. 같은 input에 대한 output이 늘 같지 않기때문에
• Q. fetch API는 순수함수 일까?
  • No. 응답이 늦을수 있고, 결과가 다를수 있고, 다른 응답을 받을 수 있다.

3. useEffect 사용하기

• useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook이다.
• useEffect는 pure function이어야하는 리액트 함수 컴포넌트에서 side effect를 사용해야만 하는 경우에 쓴다.
• Hook을 쓸 때 주의할 점
  • 최상위에서만 Hook을 호출한다.
  • React 함수 내에서 Hook을 호출 한다.

3-1. 첫번째인자

• useEffect의 첫번째 인자는 함수이다. 해당 함수 내에서 sede effect를 실행하면 된다.
• 아래 3 조건에서 실행된다. 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행된다.
  1. 컴포넌트 생성 후 처음 화면에 렌더링(표시)
  2. 컴포넌트에 새로운 props가 전달되며 렌더링
  3. 컴포넌트에 상태(state)가 바뀌며 렌더링

3-2. 두번째인자

• useEffect의 두번째 인자는 배열이다. 이 배열은 조건을 담고있다. 여기서의 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미한다. 그래서 해당 배열에는 어떤 값의 목록이 들어간다. 이 배열을 특별히 종속성 배열이라고 부른다.

  useEffect(함수, [종속성1, 종속성2,…])

• 배열 내의 종속성 1, 또는 종속성 2의 값이 변할 때, 첫번재 인자의 함수가 실행된다. 배열 내의 어떤 값이 변할 때에만, effect가 발생하는 함수가 실행된다.

3-2-1. 종속성 배열 목록이 없는 경우(즉, 빈배열인 경우)

useEffect(함수,[ ])

• 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 이것이 언제 필요할까? 대표적으로 처음 단 한번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을때에 사용할 수 있다.

3-2-2. 아무것도 넣지 않은 기본형태

useEffect(함수)

• 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, 상태(state)가 업데이트될 때 effect 함수가 실행된다.