[React] React Hooks - useState

React Hooks - useState

• useState란
  • 현재 상태를 나타내는 state 값과 상태를 변경하는 setState 값이 한 쌍
  • state는 초기값을 설정할 수 있으며 초기값은 첫 랜더링 때 한번 사용된다.
  • state는 문자열, 숫자, boolean, 배열, null, 객체 등 다양한 값을 넣을 수 있다.
  • 순수 함수→ 컴포넌트 내에서 변경될 수 있는 값
  • 해당 상태를 소유하지 않은 컴포넌트에서는 props
  • 상태 변수는 read-only이므로 변경은 setter를 이용한다.
  • 변수가 객체(참조)형이면 spread 연산자로 사본을 만들어서 할당
  • setter에서 값 수신 (setState)
  • react-dom’s flushSync는 동기로 DOM 갱신 (화면 그려지고 난 후에 처리하고 싶을 때)
    • flushSync( () ⇒ setCount(c ⇒ c + 1)); // DOM 즉시 갱신
  • React 18.2부터는 Promise, Timeout, EventHandler 내에서 여러 상태를 변경해서 batch-render 한번만 re-rendering 된다.
• import
  • useState 사용하기 위해서 import 해야한다.
  • import { useState } from ‘react’;
• 변수 선언
  • const [state, setState] = useState<타입>(초기값이나 초기화함수);
    • 초기화 함수는 1회만 호출, re-render시 호출 안된다.
• 변수 재선언
  • state 값 변경 시 setter 함수 호출 후 변경될 값을 넣어줘야 한다.
  • setState(변경될값);
• 변수 출력
  • 예시 <input type='text' value={state} onChange={setState사용함수} />
• 예시
  • 선언, 재선언, 출력 예시

  import { useState } from 'react';  // useState import
  
  export type LoginUser = { id: number; name: string };
  export type Cart = { id: number; name: string; price: number };
  export type Session = {
    loginUser: LoginUser | null;
    cart: Cart[];
  };
  
  function App() {
  	// 변수 선언 
  	const [count, setCount] = useState(0);
    const [session, setSession] = useState<Session>(SampleSession);
  	
  	// 변수 재선언
  	const plusCount = () => setCount((prevCount) => prevCount + 1);
  	const login = (id: number, name: string) => {
      setSession({ ...session, loginUser: { id, name } });
    };
    const logout = () => {
      setSession({ ...session, loginUser: null });
    };
  
  	// 변수 출력
  	return (
  	<div>
  		<span>count: {count}</span>
  		<span>session: {session}</span>
  	</div>
  	);
  }
  

  • 변수 재선언(event 함수) 예시

  import { ChangeEvent, useState } from 'react';
  
  const CITIES = ['서울', '대전', '대구', '부산', '창원'];
  	
  export default function Sample() {
  	// 변수 선언 
    const [nickname, setNickname] = useState('HONG');
    const [address, setAddress] = useState('서울');
    const [age, setAge] = useState('20');
    
  	// 변수 재선언 함수 
    const changeNickname = (e: ChangeEvent<HTMLInputElement>) =>
      setNickname(e.currentTarget.value);
  
    const changeAge = (e: ChangeEvent<HTMLInputElement>) =>
      setAge(e.currentTarget.value);
  
    return (
      <>
        <div>
          <h5>
  					// 변수 출력 
            NickName: {nickname}({age}세) - {address}
          </h5>
          <input type='text' value={nickname} onChange={changeNickname} />
          <input type='number' value={age} onChange={changeAge} />
          <input
            type='text'
            value={address}
  					// 변수 재선언
            onChange={(e) => setAddress(e.currentTarget.value)}
          />
  				// 변수 재선언
          <select onChange={(e) => setAddress(e.currentTarget.value)}>
            {CITIES.map((item) => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </select>
        </div>
      </>
    );
  }