[React] 리액트 함수형 컴포넌트의 state에 대한 정리 ( feat. useState 훅 )

728x90

오늘 정리하는 state의 내용은 함수형 컴포넌트 기준으로 정리함..

클래스형 컴포넌트는 다음에 사용할 때 정리해야지..

리액트에서 state란?

state는 리액트 컴포넌트 내부에서 관리되는 데이터이다.

또는 컴포넌트 데이터의 상태를 의미하여, 이 데이터의 상태가 변경될 때마다 변경된 영역에 대해

랜더링을 하여 동적인 UI를 제공하며, 로직에 사용하기 위해 임시적으로 값을 저장한다.

요약하자면, 컴포넌트 내부에서 사용하기 위한 데이터라고 생각하면 된다.

리액트의 함수형 컴포넌트에서 state를 사용하기 위해서는 useState 훅을 import 해야한다.

(클래스형 컴포넌트에서는 클래스 내부에서 state를 정의하기 때문에 따로 import 하지 않아도 된다.)

state 기본 사용문법

useState import

import { useState } from 'react';

useState기본문법

const [count, setCount] = useState(0);

import문법을 통해 useState 훅을 import하면 해당 컴포넌트 내에서 useState함수를 사용할 수 있게 된다.

useState함수에 대해 조금 설명을 하자면 아래와 같다.

1. useState함수는 리액트 훅(Hook)중의 하나로 함수형 컴포넌트에서 상태를 관리할 수 있도록 도와주는 함수이다.

2. useState함수를 이용하면 간단하게 state를 선언하고 관리 할 수 있게 해준다.

3. useState함수의 리턴값은 배열이며, 첫번째 요소는 상태값이며, 두번째 요소는 상태를 업데이트해주는 함수이다.

결론은 state를 쉽게 만들어주는 친구인데, 여기서 중요한게 리턴값이 배열이라는 점이다..

샘플코드를 조금 더 보면서 설명을 하기 위해 아래 샘플 코드를 보도록 하자.

## sample1
// useState의 상태값을 null로 초기화하여 각 변수(count, setCount)에 할당
// 여기서 count에는 null이 할당, setCount에는 상태값을 변경할 수 있는 function이 할당된다.
const [count, setCount] = useState(null)

## sample2
// useState의 상태값을 null로 초기화하여 변수 state에 할당
// state의 첫번째 요소는 상태값이며 null을 count에 할당
// state의 두번째 요소는 상태값을 변경하는 function이며 이를 setCount에 할당
const state = useState(null)
const count = state[0]
const setCount = state[1]

// 위의 sample1과 sample2는 똑같이 동작한다.
// 단 sample1의 경우가 조금더 간결해서 많이 사용되는 패턴이다..

샘플코드

샘플코드

import { useState } from "react";

const Main = () => {
  const [user, setUser] = useState({
    name: "",
    isLogin: false,
  });

  const changeIsLogin = () => {
    setUser({
      name: "bome",
      isLogin: !user.isLogin,
    });
    console.log(user.isLogin);
  };

  return (
    <>
      <button onClick={changeIsLogin}>클릭</button>
      {!user.isLogin ? (
        <div style={{ backgroundColor: "red" }}>로그아웃</div>
      ) : (
        <div style={{ backgroundColor: "green" }}>로그인 {user.name}</div>
      )}
    </>
  );
};

export default Main;

결과

useState의 상태변환 함수 사용시 주의할 점

useState의 상태변환 함수 즉 2번째 인자는 로직을 "비동기"로 처리한다.

그렇기 때문에 state의 상태가 변경된 후의 시점에서 후처리 작업을 하고 싶다면

useEffect와 같이 update된 시점을 잡아 작업을 해주어야 한다...

로컬변수와 state의 차이점

로컬변수와 state 둘 다 컴포넌트 내부에서 사용하기 위해 임시적으로 저장되는 데이터라는 점은 똑같다.

하지만 로컬 변수는 데이터가 변경이 되더라도 리랜더링이 되지 않는다.

즉 데이터 변경에 따른 랜더링을 원한다면 state를 통해 데이터를 관리 하도록 하자.

(VueJs의 data객체와 같음..)