프롭(Prop)

쉬운 설명

같은 모임 카드에 서로 다른 제목을 보여 주려면 카드가 사용할 값을 전달해야 해요. React에서는 이런 입력을 prop이라고 부르고 properties에서 온 이름이에요. 제목뿐 아니라 숫자, 객체, 클릭했을 때 실행할 함수도 전달할 수 있어요. 값을 보내는 쪽과 받는 쪽의 이름이 맞아야 의도한 대로 표시돼요.

이런 상황에서 만나요

AI가 만든 카드에서 제목만 비어 있어요. 사용하는 쪽에서는 name을 넘기는데 카드 안에서는 title을 읽고 있는지 확인해 볼 수 있는 상황이에요.

<StudyCard title="AI 입문" />

function StudyCard({ title }) {
  return <h2>{title}</h2>;
}

AI에게 “StudyCard에 전달하는 값과 컴포넌트가 읽는 prop 이름을 비교해 줘”라고 요청해 보세요. 이름뿐 아니라 값이 실제로 있는지, 문자열과 숫자 같은 형식이 맞는지도 확인해요.

헷갈리기 쉬운 점

Props와 state는 같은 건가요?

Props는 컴포넌트가 외부에서 받은 입력이고, state는 화면이 기억하며 갱신하는 상태예요. 부모의 state를 자식에게 prop으로 전달할 수도 있어요. 자식은 받은 props를 직접 고치지 않고, 필요하면 전달받은 함수를 호출해 변경을 요청하는 방식으로 구성해요.

값이 안 보인다고 받는 컴포넌트 안에 임시 문구만 넣으면 입력이 잘못 전달된 원인이 가려질 수 있어요. 보내는 위치부터 값의 이름과 내용을 따라 확인하세요.

왜 알아야 할까요?

같은 모양의 카드나 버튼을 다른 내용으로 재사용할 수 있어요. 일부 항목만 비어 있거나 잘못 표시되는 문제도 데이터 전달 과정으로 나눠 찾을 수 있어요.

참고 자료

• React · Props 전달과 읽기
• React · 상태의 역할