[리뷰] useEffect, 클라이언트 AJAX요청

React 데이터 흐름

- 리액트의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 것이다. 컴포넌트를 먼저 만들고 페이지를 만드는 상향식(bottom-up) 방식으로 앱을 만든다.

- 하나의 컴포넌트는 한 가지 일만 하는 단일 책임 원칙에 따라 만드는 것이 좋다

- 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성처럼 전달받을 수 있다. 데이터를 전달하는 주체는 부모 컴포넌트가 되고 데이터 흐름이 하향식(top-down)임을 의미한다.

- 단방향 데이터 흐름(one-way data flow)를 따른다.

- 두 개의 자식 컴포넌트가 하나의 상태에 접근하고자 할 때는 두 자식의 공통 부모 컴포넌트에 state를 위치해야 한다.

 

State끌어올리기

- 하위 컴포넌트에서의 이벤트가 부모의 상태를 바꾸어야만 하는 상황이 올 때 State끌어올리기를 한다.

- 상위 컴포넌트의 "상태를 변경하는 함수"를 하위 컴포넌트로 전달하여, 하위 컴포넌트에서 해당 함수를 실행하는 방법이다.

 

https://ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

https://ko.reactjs.org/docs/lifting-state-up.html

State 끌어올리기 – React

 

side effect(부수효과)

Pure Function (순수 함수)

순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미한다. 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수함수라고 부를 수 없다. 또한 입력으로 전달된 원본 값을 수정하지 않는다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않는다 (Immutable)
}

upper('hello') // 'HELLO'

 

React의 함수 컴포넌트
react의 함수 컴포너느 역시 props가 입력으로 JSX Element가 출력으로 나간다. 여기에는 어떤 side effect도 없고, 순수함수로 작동한다.

function Greeting({name,age,area}){
	return (
    	<div>
            <div>이름:{name}</div>
            <div>나이:{age}</div>
            <div>지역:{area}</div>
        </div>
    )
}

하지만 보통 React 애플리케이션을 만들 때는 AJAX요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관 없는 API를 사용하는 경우가 발생할 수도 있다. 이는 React입장에서 전부 side effect이다. React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

 

Effect Hook기본

useEffect

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

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

- 컴포넌트에 상태(state)가 바뀌며 렌더링

 

*Hook을 쓸 때 주의할 점*

- 최상위에서만 Hook을 호출한다.

- React 함수 내에서 Hook을 호출한다.

useEffect(() => {
	console.log("안녕")
},[])

effect hook 조건부 실행

useEffect의 두번째 인자는 배열이다. 이 배열은 조건을 담고 있는데, 어떤 값의 변경이 일어날 때 첫번째 인자가 실행된다. 이 배열을 특별히 종속성 배열이라고 부른다.

두번째 배열 인자에 빈 배열이 들어가면 제일 처음 렌더링 될 때만 effect함수가 실행된다. 아무것도 넣지 않으면 state가 업데이트 될 때 마다 실행된다.

컴포넌트 내에서의 AJAX요청

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

전체 목록 데이터를 불러오고, 목록을 검색어로 filter하는 방법

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

컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법(서버에 매번 검색어와 함께 요청하는 방법)

 

두 방식의 차이점

	장점	단점
컴포넌트 내부에서 처리	HTTP 요청의 빈도를 줄일 수 있다.	브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다.
컴포넌트 외부에서 처리	클라이언트가 필터링을 구현하지 않아도 된다.	빈번한 HTTP요청이 일어나게 되며, 서버가 필터링을 처리하므로 서버가 부담을 가진다.

AJAX 요청이 매우 느릴 경우

로딩화면의 구현은 필수적이다.

로딩화면 구현 방법

 

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

return {isLoading ? <div>로딩중</div> : <div>결과</div>}

fetch요청 전후로 setIsLoading을 설정해주어 보다 나은 UX를 구현할 수 있다.

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