[SEB FE 44] 클라이언트 Ajax 요청

✍ 복습 자료

• Side Effect

  컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과

  함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 한다. 예를 들면 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다고 말한다.

• Math.random()은 순수 함수?

  어떤 결과값이 나올지 예측이 불가능하기 때문에 순수 함수가 아니다!

• 어떤 함수가 fetch API를 이용해 Ajax 요청한다면, 이 함수는 순수 함수?

  Ajax 요청은 외부 상태를 바꾸기 때문에 해당 기능을 가진 함수는 순수 함수가 아니다!

• React 컴포넌트에서의 Side Effect는 어떤 것들이 있을까?

  1. 타이머 사용 (setTimeout)
  2. 데이터 가져오기 (fetch API, localStorage)

React는 Side Effect를 다루기 위해서 Effect Hook을 제공한다.

• useEffect

첫 번째 인자로 함수를 받는다. 이 함수가 실행되는 조건은?

컴포넌트 생성 후 처음 화면에 렌더링(표시)
컴포넌트에 새로운 props가 전달되며 렌더링
컴포넌트에 상태(state)가 바뀌며 렌더링

두 번째 인자는 배열을 받는다. 배열은 조건을 담고 있다. 여기서 조건은?

어떤 값의 변경이 일어날 때를 의미한다.
해당 배열엔 어떤 값의 목록이 들어가는데, 이 배열을 특별히 종속성 배열이라고 부른다.

useEffect(함수, [종속성1, 종속성2, ...])
배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행된다.
이 말은 배열 내의 어떤 값이 변할 때에만, (effect가 발생하는) 함수가 실행된다는 의미.

• useEffect(함수) VS useEffect(함수, [])

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

• useEffect(함수, []) 언제 사용할까?

  대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있다.