[React] Effect Hook

React 특징: 단방향 데이터 흐름(one-way data flow)

데이터 흐름이 하향식(top-down)

데이터를 전달하는 주체는 부모 컴포넌트임

 

제작은 상향식(Bottom-up)

컴포넌트부터 제작하고 조립하여 페이지를 만듦. 테스트가 쉽고 확장성이 좋음

 

State 끌어올리기(Lifting state up)

: 상위 컴포넌트의 상태 변경 함수를 props로 전달해 하위 컴포넌트에서 상위 컴포넌트의 상태 바꾸기

 

Side effect(부수 효과)

함수 내에서의 구현이 함수 외부에 영향을 끼치는 것

ex) fetch API나 LocalStorage를 사용해 데이터를 가져오기,

이벤트를 활용해 DOM 조작하기, AJAX 요청, 타이머 API 사용(setTimeout) 

=> React에서 이를 다루기 위한 Effect Hook 제공

Effect Hook을 사용하지 않고 네트워크 요청을 진행한다면 응답을 기다리는 동안 페이지가 멈추거나 깜빡일 수 있음

 

프로젝트나 소프트웨어의 유지보수를 좀 더 수월하게 하기 위해

Side Effect를 최소화하거나, 따로 분리하여 함수로 묶어주는 작업 필요

 

Pure Function(순수 함수)

매개변수만이 함수의 결과값에 영향을 주며, 전달인자가 수정되지 않고, side effect가 없는 함수.

전달인자에 따라 항상 똑같은 값을 리턴하여 예측 가능함

 

순수 함수로 컴포넌트를 작성하면 예상치 못한 결과값이 나온 경우 Input값과 함수 내부만 확인하면 됨

=> 유지 보수 편리

 

Hook

React 함수 내에서만 호출해야함

호출되는 순서에 의존하기 때문에 최상위에서만 호출해야함(반복문, 조건문, 중첩된 함수 내부에서 사용하지 말 것)

- 조건에 따라 어떨 때는 호출되고, 어떨 때는 호출되지 않는다면 순서가 밀리면서 불러오지 못하는 버그가 생김

- 조건식을 설정하고 싶다면 Hook(useEffect) 함수 내부에서 사용

 

useEffect

첫 번째 인자는 함수, 두 번째 인자는 종속성 배열(dependency array)

렌더링 후 커밋 단계에 effect 실행

* 부작용 = 부수 효과(side effect)

 

두 번째 인자(종속성 배열)로 조건부 effect 발생시키기

1. 아무것도 안 쓰는 경우

• 컴포넌트가 처음 생성될 때
• props가 업데이트될 때
• 상태가 업데이트될 때

무한 렌더링이 발생할 수 있기 때문에 비워 놓는 경우가 거의 없음

 

2. [] 빈 배열

최초 렌더링 시에만 실행

ex) 최초 외부 API를 통해 리소스를 받아오고나서 더 이상 API 호출이 필요하지 않을 때 사용

 

3. 배열 내부에 요소(한 개 이상) 넣기

요소 중 하나라도 변경되면 실행

 

Data Fetching - 필터링

1. 컴포넌트 내에서 필터링

: 전체 목록 데이터를 (한 번) 불러오고, 목록을 검색어로 필터링하는 방법

2. 컴포넌트 외부에서 필터링

: 컴포넌트 외부로 API 요청할 때 필터링한 결과를 받아오는 방법

(서버에 매번 검색어와 함께 요청)

	장점	단점
컴포넌트 내부	HTTP 요청 빈도를 줄일 수 있음	브라우저(클라이언트)가 메모리에 많은 데이터를 갖게되므로 클라이어트 부담이 늘어남
컴포넌트 외부	클라이언트가 필터링 구현을 안 해도 됨	빈번한 HTTP요청 발생, 서버가 필터링을 처리하므로 서버가 부담을 가져감

 

AJAX 요청(fetch API로 서버에 요청 보낼 때)

외부 API 접속이 느릴 경우를 고려하여 로딩화면 구현은 필수

const [isLoading, setIsLoading] = useState(true);

return {isLoading ? <div>로딩 중 ...</div> : <div>로딩 완료 화면</div>}

useEffect(() => {
  setIsLoading(true);
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(res => res.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);
    });
}, [filter]);

 

Batching

"상태 업데이트 일괄 처리"

state 변경 함수는 본래 동기적 코드인데,

이벤트 핸들러와 useEffect의 Batching 기능으로 인해 비동기적으로 동작함

- React 17: 이벤트 핸들러, useEffect

- React 18: 이벤트 핸들러, useEffect, Promise 내부, setTimeout

 

- 렌더링 최적화를 목적으로 함

1. 갱신의 취소

비동기적으로(동시에) 실행, 앞의 변경된 state를 불러오지 못하고 초기값 0을 불러옴(앞의 setState 무시)

const [state, setState] = useState(0)

...
setState(state + 1) // 무시
setState(state + 1) // 무시
setState(state + 1) // 실행
...

// 위의 결과로 state값은 1, Rendering 1회 실행

...
setState(state + 5) // 무시
setState(state + 3) // 무시
setState(state + 2) // 실행
...

// 위의 결과로 state값은 2, Rendering 1회 실행

 

2. 함수형 업데이트

콜백함수는 갱신한 인자를 불러옴. 동기적으로 누적값을 얻고 싶을 때 사용, 비동기 실행이기 때문에 렌더링은 1회

...
setState((state) => state + 5)
setState((state) => state + 3)
setState((state) => state + 2)
...

// 위의 결과로 state값은 10, Rendering 1회 실행

 

기타

- 최근에 검색엔진 최적화를 위해 SSR을 구현하는 next.js가 자주 사용됨

 

 

 

 

22.12.06

코스 S2U9 Effect Hook 진행중