[React] Effect Hook

 

 

 

 

 

 

 

 

 

📌Effect Hook

 

React 컴포넌트 외부에서 데이터를 처리하고 받아오는 과정

 

 

🔗Side Effect (부수 효과)

 

React에서 컴포넌틑 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해

DOM 직접 조작할 때 Side Effect가 발생했다고 한다.

 

-------------------------------

 

💡 fetch가 뭐에요? 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일

 

// fetch() 기본 문법
let promise = fetch(url, [options])
//fetch 함수는 API를 사용하여 백엔드 서버와 비동기 요청을 하는 방식 중 하나
//fetch API는 3개의 interfeace를 도입하고 있는데 Headers, Request, Response이다.
//url-접근하고자 하는 URL
//options - 선택 매개변수, mehtod나 header 등을 지정할 수 있다.
fetch('url')
.then(response => response.json())
.then(response => data.filter(item => item.isRequired));

 

-------------------------------

 

// 전역 변수 foo를 수정하는 예제
let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킵니다!

 

🔗Pure Function(순수 함수)

 

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

 

순수함수 조건

 

함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수 x

입력으로 전달된 값을 수정 x

순수 함수에는 네트워크 요청과 같은 Side Effect x

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

 

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

upper('hello') // 'HELLO'

 

 

💡

• Math.random()은 순수 함수가 아닙니다. 왜일까요?
• 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

 

📖

• random 값은 말그대로 값이 다르기 때문에 순수함수가 될 수 없다
• 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측 불가능

 

 

👉🏼👉🏼 AJAX요청이 필요하거나, localStorage 또는 타이머같은 react와는 상관없는 API를 사용하는 경우 발생

          React 입장에서는 전부 Side Effect 이것을 다르기 위해 Effect Hook을 제공

 

 

 

 

 

📍Effect Hook - useEffect

useEffect는 컴포넌트 내에서 Side effect(특정 작업)를 실행할 수 있게 하는 Hook

이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것

 

 

API

 

useEffect의 첫 번째 인자는 함수

해당 함수 내에서 side effect를 실행하면 된다.

새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행

 

 

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

 

 

Hook을 쓸 때 주의할 점

 

• 최상위에서만 Hook을 호출한다.
• 리액트 함수 내에서 Hook을 호출한다.

 

 

 

🔗조건부 effect 발생(dependency array)

 

useEffect의 두 번째 인자는 배열

조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미

따라서 해당 배열엔 어떤 값의 목록이 들어간다(종속성 배열)

 

API

 

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

 

useEffect의 두 번째 인자는 종속성 배열

배열 내의 종속성1, 또는 종속성2의 값이 변할 때, 첫 번째 인자의 함수가 실행

 

 

🔗단 한번만 실행되는 Effect 함수

 

• 빈 배열 넣기 : 빈 배열을 useEffect의 두 번째 인자로 사용하면, 이때에는 컴포넌트가 처음 생성될 때만 effect 함수가 실행된다. 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있다.
  • useEffect(함수, [])

• 아무것도 넣지 않기 : 기본 형태의 useEffect는 컴포넌트가 처음 생성되거나, props가 업데이트되거나, 상태(state)가 업데이트될 때 effect 함수가 실행된다.
  • useEffect(함수)

 

 

🔗Data Fetching : 필터링 예제 다시 보기

 

목록 내 필터링을 구현하기 위해서는 다음과 같은 두 가지 접근이 있을 수 있다

 

1. 컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
2. 컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당)

 

장단점

 

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

 

 

🔗AJAX 요청

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

 

 

🔗AJAX 요청이 매우 느릴 경우?

모든 네트워크 요청이 항상 즉각적인 응답을 가져다주는 것은 아니다.

외부 API 접속이 느릴 경우를 고려하여, 로딩 화면(loading indicator)의 구현은 필수적

 

loading indicator

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

// 생략, LoadingIndicator 컴포넌트는 별도로 구현했음을 가정합니다
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

 

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

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