리액트(React) useState란?

안녕하세요~ state, props 다음 이제 훅의 탄생으로 컴포넌트의 개발 생산성이 높아지게 되면서 useState등 훅의 필요도가 높아졌습니다. 이번에 알아볼 내용도 훅의 종류중 하나인 useState로 상태관리하는데 사용되는 훅입니다. useState를 어떻게 사용하고 상태를 관리하는지 한번 보시죠~

📑목차
1. useState
1-1. useState란?
1-2. useState 사용법
1-3. useState 예제 코드

서론

React를 사용해보신 분이라면, 본문으로 들어가기 전에 이런 경험이 있을 겁니다. Hook이 등장하기 전에는 컴포넌트에서 상태 관리를 할 때 this.state를 사용해야 했습니다. 또한 상태를 변경하려면 항상 this.setState를 사용해야 했고, this를 제대로 바인딩하지 않으면 코드가 복잡해지고 가독성이 많이 떨어졌습니다. 이런 상태관리를 최적화 할 수 있도록 하는 것이 리액트의 useState입니다. 그럼 useState에 대해 알아볼까요?

 

본론

1.  useState 

 

1-1. useState란?

리액트에서 컴포넌트안에 상태를 추가하고, 상태를 쉽게 관리할 수 있도록 도와주는 hook

 

1-2. useState 사용법

useState를 사용할려면 리액트에서 useState를 불러온 후,  함수형 컴포넌트안에서 호출하면 됩니다, 

import { useState } from 'react';

const 컴포넌트명 = () => {
  const [state, setState] = useState(초기값);

  return (
    // JSX 코드
  );
};

 

  const [state, setState] = useState(초기값);

여기서 state는 상태 변수를 말하고, setState는 상태를 업데이트할 함수를 뜻합니다.  useState안에 매개변수로는 초기값을 받습니다. 

1-3. useState 예제 코드

제가 간단한 이미지 슬라이드 컴포넌트를 구현해보았습니다. 다음버튼, 이전 버튼, 내용 보이기 등 상태가 변하는 데이터들은 useState로 상태관리를 통해 UI가 업데이트 되도록 하였습니다.

SlideImg.jsx 

import React, {useState} from "react";
import { puppyImg, catImg, lionImg } from "../images";

const SildeImg = () => {
    // 이미지 데이터 객체
    const imageData = {
        puppy : {
            name : "강아지",
            img : puppyImg,
            content : "귀여운 강아지!!"
        },
        cat : {
            name : "고양이",
            img : catImg,
            content : "고양이 톰!!!"
        },
        lion : {
            name : "사자",
            img : lionImg,
            content : "동물의 왕왕"
        }
    }

    const AnimalKey = Object.keys(imageData);

    // 선택한 인덱스, 업데이트할 인덱스
    const [selectIndex , setIndex] = useState(0);
    const [showContent , setContent] = useState(false);

    // 다음 인덱스로 넘어가는 함스
    const nextHandler = () => {
        setIndex((prevIndex) => {
            if(prevIndex < AnimalKey.length -1) {
                return prevIndex + 1
            } else {
                return prevIndex;
            }
        })
    }

    // 이전 인덱스로 넘어가는 함수
    const prevHandler = () => {
        setIndex((prevIndex) => {
            if(prevIndex > 0) {
                return prevIndex - 1
            } else {
                return prevIndex
            }
        })
    }
    // 상세 내용을 보여주는 함수
    const showHandler = () => {
        setContent(!showContent)
    }
    
    // 현재 선택된 이미지
    const SelectImage = imageData[AnimalKey[selectIndex]];

    return (
        <>
            <div>
                <img src={SelectImage.img} alt={SelectImage.name} />
                <h2>{SelectImage.name}</h2>

            </div>

            <div>
            <button onClick={prevHandler}>이전</button>
            <button onClick={nextHandler}>다음</button>
            </div>

            <div>
                <button onClick={showHandler}>{showContent ? "내용 숨기기" : "내용 보기"}</button>
                {showContent && <p>{SelectImage.content}</p>}
            </div>
        </>
    )
}

export default SildeImg

결론