017. props 사용하기, Props vs State

 

PART 2(초급) React.js 기초 다지기

017. props 사용하기

• props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용
• props를 전달 받은 자식 컴포넌트에서는 데이터를 수정할 수 없음
• 데이터 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야함

---

Props vs State

Props (Properties)

외부에서 컴포넌트로 주입되는 데이터. 부모가 자식에게 내려주는 것.

• 컴포넌트 입장에서 읽기 전용 (못 바꿈)
• 부모가 바꾸면 자식은 그냥 받아서 씀
• 함수의 매개변수랑 개념적으로 같음

 

function Button({ label }) {  // label은 props
  return <button>{label}</button>;
}

State

컴포넌트가 스스로 관리하는 데이터. 내부 상태.

• 컴포넌트가 직접 읽고 쓸 수 있음
• 바뀌면 컴포넌트가 리렌더링 됨
• 컴포넌트 내부에서만 존재

 

function Counter() {
  const [count, setCount] = useState(0);  // count는 state
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

핵심 차이 한 줄 요약

	Props	State
출처	부모에서 옴	본인이 만듦
변경 주체	부모만 가능	본인만 가능
목적	데이터 전달	내부 변화 추적

근본적으로 보면 Props는 "외부 세계와의 인터페이스", State는 "컴포넌트의 기억"이라고 볼 수 있음. Props는 컴포넌트를 어떻게 쓸지 결정하고, State는 컴포넌트가 지금 어떤 상황인지를 나타냄.