React

React State 와 Props

React State 와 Props
React에서 데이터의 변화를 화면에 반영하기 위해서는 상태 관리가 필수적이다. 이를 위해 React는 State와 Props라는 두 가지 핵심 개념을 제공한다. 이 둘을 이해하고 올바르게 사용하는 것은 React 애플리케이션을 효율적으로 개발하는 데 있어 매우 중요하다.

State

State는 컴포넌트의 상태를 나타내는 데이터를 저장하는 객체이다. 이는 컴포넌트의 동작과 렌더링 결과물에 직접적인 영향을 주며, State가 변경될 때마다 해당 컴포넌트는 자동으로 리렌더링된다.
  • 사용법: State는 주로 컴포넌트 내부에서 사용자의 인터랙션 또는 시간의 흐름에 따라 변경되어야 하는 데이터를 관리하는 데 사용된다.
  • 변경 가능성: State는 변경 가능(mutable)하며, 이 변경을 통해 리액트는 UI를 최신 상태로 유지한다.
  • State 변경: State를 변경하기 위해서는 setState() 메서드를 사용해야 한다. 이 메서드를 호출하면 리액트는 컴포넌트의 상태를 업데이트하고 컴포넌트를 리렌더링한다.

Props

Props는 Properties의 약어로, 컴포넌트에 전달되는 데이터이다. 주로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.
  • 변경 불가: Props는 해당 컴포넌트에서는 읽기 전용(immutable)이며, 자식 컴포넌트에서는 변경할 수 없다.
  • 데이터 전달: Props를 사용하여 컴포넌트 간에 데이터를 효율적으로 전달하고, 재사용 가능한 컴포넌트를 만들 수 있다.
function ComponentB(props) {
  return <div>Hello, {props.name}</div>;
}

function ParentComponent() {
  return <ComponentB name="React" />;
}
또는 구조 분해 할당을 사용하여 Props를 더 깔끔하게 받을 수 있다.
function ComponentB({ name }) {
  return <div>Hello, {name}</div>;
}
React에서 State와 Props의 올바른 사용은 컴포넌트의 상태 관리와 데이터 흐름을 제어하는 데 중요한 역할을 한다. State는 컴포넌트 내부에서 관리되는 동적인 데이터를 다루는 반면, Props는 컴포넌트 간에 데이터를 전달하는 데 사용되어 애플리케이션의 구조를 구성한다. 이러한 두 가지 개념을 이해하고 활용함으로써 효과적인 React 애플리케이션을 개발할 수 있다.