Props는 파라미터
리액트에서 props는 아래 한줄로 요약이 가능한 것 같다.
컴포넌트를 함수라 했을 때, props는 함수에서 필요로 하는 파라미터 목록이다.
아래 예제를 통해 props를 확인해 보자.
// 자식 컴포넌트
// 본 컴포넌트를 사용하기 위해 외부로부터 입력이 필요하기 때문에 props를 사용함
const Child = (props) {
return (
<div>
<span>{props.userName}님 안녕하세요.</span> {/* props에서 userName이라는 값을 꺼내 사용함 */}
<span>{props.userAge}살이 되신 걸 축하합니다!</span> {/* props에서 userAge라는 값을 꺼내 사용함 */}
</div>
);
};
export default Child;// 부모 컴포넌트
// 자식 컴포넌트를 이용하는 주체이며, JSX에서 자식 컴포넌트를 호출함
// 본 컴포넌트를 사용하기 위해 외부로부터 별도의 입력이 필요없기 때문에 props가 존재하지 않아도 됨
const Parent = () => {
const name = '남슈크림빵'; // 자식 컴포넌트에 넘기기 위해 정의
const age = 29; // 자식 컴포넌트에 넘기기 위해 정의
return (
<div>
<Child userName={name} userAge={age} /> {/* JSX를 이용히여 자식 컴포넌트를 호출하였으며, 자식 컴포넌트에서 필요로 하는 userName과 userAge를 전달하였음 */}
</div>
);
};위 예제는 자식 컴포넌트에서 userName, age라는 props를 받고 있다. 따라서 부모 컴포넌트는 자식 컴포넌트를 사용할 때 자식 컴포넌트가 필요롤 하는 props를 넘겨줄 필요가 있다.
컴포넌트에서 props를 잘 쓰기
위 예제를 보면 부모 컴포넌트가 자식 컴포넌트를 호출할 때, 자식 컴포넌트에 어떤 props가 존재하는지 확인하기가 어렵다. 이를 해결하기 위해 destructing을 사용할 수 있다.
1. props에서 필요한 부분만 빼서 사용하기
사실 이 방법은 부모 입장에서는 똑같이 알기 어렵지만, props를 받는 컴포넌트에서 필요한 부분만 destructing할 수 있다는 것을 보여주기 위함이다.
// 자식 컴포넌트
const Child = (props) {
const { userName } = props; // props에서 userName만 따로 빼서 관리할 수 있음
return (
<div>
<span>{userName}님 안녕하세요.</span> {/* userName은 destructing됐기 때문에 props없이 사용 가능함 */}
<span>{props.userAge}살이 되신 걸 축하합니다!</span>
</div>
);
};
export default Child;2. 좀 더 우아하게 모든 props 명시하기
위 방식을 통해 모든 파라미터에 쉽게 접근할 수 있다. 하지만 부모 컴포넌트 입장에서는 여전히 자식 컴포넌트가 어떤 props가 필요한지 알기 어렵다. 따라서 함수의 파라미터를 받는 props 부분에서 바로 destructing을 사용하면 외부에서 명확하게 알 수 있다.
// 자식 컴포넌트
// 부모 컴포넌트에서 JSX로 선언된 자식 컴포넌트로 넘어오는 props는 객체로 오기 때문에
// destructing을 위해 반드시 {}가 있어야 함
// =를 이용하여 해당 props의 기본값을 지정할 수 있음
const Child = ({userName, userAge=1}) {
return (
<div>
<span>{userName}님 안녕하세요.</span> {/* userName은 destructing됐기 때문에 props없이 사용 가능함 */}
<span>{userAge}살이 되신 걸 축하합니다!</span> {/* userAge는 destructing됐기 때문에 props없이 사용 가능함 */}
</div>
);
};
export default Child;3. Spread 구문을 사용하여 props 전달하기
만약 부모 컴포넌트가 자식 컴포넌트로 다수의 props를 한번에 전달하고싶을 수도 있을 것이다. 이럴때 spread연산자를 이용하면 쉽게 자식 컴포넌트에 props를 넘길 수 있다.
const Parent = (props) {
return (
<Child {...props}> {/* 각 props을 전개하여 전달 */}
);
};숨겨놓은 자식 Children
지금까지 살펴본 props는 JSX 태그 내부에 프로퍼티처럼 접근하여 사용했다. 그렇다면 JSX 태그 사이에 존재하는 컨텐츠는 어떻게 접근할 수 있을까? 이를 위해children이라는 것을 제공한다. children은 props.children으로 접근이 가능하다.
// 자식 컴포넌트
const Child = (props) {
return (
<div>
<span>{props.userName}님 안녕하세요.</span>
<span>{props.children}</span> {/* props.children으로 JSX 태그 사이 컨텐츠에 접근할 수 있음 */}
<span>{props.userAge}살이 되신 걸 축하합니다!</span>
</div>
);
};
export default Child;// 부모 컴포넌트
const Parent = () => {
const name = '남슈크림빵'; // 자식 컴포넌트에 넘기기 위해 정의
const age = 29; // 자식 컴포넌트에 넘기기 위해 정의
return (
<div>
<Child userName={name} userAge={age}>
이것은 부모 컴포넌트로 부터 전달받은 내용입니다.
</Child>
</div>
);
};Reference
