[React] Props와 State란?

 

들어가기 앞서, React는 컴포넌트 기반의 UI 라이브러리이다.

컴포넌트란, 마치 레고 블록처럼 조립이 가능한 작은 UI 조각들이며,

이 컴포넌트끼리 정보를 주고받고 화면이 바뀌기도 하는데, 그때 props와 state라는 개념이 사용되는 것이다.

---

Props에 대해 알아보자!

---

Props란?

     props는 컴포넌트가 부모 컴포넌트로부터 받는 데이터 또는 설정 값을 말한다.

function Welcome(props) {
  return <h1>안녕, {props.name}!</h1>; // 화면에 "안녕, 길동!" 출력
}

<Welcome name="길동" />

 

---

Props의 특징

• 읽기 전용(Read-Only): 컴포넌트는 받은 props를 변경할 수 없음.
• 부모 → 자식 방향으로만 전달 가능
• 컴포넌트 간의 통신 수단이 될 수 있음.

[Props는 어떤 상황에서 쓰는게 좋을까?]
1) 화면에 어떤 내용을 보여줄지 부모 컴포넌트가 결정하게 하고 싶을 때
2) 재사용 가능한 컴포넌트를 만들고 싶을 때

---

State에 대해 알아보자!

---

State란?

     state는 컴포넌트 자체가 저장하고 관리하는 값이다.

     사용자의 입력, 버튼 클릭, API 호출 결과 등 변화하는 값을 저장하는데 쓰인다.

import { useState } from 'react';

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

---

State의 특징

• 컴포넌트 내부에서만 관리
• 값이 바뀌면 자동으로 리렌더링
• 함수형 컴포넌트에서는 useState 훅을 사용해서 만듦.

[state는 어떤 상황에서 쓰는게 좋을까?]
1) 사용자 입력을 저장하고 싶을 때 (예: 입력 폼)
2) 버튼 클릭 횟수를 세고 싶을 때
3) 특정 UI의 표시 여부를 토글할 때
=> 한마디로 변화하는 값을 사용하고 싶을 때!

---

Props와 State 한눈에 비교하기 🔍

항목	Props	State
데이터 소유자	부모 컴포넌트	현재 컴포넌트
수정 가능 여부	❌ 수정 불가 (읽기 전용)	⭕️ 가능 (setState 사용)
사용 목적	외부에서 받은 데이터로 렌더링	컴포넌트 내부 동적 상태 표현
주 사용처	재사용 가능한 컴포넌트 만들기	사용자 상호작용 반영
전달 방향	부모 → 자식 (단방향)	컴포넌트 내부 전용