React : Hook (React 기본 Hook : useState, useEffect)

React : 컴포넌트와 Props, State (+ useState 훅)

React : 컴포넌트와 Props, State (+ useState 훅)

 

---

Hook

 

컴포넌트 내에서 상태(State)나 생명주기(Lifecycle) 기능을 사용할 수 있게 해주는 함수

(원래 클래스형 컴포넌트에서만 쓸 수 있었던 React의 핵심 기능인데, 함수형 컴포넌트에서도 이런 기능을 사용할 수 있도록 React 16.8 버전 부터 도입되었다)

=> 코드의 재사용성과 가독성을 높여준다.

 

사용 규칙

- 함수형 컴포넌트 최상위 레벨에서만 호출해야한다. (반복문, 조건문, 중첩문 등 함수 안에서 사용할 수 없다)

- 컴포넌트 또는 커스텀 Hook 내에서만 호출할 수 있다.

- 커스텀 훅 지정 시 : Hook의 이름은 반드시 `use` 로 시작하며 use 뒤에는 대문자로 시작해야한다.

 

Hook의 종류

1. 기본 훅

React에서 기본적으로 내장된 훅이다.

 

1. useState

2. useEffect

3. useRef

4. useContext

5. useCallback

6. useMemo

7. useReducer

 

이 외

useActionState

useDebugValue

useDeferredValue

useId

useImperativeHandle

useLayoutEffect

useInsertionEffect

useOptimistic

useSyncExternalStore

useTransition

가 있나보다..

 

참고 공식문서 : https://ko.react.dev/reference/react/hooks

내장 React Hook – React

 

2. 커스텀 훅 (Custom Hook)

여러 컴포넌트 내에서 반복되는 로직을 하나의 함수로 분리해 재사용할 수 있도록 직접 만든 훅이다.

---

useState

 

컴포넌트 내에서 상태(state)를 관리할 때 사용하는 훅이다.

- useState 함수의 인자로 state의 초기 값을 지정한다.

- state(상태 값)과 setState(상태 값을 변경하는 함수)를 배열로 반환한다.

import React, { useState } from 'react'; // useState import

export default function ComponentName() {
  const [value, setValue] = useState(0); // 0으로 value의 초기 값을 설정함
  return <div>Hi</div>;
}

 

사용 예시

버튼을 누르면 value 의 값이 +1 씩 되도록 적용

export default function ComponentName() {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue(value + 1)}>값이 변경되는 버튼</button>
    </div>
  );
}

 

위와 같이 setValue를 통해 value의 값을 변경한다.

---

useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있게 해주는 훅이다.

- 실행하고 싶은 작업을 콜백 함수로 작성한다.

- return 은 clean-up 함수를 필요한 경우 작성한다.

- 의존성 배열 (dependency list)의 값에 따라 useEffect 내부 로직의 실행 조건을 적용할 수 있다.

  1. 의존성 배열이 없는 경우 : 매 랜더링 시 매번 실행한다.

  2. 의존성 배열이 빈 경우 : 최초 컴포넌트 렌더링 시 한번만 실행한다.

  3. 의존성 배열에 상태 값(state) 이 들어간 경우 : 들어간 상태의 값이 변경될 때에만 실행한다.

 

import React, { useEffect } from 'react';

export default function ComponentName() {
  useEffect(() => {
    // 콜백 함수 : 실행할 함수 (컴포넌트가 렌더링(=마운트) 될 때 실행한다)

    return () => {
        // clean-up 함수 : 컴포넌트가 언마운트 또는 useEffect를 재실행 하기 전에 실행할 함수
        // ex) 보통 타이머 해제, 구독 해지, 비동기 작업 취소 등을 처리해야 할 때 작성
    }

  }, [ 의존성 배열 ]);

  return <div>Hi</div>;
}

 

사용 예시

import React, { useEffect, useState } from 'react';

export default function ComponentName() {
  // 1. 의존성 배열이 없는 경우
  useEffect(() => {
    console.log('매 렌더링 시 (마운트 될 때) 실행됩니다.');

    return () => {
    console.log(
      '컴포넌트가 언마운트 되거나 useEffect 가 재실행 될 때 실행됩니다.');
    };
  }); // 의존성 배열 없음

  // 2. 의존성 배열이 [] 빈 배열 인 경우
  useEffect(() => {
    console.log('컴포넌트 최초 렌더링시에만 한번 실행됩니다.');
  }, []); // 의존성 배열 : [] 빈 배열

  // 3. 의존성 배열에 값이 들어간 경우
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log('최초 렌더링시 한번 실행 후');
    console.log('의존성 배열의 값이 변경된 경우에만 실행됩니다.');
  }, [value]); // 의존성 배열 : [value] => value 값이 변경될 때 마다 실행

  return (
    <button
      onClick={() => {
        setValue(value + 1);
      }}
    >
      증가버튼
    </button>
  );
}

 

‼️의존성 배열에 값이 있는경우, return 에 clean-up 함수를 지정했을 때 동작 방법

 // 3. 의존성 배열에 값이 들어간 경우
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log(
      '최초 렌더링시 한번 실행 + 의존성 배열의 값이 변경된 경우에 실행',
    );

    return () => {
      console.log('언마운트 전 + useEffect 재실행 시 실행');
    };
  }, [value]); // 의존성 배열 : [value] => value 값이 변경될 때 마다 실행
  
  
    return (
    <button
      onClick={() => {
        console.log('증가 버튼이 클릭되었습니다.');
        setValue(value + 1);
      }}
    >
      증가버튼
    </button>
  );
}

 

1. 최초 렌더링(마운트) 시 useEffect 실행

--- 증가 버튼 클릭 : value 상태(state) 값 변경 --- 

(=> 컴포넌트가 리렌더링 되면서 리렌더링 이전 컴포넌트가 언마운트 됨)

2. 컴포넌트가 언마운트 되면서 useEffect 의 return (clean-up) 함수 실행

3. value 값 변경으로 useEffect 실행

 

위와 같이 동작한다. 아래 사진 참고