C2C Dev

State 란

컴포넌트의 동적인 데이터를 관리하는 객체

시간이 지나거나 사용자 상호작용에 따라 변경하며,

상태가 변경되면 리액트는 해당 상태에 의존하는 컴포넌트를 다시 렌더링하여 UI를 최신 상태로 유지

특징

• 내부적 관리: State는 컴포넌트 내부에서 관리되며, 외부에서 직접 변경할 수 없다.
• 변경에 따라 자동 업데이트: State가 변경되면 해당 컴포넌트와 그 하위 컴포넌트가 다시 렌더링
• 비동기적으로 처리: State 업데이트는 비동기적으로 처리될 수 있다.

import React, { useState } from 'react'; // 상태(State)를 사용하기 위해 {useState}를 불러옴

function Counter() {	// Counter 함수 컴포넌트

  // useState를 사용하여 count라는 상태와 setCount라는 상태 업데이트 함수를 정의
  const [count, setCount] = useState(0);
  // const[변수값, 업데이트할 변수값] = useState(초기값);

  return ( // 반환 출력
    <div>
      <p>현재 카운트: {count}</p> // 출력될 문구
      <button onClick={() => setCount(count + 1)}>카운트 증가</button> // 카운트 증가 버튼 클릭시, 1씩 추가
    </div>
  );
}

export default Counter;

• useState(0): count라는 상태 변수는 처음에 0으로 초기화
• setCount: count의 값을 업데이트할 때 사용하는 함수
• onClick 이벤트에서 setCount(count + 1)을 호출하여 버튼을 클릭할 때마다 count 값을 1씩 증가

결과물

See the Pen Untitled by 유상현 (@ltfsrwdf-the-selector) on CodePen.

기존에는 상태관리를 위해 클래스형 컴포넌트를 사용했지만,

지금의 state에 추가로 hook이 도입되면서 함수형 컴포넌트를 사용하게 되었다.