React의 props 와 state 정리

React 컴포넌트를 다룰 때 가장 기본이자 중요한 개념인 props와 state에 대해 정리해보자.
둘은 비슷해 보이지만, 역할과 사용하는 목적이 완전히 다르다.

---

1. props란?

부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터
읽기 전용이며, 자식 컴포넌트는 이를 수정할 수 없다.

function ChildComponent(props) {
  // props.name = "New Name"; ❌ 오류 가능
  return <div>{props.name}</div>;
}

function ParentComponent() {
  return <ChildComponent name="Eunseop" />;
}

props는 외부에서 전달된 값으로, 컴포넌트 내부에서 변경 불가능한 값이다.
이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하고 안정적으로 유지할 수 있다.

---

2. state란?

컴포넌트 내부에서 관리되는 동적인 데이터
컴포넌트가 리렌더링되는 원인이 된다.

import { useState } from 'react'

function Counter() {
	const [count, setCount] = useState();
  
  	const handleClick = () => setCount(prev => prev + 1);
  
  	return (
    	<div>
        	<p>현재 카운트: {count}</p>
        	<button onClick={handleClick}>+1</button>
        </div>
    )
  
}

state는 사용자 입력, 네트워크 응답 등 변화하는 데이터를 처리할 때 사용된다.

---

왜 props는 자식 컴포넌트에서 변하지 않을까?

React 의 단뱡향 데이터 흐름(One-way data flow) 원칙 때문!

• props는 읽기 전용
• 자식 컴포넌트는 props를 직접 변경할 수 없음
• 데이터 흐름이 예측 가능하고, 상태 관리가 쉬워짐
• 컴포넌트 재사용성과 독립성이 높아짐

---

props를 변경하고 싶다면?

자식 컴포넌트가 props를 변경할 수는 없지만,
부모 컴포넌트로부터 전달받은 함수를 호출해 상태를 변경할 수는 있다.

이런 방식은 상태 끌어올리기(Lifiting State Up)라고 한다.

예제

-> 부모 컴포넌트

import { useState } from "react"
import ChildComponent from "./ChildComponent"


function ParentComponent() {
	const [name, setName] = useState("Hong");
  
  	const changeName = () => setName("Kim");
	
  
  	return (
      <div>
        <h2>Parent: {name}</h2>
        <ChildComponent name={name} onChangeName={changeName} />
      </div>
    )
}

-> 자식 컴포넌트

function ChildComponent({name, onChangeName}) {
	return (
    	<div>
        	<p>Child: {name}</p>
        	<button onClick={onChangeName}>이름 변경</button>
        </div>
    )
}

결과적으로

• 상태는 부모가 소유
• 자식은 상태를 변경할 수 있는 함수만 전달받음
• 데이터 흐름은 여전히 단방향 유지
• 코드의 예측 가능성, 유지보수성, 재사용성이 높아짐

---

마무리

• props: 외부(부모)에서 전달받는 읽기 전용 데이터
• state: 컴포넌트 내부에서 정의하고 관리하는 변경 가능한 데이터
• props를 바꾸고 싶을 땐 -> 부모 상태 변경 함수 전달 (상태 끌어올리기)

이 둘의 역할을 제대로 , 이해하면, 컴포넌트 구조 설계와 상태 관리가 훨씬 쉬워진다!
다음에는 Context API, useReducer 등 상태 관리 확장 도구도 정리해보도록 하자!