React의 state와 props

State란?

React 컴포넌트 내에서 관리되는 데이터의 현재 상태를 나타낸다.
각 컴포넌트는 자체적인 state를 가질 수 있으며, 이 데이터는 해당 컴포넌트 내에서 변경될 수 있다.

 

왜 사용할까?

• 동적인 데이터 관리
  • state를 사용하여 애플리케이션의 상태를 저장하고 관리할 수 있다.
  • 이는 사용자와의 상호작용, 서버에서 받은 데이터, 현재 애플리케이션 상태 등과 같이 변할 수 있는 데이터를 처리하는 데 유용
• UI 업데이트
  • state의 값이 변경되면 React는 해당 컴포넌트와 그 자식 컴포넌트의 렌더링을 다시 실행
  • 이를 통해 UI가 업데이트되어 사용자에게 실시간으로 변경된 정보를 보여줄 수 있다.
• 조건부 렌더링
  • state의 값에 따라 다른 UI나 동작을 구현할 수 있다.
  • 예를 들어, 사용자의 인증 상태에 따라 로그인 폼이나 사용자 정보를 표시하는 등의 조건부 렌더링이 가능
• 컴포넌트 간 데이터 전달
  • state를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다.
  • 부모 컴포넌트의 state 값을 자식 컴포넌트의 props로 전달하여 데이터를 공유할 수 있다.

 

상태 관리

setState() 메서드

• 상태를 관리할 수 있게 해주는 메서드
• useState 함수는 배열을 반환
  • 첫 번째 요소는 현재 상태의 값
  • 두 번째 요소는 상태를 업데이트하는 함수
• setState 호출은 비동기적으로 동작

 

사용법

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [number, setNumber] = useState(0);
  const add = () => {
    setNumber(number + 1);
    console.log(number);
  };

  return (
    <div>
      <div>{number}</div>
      <button onClick={add}>+ 1</button>
    </div>
  );
}

 

실행 사이트

https://stackblitz.com/edit/stackblitz-starters-ju7hzt?file=src%2FApp.js,src%2Findex.js

 

해당 코드는 문제 없이 잘 작동한다.
하지만 개발자 도구에서 콘솔을 찍어보면 number 값이 한박자 늦게 찍히는 것을 볼 수 있다.
즉, setNumber 함수는 비동기적으로 작동한다는 말이다.

 

비동기적으로 작동하는 이유

UI를 그리는 작업(렌더링)은 계산적 비용이 많이 드는 작업 중 하나이다.

setState를 호출하면 React는 즉시 컴포넌트 상태를 업데이트하거나 렌더링하지 않는다. React는 상태 업데이트를 예약하고, 여러 상태 업데이트를 모아서 일괄 처리한 후, 단일 렌더링을 수행한다.

이렇게 상태 업데이트를 일괄로 처리하면 불필요한 재렌더링을 피하고 성능을 향상시킬 수 있다.

결국, setState는 성능 최적화를 위해 상태 업데이트를 일괄 처리하여 비동기적으로 동작하며, 이러한 방식으로 호출된 setState가 바로 상태를 업데이트하지 않는 것이다.