PROPS DATA FLOW

props는 부모가 자식에게 넘기는 읽기 전용 입력값이다

컴포넌트는 같은 설계도라도 전달받은 props에 따라 다른 UI가 된다. 데이터는 부모에서 자식으로 흐르고, 자식은 받은 값을 직접 바꾸지 않는다.

부모가 값을 정하고 자식은 그려낸다

HTML 속성처럼 보이지만, React 컴포넌트에는 props 객체로 전달된다.

Parent

App이 UserProfile을 호출

<UserProfile
  name="김리액트"
  age={28}
  location="서울"
/>

문자열은 따옴표, JS 값은 중괄호로 넘긴다.

Child

UserProfile이 props를 받음

name "김리액트"
age 28
location "서울"

자식은 이 값을 재료로 화면을 만든다.

같은 컴포넌트, 다른 결과

props는 컴포넌트를 재사용 가능한 틀로 만들고, 값만 바꿔 여러 화면을 만든다.

props A
김리액트 28세 · 서울

컴포넌트 구조는 같고 데이터만 다르다.

props B
박컴포넌트 32세 · 부산

부모가 다른 값을 넘기면 다른 카드가 된다.

children
최프로퍼티 추가 JSX 포함

태그 사이 내용은 특별한 props인 children으로 들어온다.

props를 바꾸고 싶다면 부모에게 요청한다

자식이 props를 직접 고치면 데이터 흐름이 깨진다. 변경은 state를 가진 쪽에서 일어난다.

금지

props 직접 수정

function Child(props) {
  props.name = "새 이름";
}

React가 예측하는 단방향 흐름을 깨뜨린다.

권장

비구조화로 읽기

function UserProfile({
  name, age, children
}) { ... }

props 객체에서 필요한 값만 꺼내 읽으면 코드가 짧아진다.

변경 요청

함수를 props로 전달

<Child onRename={setName} />

자식은 콜백을 호출하고, 부모 state가 바뀌면 새 props가 내려온다.