React State 이해하기: 데이터 흐름과 UI 동기화

 

React에서 State는 컴포넌트의 상태를 추적하고 관리하는 데 사용되는 데이터이다.
컴포넌트의 렌더잉에 영향을 주는 정보로, 사용자의 상호작용이나 시간의 경과에 따라 변경될 수 있다.
State의 변경은 React가 컴포넌트를 다시 렌더링하도록 하여 사용자 인터페이스가 최신 상태로 유지된다.
개발할 때 State 관리를 통해 UI의 일관성을 높이고 데이터 흐름을 관리할 수 있다

 

State의 특징 >>

 

State는 컴포넌트 내부에서 변경될 수 있다.
사용자의 상호작용 또는 시스템 이벤트에 반응하여 UI를 업데이하기 위해 필요하다.

 

각 React 컴포넌트는 자신만의 State를 가지며, 다른 컴포넌트의 State에 직접적으로 접근할 수 없다.

 

State의 업데이트는 비동기적으로 일어날 수 있다.
React는 성능 최적화를 위해 여러 setState 호출을 한 번의 업데이트로 묶을 수 있다.

 

State 사용법 >>

 

클래스형 컴포넌트 >>
초기 상태는 contructor 에서 this.state를 통해 설정한다.
상태를 변경하기 위해서는 this.setState() 메소드를 사용한다.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

위 예시는 화면에 0으로 시작하는 카운터와 Increment 버튼이 표시되며, 버튼을 클릭하면 카운터가 1씩 증가하는 코드다.

 

constructor(props)는 생성자를 정의하고 super(props)를 호출하여 부모 클래스의 생성자를 호출한다.
(React 컴포넌트의 초기화를 담당한다)

 

생성자 내에서 this.state 객체를 초기화하고, 초기 카운트 값을 0으로 설정한다.

 

increment 메서드는 버튼이 클릭될 때 호출되는 콜백 함수다.
this.setState 를 사용하여 상태를 업데이트하고 현재 count 상태를 1증가시킨다.

 

render() : 클래스 컴포넌트에서는 render 메서드를 반드시 정의해야 한다.
컴포넌트의 UI를 반환한다.

 

<div>...</div> : render 메서드 내에서 반환되는 JSX 코드다.

---

함수형 컴포넌트 >>

 

useState 훅을 사용하여 상태를 관리한다.
useState 는 상태 변수와 해당 변수를 업데이트하는 함수를 반환한다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

 

코드의 맨 처음에서는 REact 라이브러리에서 useState 함수를 가져온다.
useState 함수는 React 상태를 관리하는 데 사용된다.

 

const [count, setCount] = useState(0);: useState 함수를 호출하여 count 라는 상태 변수와 setCount 라는 상태를 업데이트하는 함수를 생성한다.
초기값으로 0을 전달하였으므로 count의 초기값은 0이다.

 

const increment = () => { setCount(count + 1); };: increment 함수는 버튼이 클릭되면 호출되며, 현재 count 상태 값을 1 증가시켜주는 역할을 한다.

 

---

24년 1월 7일에 작성된 글입니다