TIL 23.02.03

오늘은 Effect Hook에 대해서 공부했다.

 

useEffect

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

 

side effect란?

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 존재

ex)  side effect 함수 예시

- fetch api를 사용한 함수 → API 응답이 실패할 가능성도 있고, 입력따라서 출력이 달라질 가능성이 있음

- Math.random() → 매번 동일한 값을 기대할 수 없기 때문이다

 

 

useEffect의 첫 번째 인자는 함수, 함수 안에 side effect를 실행

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

 

두 번째 인자는 조건의 의미를 담은 배열

조건은 어떤 값의 변경이 일어날 때를 의미하며, 배열에는 어떤 값의 목록이 들어감

 

ex)

- useEffect(함수,[])  : 컴포넌트 첫 생성시만, effect 함수 실행

- useEffect(함수) :  컴포넌트 첫 생성, props 업데이트, state 업데이트 시 실행

 

 

 

그렇다면, React 컴포넌트에서의 Side Effect는 무엇이 있을까?

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

 

이후, 실습을 통해 useEffect를 적용해보았다.

 

 

우선 REST API를 이용하여, 원하는 조건의 정보를 받아오는 작업을 진행하였다.

원하는 조건의 query를 작성해 url을 정해주었고, fetch를 통해 정보를 받은 뒤

setTimeout을 통해 의도적으로 시간 지연을 시켜서 프로미스 객체를 반환해 주었다.

 

이후 useEffect를 통하여, condition의 값이 변경할 때마다 useEffect 첫번째 인자인 함수를 실행해 준다.

 

Loading의 값을 state 조작 함수를 통해

정보를 받아오기 전까지는 Loading의 값을 true로 설정해주어 Loading화면이 보이게 하고,

정보를 받아온 후는 false를 설정해주어 받아온 내용이 화면에 보이게 한다.

핵심은 렌더링이 될 때마다,fetch를 불러오지않고
처음 렌더링 될 때와, condition이 변경할 때만,  fetch를 불러오는 것이다.

 

아래는 작동 화면이다.