State란 무엇인가?

(1) State란 무엇인가?

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.

(2) State 만들기

State를 만들 때는 useState()를 사용한다.

아래의 예시를 보자.

import React, { useState } from 'react';

function GrandFather() {
  const [name, setName] = useState("김할아"); // 이것이 state!
  return <Mother grandFatherName={name} />;
}

// .. 중략 

useState 라는 함수를 이용해서 state를 만듭니다.

useState 는 state를 만들어주는 리액트에서 제공하는 기능입니다. 그래서 리액트에만 존재하는 개념이자 기능입니다.

그리고 앞으로 이것을 “기능” 이라고 하지 않고 “훅” 이라고 표현하겠습니다.

useState 훅을 사용하는 방식은 아래와 같습니다.

const [ value, setValue ] = useState( 초기값 )

먼저 const 로 선언을 하고 [ ] 빈 배열 을 생성하고, 배열의 첫번째 자리에는 이 state의 이름, 그리고 두번째 자리에는 set 을 붙이고 state의 이름을 붙입니다. 그리고 useState( ) 의 인자에는 이 state의 원하는 처음값 을 넣어줍니다.

처음값을 initial state 라고 부릅니다. state의 정의처럼, 언제든지 변할 수 있는 값이기 때문에 처음값 이라는 개념이 존재하는 것 입니다.

앞으로 누가와서 “state를 만들어보세요.” 라고 한다면, useState를 사용해서 만들면 됩니다.

(3) State 변경하기

state를 변경할때는 setValue(바꾸고 싶은 값) 를 사용한다.
다시 한번, state란 컴포넌트안에서 변할 수 있는 값 입니다.

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
          props.setName("박할아");
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} />
  );
}

function GrandFather() {
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />;
}

function App() {
  return <GrandFather />;
}

export default App;

• 일단 Child 컴포넌트에 할아버지 이름 바꾸기 라는 라벨을 가진 버튼을 만들어줄게요.

// src/App.js

//.. 중략

function Child(props) {
  return (
    <div>
      <button>할아버지 이름 바꾸기</button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

//.. 중략

• 그리고 이 버튼을 눌렀을 때 setName 을 실행 할 수 있도록 준비합니다.

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
					props.setName("박할아"); // 드디어 받은 setName을 실행합니다.
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName={props.setName} /> // 받아서 다시 주고
  );
}

function GrandFather() {
  const [name, setName] = useState("김할아");
  return <Mother grandFatherName={name} setName={setName} />; // 주고
}

function App() {
  return <GrandFather />;
}

export default App;

하지만 이렇게 바뀐 값은 브라우저를 새로고침하면 다시 초기값으로 바뀝니다.
setName을 통해서 바꾼 값은 어디에 저장되는 것이 아니기 때문에 단순히 화면에서만 바뀐 값으로 다시 렌더링이 되는 것입니다.