React_Day 03 :: useEffect와 Hook 함수

● useEffect

 

컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 업데이트 될 때 (특정 props가 바뀔 때)

특정 작업을 처리하는 방법을 제공합니다.

 

● Hook 함수란?

 

class형 컴포넌트에서 사용하던 상태값 또는 생명주기를 함수형 컴포넌트에서 사용할 수 있도록 제공되는 함수를 Hook이라고 합니다. Hook함수의 특징은 리액트 모듈에서 끄집어서 사용하는 방식입니다.

ex) import, React, {useEffect} from 'react'

 

● useEffect(함수, 의존값이 들어있는 배열)

 

의존 값이 들어있는 배열이 비워있다면 컴포넌트가 처음 나타날 때만 useEffect에 등록한 함수가 호출됩니다.

배열 자체가 깨끗하게 지워집니다. 컴포넌트가 사라졌다고 보는게 답입니다.

 

❤ 마운트시에 하는 작업

- 외부 API 요청

- 라이브러리 요청

- setInterval을 통한 반복작업 또는 setTimeout을 통한 작업 예약

- props로 전달 받은 값을 컴포넌트에 상태로 설정

 

❤ 언마운트시 하는 작업

- setInterval, setTimeout을 사용하여 등록한 작업을 clear 시키는 작업

- 라이브러리 인스턴스 제거

 

❤ useEffect 사용하는 상태나, props가 있다면, useEffect의 deps에 넣어주어야 합니다.

* deps : 배열

만약 useEffect안에서 사용하는 상태나 props를 deps에 넣지 않는다면

useEffect에 등록한 함수가 실행 될 때 최신 props 상태를 가르키지 않게 됩니다.

 

*리액트 컴포넌트는 기본적으로 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한 리렌더링 됩니다.

 

❤ useMemo를 사용한 연산값 재사용

 

useMemo(연산을 정의한 함수, deps)

useReducer를 사용하여 상태 업데이트 로직 분리하기

function reducer(state, action) {

    // 새로운 상태를 만드는 로직

    const nextState = ...

    return nextState;

}

 

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

 

❤호이스팅

 

함수 표현식은 호이스팅이 되지 않는다.

왠만하면 명확한 코드를 위해서 함수 표현식으로 하는 것이 좋다.

 

1. 첫번째 방법  // 함수 선언식

 

<script>

 

func1();

 

   function func1( ) { // 함수 선언식

   console.log('안녕하세요');

}

</script>

 

2. 두번째 방법 // 함수 표현식

 

<script>

 

func2();

 

const func2 = function( ) { // 함수 표현식

   console.log('안녕하세요');

}

</script>