읽기 전용 객체가 아니라면 props를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 됩니다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고 이는 React의 단방향, 하향식 데이터 흐름 원칙(React is all about one-way data flow down the component hierarchy)에 위배됩니다.
props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.
1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.
전달하고자 하는 값을 중괄호{}를 이용해서 감싸준다.
<Child attribute={value} />
React에서 JSX 속성 및 값을 할당하는 방법 1
위 방법을 이용하여 text라는 속성을 선언하고 문자열 값을 할당
<Child text={"I'm the eldest child"} />
React에서 JSX 속성 및 값을 할당하는 방법 2
문자열을 <Child> 컴포넌트에서 받기
function Child(props) {
return (
<div className="child"></div>
);
};
<Child>
컴포넌트에서 props 매개변수 사용 예시
JSX 안에 직접 불러서 props를 렌더링
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
};
<Child>
컴포넌트에서 props.text렌더링 예시
props를 전달하는 또 다른 방법으로 여는 태그와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있습니다.
이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있습니다.
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child>I'm the eldest child</Child>
</div>
);
};
function Child(props) {
return (
<div className="child">
<p>{props.children}</p>
</div>
);
};