React props 데이터 전달

Props 데이터 흐름

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

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

방향

부모에서 자식으로 전달

형태

객체처럼 묶여 들어옴

규칙

자식 안에서는 읽기 전용

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

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

Parent

App이 UserProfile을 호출

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

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

props 객체

값이 이름표와 함께 묶인다

name

"김리액트"

age

location

"서울"

라벨과 값은 위아래로 읽히게 두어 좁은 폭에서도 찢기지 않는다.

Child

UserProfile이 props를 받음

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

자식은 값을 재료로 화면을 만들고, 값 변경은 부모에게 맡긴다.

같은 컴포넌트, 다른 결과

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

props A

김리액트

28세 · 서울

구조는 같고 데이터만 다르다.

props B

박컴포넌트

32세 · 부산

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

children

최프로퍼티

추가 JSX 포함

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

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

자식이 props를 직접 고치면 단방향 데이터 흐름이 깨진다.

금지

props 직접 수정

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

React가 예측하는 데이터 흐름을 깨뜨린다.

권장

비구조화로 읽기

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

필요한 값만 꺼내 읽으면 컴포넌트 의도가 선명해진다.

변경 요청

함수를 props로 전달

<Child onRename={setName} />

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