Effect Hook

•

Side effect가 어떤 의미인지 알 수 있다.

•

React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)

◦

Side effect의 예를 들 수 있다.

•

Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.

•

Effect Hook에서의 dependency array 사용법을 이해할 수 있다.

•

컴포넌트 내에서 네트워크 요청시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우

let message = 'Hi!';

function bye() {
  message = 'Bye~';
}

bye();
JavaScript
복사

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

순수함수에는 네트워크 요청과 같은 side effect가 없음

어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨

•

Math.random()

•

AJAX 요청

React는 side effect를 다루기 위한 Hook인 Effect Hook를 제공

React의 함수 컴포넌트는 순수 함수로 작동하지만 리액트 컴포넌트에서 아래와 같은 작업을 하는 경우 side Effect가 발생하게 된다.

•

타이머 사용 (setTimeout)

•

데이터 가져오기 (fetch API, localStorage)

리액트에서는 side effect를 다루기 위해 Effect Hook을 제공함

Effect Hook이 실행될 때

•

컴포넌트 생성 후 처음 화면에 렌더링

•

컴포넌트에 새로운 props가 전달되며 렌더링

•

컴포넌트에 상태가 바뀌며 렌더링

매 번 새롭게 컴포넌트가 렌더링 될 때 effect hook이 실행

hook 사용 시 주의할 점

•

최상위에서만 Hook을 호출

반복문, 조건문 혹은 중첩된 함수 내에서 hook을 호출하면 안됨

•

react 함수 내에서 hook을 호출해야한다.

컴포넌트 내에서 Side effect를 실행할 수 있게하는 Hook

useEffect(function,[종속성1, 종속성2, ...]);
JavaScript
복사

첫번째 인자는 함수로, 해당 함수 내에서 side effect를 실행하면 된다.

두번째 인자는 배열로, boolean형태의 조건이 아닌 어떤 값으 변경이 일어나는 조건을 담고 있음 → 배열에는 어떤 값의 목록이 들어간다.

배열 내의 어떤 값이 변할 때만 함수가 실행

빈 배열 넣기 useEffect(함수, []) : 컴포넌트가 처음 생성될때만 effect 함수가 실행

아무것도 넣지 않기 useEffect(함수) : 컴포넌트가 처음 생성되거나 props나 state가 업데이트 될 때 실행