State란?

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

앞에서는 name을 const name = "김민재";라고 작성했는데, 만약 name이 바뀌어야 하는 값이라면,

state로 생성해야한다.

 

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

import React, { useState } from 'react';

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

위와같이 useState()를 사용하여 State값을 "김할아"로 만들었다.

앞으로 이런 기능들을 '훅'(Hook)이라고 말하겠다.

 

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

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

이렇게 State로 초기값을 생성해준다. 이를 initial state라고도 한다.

이때 이 State의 이름은 value이다. (맘대로 변형하여 써도됨, ex) name, age)

옆의 setValue는 State값을 바꾸고 싶을때 사용한다.

위의 코드를 예로 들자면, setName('김할멈') 을 사용하면 김할아에서 김할멈으로 바뀌게되는 것이다.

 

import React, { useState } from "react";

function Child(props) {
  return <div>{props.grandFatherName}</div>;
}

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

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

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

export default App;

 

 

State변경 예시

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;

GrandFather컴포넌트에서 State를 "김할아"로 만들었고,

Mother에게 grandFathername ={name}, setName={setName}로 props를 보냅니다.

 

Mother컴포턴트에서는 동일하게 props를 Child로 보냅니다.

 

Child컴포넌트에서는 버튼을 만들어 버튼클릭 시 props.setName('박할아')로 State를 변경하고,

변경전에는 props.grandFatherName을 김할아로, 변경후에는 박할아로 div태그 안에 출력합니다.

여기서 박할아로 변경했다 하더라도, setName을 통해 바꾼 값은 어디에 저장되는 것이 아니고,

 화면에서만 바뀐값으로 렌더링되는 것이기 때문에 새로고침시 다시 초기값인 '김할아'로 바뀌게 됩니다.

 

초기상태

바꾼상태