state는 어떻게 동작하는가?

Dana·2022년 3월 26일

React State

React

목록 보기

2/2

State

컴포넌트 내부에서 바뀔 수 있는 값

state가 변경되면 state가 속한 컴포넌트가 다시 렌더링된다.

💡 **배열 비구조화 할당**

배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해 주는 문법

const array = [1, 2];
const one = array[0];
const two = array[1];

// 배열 비구조화 할당
const array = [1,2];
const [one, two] = array;
// 깔끔합니다!

📚 state 사용하기 (useState hooks)

state를 사용하기 위해서는 useState 함수를 사용해야 한다.

const [current, setCurrent] = useState(0);

useState는 결과 값으로 state 변수와 state를 갱신할 수 있는 함수를 리스트에 담아서 반환해준다.

컴포넌트를 만들 때 useState를 권장하는 이유는? 코드가 더 간결해지기 때문이다!

📚 useState 사용하기

Say.js
// useState 함수 import 하기
import React, { useState } from "react";
//message 셋팅하기
//첫 번째 원소인 message는 현재 상태
//두 번째 원소인 setMessage는 상태를 바꾸어 주는 함수
const Say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("반갑습니다");
  const onClickLeave = () => setMessage("안녕히가세요!");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};
export default Say;

useState 함수의 인자에는 상태의 초깃값을 넣어준다.
초깃값은 숫자, 문자열, 객체, 배열 모두 가능하다.
setMessage는 세터(Setter) 함수라고 부른다.

📚 say 컴포넌트를 App에서 렌더링하는 방법

App.js
import React from 'react';
import Say from './Say';

const App = () => {
	return <Say />;
};

export default App;

📚 한 컴포넌트에서 useState 여러 번 사용하기

import React, { useState } from "react";

const Say = () => {
  const [message, setMessage] = useState("");
  const onClickEnter = () => setMessage("반갑습니다");
  const onClickLeave = () => setMessage("안녕히가세요!");

  const [color, setColor] = useState("black");

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨간색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파란색
      </button>
			<button style={{ color }} onClick={() => setColor("black")}>
        검은색
      </button>
    </div>
  );
};

export default Say;