#7. state, useState

• state: 컴포넌트의 속성값

→ state가 바뀌면 react는 UI를 자동으로 업데이트 시켜줌
→ 개발자는 state만 잘 관리하면 화면을 다시 그려주는 작업은 신경쓰지 않아도 됨

예시 코드

→ 이름은 바뀌었는데 DOM 업데이트가 안됨!

→ 바닐라JS로 작업한다면 돔 업데이트 해주는 자바스크립트 코드 작성해줘야함

위 코드에서 name은 state가 아님, 단순 변수
→ 이 컴포넌트가 관리하고 있는 상태값 아님
→ 그래서 바뀌어도 리액트는 인지하지 못하고 UI 업데이트 안해줌

→ 어떻게 state로 만들 수 있을까?

첫번째 리액트 Hook, useState 써보자!

Hook은 react 16.8버전 부터 사용할 수 있음

초기 리액트

• state, lifecycle 관리하려면 클래스형 컴포넌트 사용
• 단순 UI 표현하는 것만 함수형 컴포넌트로 작성

16.8 이후~

• 모든 컴포넌트를 함수형으로 만들 수 있게됨
• Hook을 사용해서 함수형에서도 state, lifecycle 관리가 가능해짐

• 자주사용하는 Hook, 개발자가 직접 커스텀 Hook 제작하는 방법 다루겠음!

useState

const [name, setName] = useState('Mike');

• name: state값
• setName: state를 변경하는 함수
• useState(초기값)

→ setName 함수가 호출되어 name이 바뀌면, 리액트는 컴포넌트를 다시 렌더링 해준다.

ver1.

import { useState } from 'react';

export default function Hello(){
  const [name, setName] = useState('Mike');
  function changeName() {
    // document.getElementById("name").innerText = name;
    setName(name === "Mike" ? "Jane" : "Mike");
    
  }
  return (
    <div>
      <h1>state</h1>
      <h2 id="name">{name}</h2>
      <button onClick={changeName}>Change</button>
    </div>
  );
}

ver2.

import { useState } from 'react';

export default function Hello(){
  const [name, setName] = useState('Mike');
  return (
    <div>
      <h1>state</h1>
      <h2 id="name">{name}</h2>
      <button onClick={()=>{
				setName(name === "Mike" ? "Jane" : "Mike");
			}}>Change</button>
    </div>
  );
}

→ 동일한 컴포넌트라도 state는 각각 관리된다. (다른 state에 영향 X)