State

[학습 목표]
1. State가 무엇인지 설명할 수 있습니다.
2. useState Hook에 대해 학습합니다.
3. useState를 통해 생성한 state와 setState를 통해 state를 제어할 수 있습니다.
4. (중요) state와 onClick, onChange 메서드를 결합하여 실습을 성공적으로 완료합니다.
5. 불변성이 리액트에서 뭘 의미하는지, 왜 중요한지 설명할 수 있습니다.

State

State란?
State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
즉각적인 UI의 반영을 하기 위해서 사용한다.

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

useState 훅을 사용하는 방식

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

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

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

응용하기 useState + onClick Event

1. 버튼 만들기

import React from "react";

function App() {

  return (
    <div>
      <button>버튼</button>
    </div>
  );
}

export default App;

2. 버튼에 onClick 함수 만들기

import React from "react";

function App() {
  // 버튼을 눌렀을 때 하고 싶은 행동 
  function onClickHandler() {
    console.log("hello button");
  }
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

3.state 구현과 onClickHandler 연결하기

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("최광희"); // 초기값 생성

  function onClickHandler() {
    setName("성공하자!"); // setName으로 바꿀 값을 생성
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

4. 버튼을 누를때마다 바뀌게 하려면?
버튼을 토글로 사용하면 된다!

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("최광희"); // 초기값 생성
  const [showName, setShowName] = useState(true); // 표시 여부를 관리하는 상태

  function onClickHandler() {
    // showName 상태를 토글하여 이름 표시 여부 변경
    setShowName(!showName);
  }

  return (
    <div>
      {showName ? name : "성공하자!"}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;