State

State란?

 

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

 

예를 들어 const name = "홍부인" 이고, name이라는 값이

바뀌어야만 하는 정보여야  한다면 state로 생성한다.

 

State 만들기

 

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

 

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

먼저 const로 선언을 하고 [ ] 빈 배열을 생성하고, 배열의 첫번째 자리에는 이 state의 이름,

두번째 자리에는 set을 붙이고 state의 이름을 붙인다.

그리고 useState( )의 인자에는 이 state의 원하는 처음값을 넣어준다.

 

useState는 state를 만들어주는 리액트이 고유 기능이고 리액트에서는,

이러한 것을 기능이라고 칭하지않고 훅이라고 표현한다.

 

 사용예시

import React, { useState } from 'react';

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

// .. 중략

 

이 부분을 보자. name이라는 state를 만들었고, name state의 초기값은 "김할아"로 정했다.

초기값은 initial state라고 부른다. state의 정의처럼,언제든지 변할 수 있는 값이기 때문에 

초기값이라는 개념이 존재한다.

 

State 변경하기

 

state를 변경할때는 setValue (바꾸고 싶은 값)을 사용한다.

 

state란 컴포넌트안에서 변할 수 있는 값이다.

예를 들어 저 위 코드의 "김할아"라는 이름을 "박할아"로 바꿔야 한다고 생각해보자.

우리는 setName을 통해서 이름을 바꿀 수 있다.

"박할아"로 바꾸고 싶으니 setName("박할아")를 하면 이름이 바뀔 것이다.

 

버튼을 눌렀을때 김할아가 박할아로 바뀌도록 해보자.

 

// 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;

GrandFather 컴포넌트에서 초기값이 "김할아"인 name 컴포넌트를 만들고 

이를 Mother 컴포넌트에게, Mother 컴포넌트는 다시 Child 컴포넌트에게 props로 건네준다.

Child 컴포넌트에서는 버튼을 누르면 setstate가 실행되게 하여 버튼 클릭시 값이 바뀌도록 한다.

 

이렇게 setState를 통해 바꾼값은 어디에 저장되는 것이기 때문에 브라우저를 새로고침하면

다시 원래 초기값으로 돌아오게 된다.