[React] 초급 개념3 - props와 state의 차이

리액트에서 데이터를 다루는 핵심 개념은 props와 state입니다. 이 두 개념은 컴포넌트 간 데이터 흐름을 관리하는 중요한 역할을 합니다.

---

 

 

🔸 1. props란?

props(properties)는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.

 

✅ props의 특징

• 읽기 전용(immutable) → 자식 컴포넌트에서 변경할 수 없음
• 부모 → 자식 방향으로만 데이터 전달 가능
• 컴포넌트의 재사용성을 높여줌

 

 

✅ 예제: props 사용하기

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="React" />;
}

 

📌 설명:

• App 컴포넌트에서 Greeting 컴포넌트에 name="React" 값을 전달
• Greeting 컴포넌트에서 props.name을 사용하여 화면에 출력

 

 

✅ 예제: 여러 개의 props 전달하기

function UserProfile(props) {
  return (
    <div>
      <h2>{props.username}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}

function App() {
  return <UserProfile username="Alice" age={25} />;
}

 

📌 설명:

• UserProfile 컴포넌트에서 username과 age를 props로 받아 표시

---

 

 

🔸 2. state란?

state는 컴포넌트 내부에서 관리되는 동적인 데이터입니다.

 

✅ state의 특징

• 컴포넌트 내부에서 변경 가능 → setState(클래스형) 또는 useState(함수형) 사용
• UI와 동기화됨 → state가 변경되면 컴포넌트가 자동으로 리렌더링됨
• 컴포넌트 내부에서 선언되고, 직접 관리됨

 

 

✅ 예제: state 사용하기

import { useState } from "react";

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

📌 설명:

• useState(0)을 사용하여 count라는 상태 변수 생성
• 증가/감소 버튼을 클릭하면 setCount를 통해 count 값 변경

---

 

 

🔸 3. props vs state 비교

구분 props state

변경 가능 여부	변경 불가 (읽기 전용)	변경 가능 (setState 또는 useState 사용)
데이터 흐름	부모 → 자식	컴포넌트 내부에서 관리
사용 목적	부모에서 자식에게 데이터 전달	컴포넌트의 동적인 데이터 관리

✅ props는 외부에서 주어진 데이터, state는 컴포넌트 내부에서 관리되는 데이터

---

 

 

🔸 4. props와 state 함께 사용하기

props와 state를 함께 활용하면 더 유연한 컴포넌트를 만들 수 있습니다.

 

 

✅ 예제: props와 state 함께 사용

function CounterDisplay(props) {
  return <h1>현재 카운트: {props.count}</h1>;
}

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

  return (
    <div>
      <CounterDisplay count={count} />
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

 

📌 설명:

• Counter 컴포넌트에서 count를 state로 관리
• CounterDisplay 컴포넌트에 props로 count 값을 전달하여 표시
• 증가/감소 버튼을 클릭하면 setCount가 호출되어 상태가 변경됨

---

 

 

🔸 5. 언제 props와 state를 사용해야 할까?

 

✅ props를 사용해야 할 때

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때
• 컴포넌트가 변경할 필요가 없는 데이터를 표시할 때

 

✅ state를 사용해야 할 때

• 컴포넌트 내부에서 변화하는 데이터를 관리할 때
• 사용자의 입력이나 이벤트에 따라 UI를 업데이트해야 할 때

---