[React] 상태(State)와 속성(Props)

목차

React에서의 상태(State)와 속성(Props): 차이점과 사용 방법 🔄🔍

안녕하세요, 웹 개발에 관심 있는 모든 분들! React를 사용하면서 가장 중요한 개념 중 두 가지는 바로 상태(State)와 속성(Props)입니다. 이 두 개념을 이해하고 올바르게 사용하는 것은 효율적이고 유지 보수가 용이한 React 애플리케이션을 구축하는 데 필수적입니다. 이 글에서는 State와 Props의 차이점과 각각의 사용 방법에 대해 자세히 알아보겠습니다.

---

상태(State)란?

• 정의: 상태는 컴포넌트의 뷰 상태를 추적하고 사용자와의 상호작용에 응답하기 위해 사용되는 데이터입니다.
• 특징: 상태는 변경 가능하며, 상태가 변경될 때마다 컴포넌트가 리렌더링됩니다.
• 사용 방법: 클래스 컴포넌트에서는 this.state로, 함수 컴포넌트에서는 Hook인 useState를 사용하여 상태를 관리합니다.

// 함수 컴포넌트에서의 상태 사용 예
import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

속성(Props)이란?

• 정의: 속성(Props)은 부모 컴포넌트로부터 자식 컴포넌트에게 전달되는 데이터입니다.
• 특징: Props는 읽기 전용으로, 컴포넌트 내부에서는 수정할 수 없습니다.
• 사용 목적: 컴포넌트를 재사용하고, 다른 컴포넌트와 상호작용하는 데 사용됩니다.

// 부모 컴포넌트에서 자식 컴포넌트로 props 전달 예
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="Sara" />;
}

 

상태와 속성의 주요 차이점

1. 소유권: State는 컴포넌트 자체가 소유하고 관리합니다. 반면, Props는 부모 컴포넌트로부터 받아온 데이터입니다.
2. 변경 가능성: State는 컴포넌트 내에서 변경할 수 있습니다. Props는 읽기 전용이며, 컴포넌트 내에서는 변경할 수 없습니다.
3. 용도: State는 동적인 데이터를 다루고, 사용자 인터페이스의 상태를 관리하는 데 사용됩니다. Props는 컴포넌트 간에 데이터를 전달하고, 재사용 가능한 컴포넌트를 만드는 데 주로 사용됩니다.

 

마무리하며...

상태와 속성은 React에서 데이터를 관리하고 컴포넌트 간에 상호작용하는 데 필수적인 개념입니다. 이 두 개념의 차이를 이해하고 올바르게 사용함으로써, 보다 유연하고 효율적인 React 애플리케이션을 구축할 수 있습니다. React 개발의 여정에서 이 가이드가 여러분의 좋은 출발점이 되기를 바랍니다.

---

Reference:

Getting Started – React

State and Lifecycle – React

Components and Props – React