FrontEnd

리액트 훅, React - Hook (1) - State (상태)

Jiwon_Loopy 2025. 3. 26. 19:41
반응형

리액트 훅?

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었으며, Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다고 공식 홈페이지에 설명이 기재되어 있다.

 

클래스의 컴포넌트 기능들을 함수 컴포넌트에서도 이용할 수 있게 해준다.

 

 

Hook의 조건

 

1. use 라는 키워드로 시작되며, 함수 컴포넌트 내부에서만 호출될 수 있다.

 

2. 함수 컴포넌트 내부에서만 사용될 수 있다.

 

3. 조건부로 호출되어서는 안된다. (조건문, 반복문 내부에서 호출 불가)

 

4. 함수 앞에 use라는 키워드를 붙여 Custom Hook을 만들 수 있다.

 

별도의 폴더로 만들어 관리하면 좋다.

 

 

State Hook

1. useState

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

State란, 컴포넌트의 현재 값을 보관하는 것이며, 현재 상태에 따라 다양한 UI를 렌더링 할 수 있도록 설계할 수 있다.

이 과정을 리 렌더링 (Re-Rendering) 이라고 한다.

 

 

 

 

 

사용법

 

먼저 useState를 해당 파일에 선언해준다.

 

 

일반적인 선언 방식은, 주로 값을 저장할 때 가저올 state와 바꿀 값을 정해주는 함수 setState를 선언해준다.

useState는 2의 크기를 가진 배열을 반환하는데,

 

-      0번째는 새롭게 생성된 state의 값

-      1번째는 state의 값을 변경한 (상태를 변화시키는) 함수, 상태 변환 함수

 

그러므로, 두 가지를 내부에 선언해주면 된다.

매개변수는 초깃값을 넣어준다.

 

 

조작하는 방법은 setState함수를 이용하여 값을 변화시켜주면, state의 값이 갱신된다.

state값이 바뀌면 리 렌더링이 발생하여 새로 화면이 깔리고, state를 props를 이용해 자식 컴포넌트에게 전달할 수 있다. -state값을 매개변수로 넘겨주면 부모로부터 props(상태값)을 받아 리 렌더링을 할 수 있다.

 

 

 

 

리 렌더링의 조건

 

-      자신이 관리하는 state값이 변경되었을 때

-      자식이 제공받는 props값이 변경되었을 때

-      부모 컴포넌트가 리 렌더링 되면 자식 컴포넌트도 리 렌더링

 

하지만, 이 과정에서 부모가 리렌더링 되면서 바꾸지 않은 자식의 state들도 리 렌더링 되면서 성능이 안 좋아질 수 있으므로, 각 State는 각자의 컴포넌트로 분리해주는 것이 좋다. 또한, 연관된 각 상태값들끼리 묶어 새로운 컴포넌트로 분리해주면 좋다.

 

 

 

 

State의 객체 형식 관리

 

초깃값 매개 변수로 객체를 넣어준다.

 

 

값을 바꿀 경우, 스프레드 연산자를 활용하여 다른 내용들도 같이 넣어주어야 한다.

 

 

함수 하나로 관리할 수도 있다.

 

 

 

2. useRef

import { useRef } from 'react';

function MyComponent() {
  const intervalRef = useRef(0);
  }

 

새로운 reference 객체를 생성하는 기능을 담당한다.

 

값이 변경되었을 때 변수를 생성한다는 것은 동일하지만, useRef변수는 값 변경 시 리렌더링이 일어나지 않는다.

 

컴포넌트가 렌더링하는 특정 Dom 요소의 접근 및 조작이 가능하다.

 

 

 

 

사용법

 

위에서 언급한 useStae와 비슷하나, 2개가 아닌, 1개의 변수로 받아주어야 한다.

function handleClick() {
    ref.current = ref.current + 1;
    alert('You clicked ' + ref.current + ' times!');
  }

 

접근할 때는 변수명.current로 접근하여 최신 값을 가저오거나 조작할 수 있다.

 

 

 

필요한 이유

 

-      리 랜더링 시 모두 처음부터 시작되는 것이기 때문에, 1번만 실행되는 것들은 useRef가 필요하다.

-      외부에 변수 선언 시 컴포넌트 1개를 사용할 때는 괜찮지만, 여러 개 사용할 때는 각 컴포넌트가 변수를 공유하여 치명적인 오류 발생

-      실제 값을 참조하거나, 렌더링 될 필요 없는 값을 지정할 수 있음

728x90
반응형