쇼핑몰에서 옷을 주문하는 상상을 해보자.
원하는 옷을 장바구니에 담고 결제를 하려고 보니 다른 옷이 더 마음에 든다. 장바구니에 담은 옷을 빼고, 새로운 옷을 담아 결제를 한다.
이 상황에서 장바구니에 담기는 옷은 바뀌고 내가 결제 해야 할 금액도 즉각적으로 변경된다.
이를 우리는 장바구니의 상태가 변한다고 말할 수 있으며, 결제 페이지에 변경된 장바구니의 상태를 전달해야 한다.
Props의 특징
- 컴포턴트의 속성
property을 의미한다.
이전 state & props Intro 에서 잘 설명 되었듯, props는 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 웹 애프리케이션에서 해당 컴포넌트가 가진 속성에 해당한다. - 부모 컴포넌트로부터 전달받은 값
React 컴포넌트는 JS 함수와 클래스로, props를 함수의 전달인자arguments처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React ele를 반환합니다. 따라서, 컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용할 수 있다. - 객체 형태이다.
props는 읽기 전용이다.
props는 성별이나 이름처럼 외부로부터 전달받아 변하지 않는 값이다. 그래서 props는 함부로 변경될 수 없는 읽기 전용read-only객체이다. 함부로 변경되지 않아야 하기 때문이다.
읽기 전용 객체가 아니라면 props 를 전달받은 하위 컴포넌트 내에서 props를 직접 수정 시 props를 전달한 상위 컴포넌트의 값에 영향을 미칠 수 있게 된다. 즉, 개발자가 의도하지 않은 side effect가 생기게 되고, 이는 React의 단방향, 하향식 데이터 흐름 원칙(reat is all about one-way data flow down the component hierachy)에 위배된다.
How to use props
props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있다.
- 하위 컴포넌트에 전달하고자 하는 값
data과 속성을 정의한다. - props를 이용하여 정의된 값과 속성을 전달한다.
- 전달받은 props를 렌더링한다.
위 단계에 맞춰 props를 사용하기 위해 우선 <Parent>와 <child>라는 컴포넌트를 선언하고, <parent> 컴포넌트 안에 <child>컴포넌트를 작성한다.
function Parent(){
return (
<div className="parent">
<h1> I'm the parent </h1>
<Child />
</div>
);
};
function Child() {
return (
<div className="child"></div>
);
}컴포넌트를 만들었으니 이제 전달하고자 하는 속성을 정의해보자. HTML에서 속성과 값을 할당하는 방법과 같다. 아래의 코드에서는 <a>요소의 href속성에 "www.codestates.com"라는 값을 주었다.
<a href="www.codestates.com">Click me to visit Code States</a>React에서 속성 및 값을 할당하는 방법도 이와 유사하다. 다만, 전달하고자 하는 값을 중괄호{}를 이용하여 감싸주면 된다.
<Child attribute = {value} />위 방법을 이용하여 text라는 속성을 선언하고, 이 속성에 "I'm the eldest child"라는 문자열 값을 할당하여 <child>컴포넌트에 전달해 보자.
<Child text = {"I'm the eldest child"}/>자, 이제 <parent> 컴포넌트에서 전달한 "I'm the eldest child"라는 문자열을 <Child>컴포넌트에서 받아보자. 방법은 간단하다. 함수에 인자를 전달하듯이 React 컴포넌트에 props를 전달하면 되고, 이 props가 불필요한 모든 데이터를 가지고 오게 된다.
function Child(props){
return (
<div className="child"></div>
);
};props를 전달받았으니, 마지막으로 이 props를 렌터링해보자. props를 렌더링 하려면 JSX안에 직접 불러서 사용하면 된다. 다만, props는 객체라고 하였고, 이 객체의 {key: value}는 <Parent>컴포넌트에서 정의한 {attribute : value}의 형태를 띠게 된다. 따라서 JS에서 객체의 value에 접근할 때 dot notation을 사용하는 것과 동일하게 props의 value 또한 dot notation으로 접근할 수 있다. 아래와 같이 props.text를 JSX에 중괄호와 함께 작성하면 잘 작동한다.
function Child(props){
return(
<div className = "child">
<p>{props.text}</p>
</div>
);
};Action item
여기까지가 props를 사용하는 방법의 전부이고, 위 코드를 실행해보면 다음과 같다. 아래 snippet에 있는 주석에 따라 props의 형태를 console.log(props)을 통해 직접 확인해 보고,<Child> 컴포넌트에 "I'm the second child"라는 문자열을 추가로 전달해보자.
import "./styles.css";
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child text={"I'm the eldest child"} />
{/* Child 컴포넌트에 또 다른 문자열을 props 로 전달해 보세요 */}
<h2>I'm the second child</h2>
<Child text={"I'm the second child"} />
</div>
);
}
function Child(props) {
// console 을 열어 props 의 형태를 직접 확인하세요.
console.log("props : ", props);
return (
<div className="child">
<p>{Child.text}</p>
</div>
);
}
export default Parent;
props.children
props를 전달하는 또 다른 방법으로 여는 태극와 닫는 태그의 사이에 value를 넣어 전달하는 방법이 있다. 이 경우 props.children을 이용하면 해당 value에 접근하여 사용할 수 있다. 위의 스니펫을 아래 코드로 변경 후 props.children의 실행 결과를 확인해보자
(이미 변경 된 걸 올림)
Action item
app컴포넌트에 있는 temOne과 itemTwo를 Learn 컴포넌트에 props로 전달하여, "React를 배우고 있습니다"라는 문자열이 rendering 되도록 코드를 완성하자
import "./styles.css";
const App = () => {
const itemOne = "React를";
const itemTwo = "배우고 있습니다.";
return (
<div className="App">
{/* Learn 컴포넌트에 itemOne 과 itemTwo 를
props 로 전달하세요 */}
<Learn text = {itemOne + itemTwo}/>
</div>
);
};
const Learn = (props) => {
// 전달받은 props 를 아래 <div> tag 사이에 사용하여
// "React를 배우고 있습니다" 라는 문장이 렌더링되도록 컴포넌트를 완성하세요
return <div className="Learn"><p>{props.text}</p></div>;
};
export default App;