🌱 기초 프론트엔드
Props가 뭔가요?
쉽게 이해하기
레스토랑에서 주문을 생각해보세요. 손님이 "햄버거 세트, 콜라 빼고요"라고 주문하면, 주방에서는 그 정보를 받아서 햄버거를 만들죠. Props는 이렇게 컴포넌트에게 "이렇게 만들어줘"라고 주문서를 전달하는 거예요.
핵심 정리
Props는 컴포넌트에 정보를 전달하는 통로예요.
자세히 알아보기
Props는 Properties의 줄임말로, 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 쓰는 방법이에요. 컴포넌트를 재사용할 수 있게 만드는 핵심 개념이죠.
예를 들어 버튼 컴포넌트를 만들었다고 해볼게요. 어떤 버튼은 "저장"이라고 쓰고 싶고, 어떤 건 "취소"라고 쓰고 싶어요. 이때 Props로 텍스트를 전달하면 같은 버튼 컴포넌트를 다양하게 사용할 수 있어요. 색깔, 크기, 동작 등도 Props로 조절할 수 있죠.
Props의 중요한 특징은 '읽기 전용'이라는 점이에요. 자식 컴포넌트는 받은 Props를 직접 수정할 수 없고, 오직 읽어서 사용만 할 수 있어요. 데이터를 바꾸고 싶다면 부모 컴포넌트에서 바꿔서 다시 전달해야 해요.
실무에서는 Props를 통해 컴포넌트 간의 관계를 명확하게 만들어요. 어떤 데이터가 어디서 오는지 추적하기 쉽고, 컴포넌트를 다른 프로젝트에서도 재사용하기 편해져요. React, Vue, Svelte 등 대부분의 프레임워크가 Props 개념을 사용해요.