props 실습 흐름도

props는 내려받아 읽고, 변경은 부모에게 요청한다

부모는 값과 UI 조각, 변경 함수를 함께 전달할 수 있다. 자식은 비구조화로 필요한 값을 꺼내 읽고, 직접 수정 대신 콜백을 호출한다.

Parent

값과 children을 넘김

<ProfileCard
  name="김리액트"
  onLike={handleLike}
>
  <p>React 학습 중</p>
</ProfileCard>

태그 속성은 일반 props, 태그 사이 JSX는 children으로 전달된다.

props object

하나의 입력 객체가 됨

name "김리액트"
children <p>React 학습 중</p>
onLike handleLike 함수

자식이 받는 props는 읽기 전용 입력값처럼 다룬다.

Child

비구조화로 읽고 렌더링

function ProfileCard({
  name,
  children,
  onLike
}) {
  return <button onClick={onLike}>
    {name} 좋아요
  </button>;
}

필요한 이름을 바로 꺼내 쓰면 컴포넌트의 입력이 선명해진다.

Read-only

직접 수정하지 않기

`props.name = "새 이름"`처럼 바꾸면 단방향 흐름이 깨진다.

children

내용을 끼워 넣기

카드, 레이아웃, 버튼처럼 내부 콘텐츠가 바뀌는 컴포넌트에 유용하다.

Request

부모 state 변경 요청

자식은 `onLike()`를 호출하고, 부모가 state를 바꾼 뒤 새 props를 내려준다.