Props

부모가 정한 값은 자식에서 읽기만 합니다

데이터는 JSX 속성으로 내려가고, 자식 컴포넌트는 받은 값을 화면에 반영하거나 부모가 준 함수로 변경을 요청합니다.

1. 부모 데이터

값을 고르는 곳

사용자 이름, 나이, 지역처럼 바깥에서 달라지는 정보를 부모가 준비합니다.

2. JSX 속성

이름 붙여 전달

문자열은 따옴표로, 변수와 숫자는 중괄호로 컴포넌트에 넘깁니다.

3. 자식 인자

객체에서 꺼내기

{ name, age, children }처럼 비구조화하면 JSX가 짧아집니다.

4. 화면 반영

읽고 조합하기

자식은 값을 직접 고치지 않고 표시하거나 children 영역에 함께 배치합니다.

읽기 전용 규칙

자식 내부에서 props 값을 대입해 바꾸면 단방향 흐름이 깨지므로, 변경이 필요할 때는 부모가 내려준 함수를 호출합니다.

계약을 남기는 습관

PropTypesname 같은 필수 값과 타입을 코드 가까이에 적어 두어 잘못된 사용을 개발 중에 드러냅니다.