props 전달 경로

props: 부모가 자식에게 전달하는 읽기 전용 입력값

props를 이해하면 같은 컴포넌트를 다른 데이터로 재사용하고, children으로 감싼 내용을 컴포넌트 안에 배치할 수 있습니다.

부모에서 자식

컴포넌트를 사용할 때 속성처럼 값을 넘기면 자식 컴포넌트의 props로 들어옵니다.

분해해서 사용

비구조화 할당으로 필요한 props 이름을 바로 꺼내면 JSX가 읽기 쉬워집니다.

children

children은 카드, 모달, 레이아웃처럼 감싸는 UI가 내부 내용을 직접 알 필요 없을 때 결합도를 낮춥니다.

input

컴포넌트가 외부에서 받아야 할 값을 props로 선언한다.

readonly

자식 컴포넌트 안에서 props를 직접 바꾸지 않는다.

default

값이 없을 때 보여줄 문구나 기본값을 고려한다.

child

children이 필요한 래퍼 컴포넌트인지 구분한다.