React 컴포넌트 -> props를 이용해 서로 통신한다.
모든 부모 컴포넌트는 props를 줌으로써 정보를 자식 컴포넌트에게 전달할 수 있다.
props는 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다.
props - JSX 태그에 전달하는 정보
ex) className, src, alt, width, height
컴포넌트에 props 전달하기
자식 컴포넌트에 어떠한 props도 전달하고 있지 않은 상태
export default function Profile(){
return (
<Avatar />
);
}자식 컴포넌트에 props 전달하기
Avatar에 person(객체)와 size 전달
export default function Profile(){
return (
<Avatar
person={{ name: 'Lin Lanying', imageId: '1bx5QH6' }}
size={100}
/>
);
}자식 컴포넌트 내부에서 props 읽기
function Avatar({person, size}){
// person과 size는 이곳에서 사용 가능
return (
<img
className="avatar"
src={getImageUrl(person)}
alt={person.name}
width={size}
height={size}
/>
);
}props를 사용하면 부모 컴포넌트와 자식 컴포넌트를 독립적으로 생각 가능하다.
함수의 인수와 동일한 역할을 한다.
React 컴포넌트 함수는 하나의 인자, props 객체를 받는다.
function Avatar(props){
let person = props.person;
let size = props.size;
}props를 선언할 때 () 안에 {}를 놓치지 말 것
function Avatar({ person, size }){
}
-> 구조 분해 할당
props의 기본값 지정하기
값이 지정되지 않았을 때, props에 기본값 지정하기
function Avatar({ person, size = 100 }){
}size prop 없이 렌더링 된다면 size는 100으로 설정된다.
기본값은 size prop이 없거나 size={undefined}로 전달될 때 사용된다.
size={null} / size={0} => 기본값 사용 안 된다.
JSX spread 문법으로 props 전달하기
때때로 전달되는 props는 반복적이다.
function Profile({ person, size, isSepia, thickBorder }){
return (
<div className="card">
<Avatar
person={person}
size={size}
isSepia={isSepia}
thickBorder={thickBorder}
/>
</div>
);
}일부 컴포넌트는 모든 props를 자식 컴포넌트에 전달한다.
props를 직접 사용하지 않기 때문에 spread 문법을 사용하는 것이 합리적이다.
function Profile(props){
return (
<Avatar {...props} />
);
}- Profile의 모든 props를 각각의 이름을 나열하지 않고 Avatar로 전달한다.
자식을 JSX로 전달하기
자체 컴포넌트를 중첩하고 싶을 때가 존재한다.
JSX 태그 내에 콘텐츠를 중첩하면, 부모 컴포넌트는 해당 콘텐츠를 children이라는 prop으로 받을 것이다. 예를 들어, 아래의 Card 컴포넌트는 로 설정된 children prop을 받아 이를 래퍼 div에 렌더링할 것이다.
import Avatar from './Avatar.js';
function Card({ children }){
return (
<div className="card">
{children}
</div>
);
}
export default function Profile(){
return (
<Card>
<Avatar
size={100}
person={{
name: "MEME",
imageId: "daiea"
}}
/>
</Card>
);
}이벤트 핸들러를 Prop으로 전달하기
부모 컴포넌트로 자식의 이벤트 핸들러를 지정하기
컴포넌트가 부모 컴포넌트로부터 받은 prop을 이벤트 핸들러로 다음과 같이 전달
function Button({ onClick, children }){
return (
<button onClick={onClick}>
{children}
</button>
);
}
function PlayButton({ movieName }){
function handlePlayClick() {
alert(`Playing ${movieName}!`);
}
return (
<Button onClick={handlePlayClick}>
play "{movieName}"
</Button>
);
}
function UploadButton() {
return (
<Button onClick={() => alert('Uploading!')}>
Upload Image
</Button>
);
}
export default function Toolbar() {
return (
<div>
<PlayButton movieName="Kiki's Delivery Service" />
<UploadButton />
</div>
);
}Toolbar 컴포넌트가 PlayButton과 UploadButton을 렌더링한다.
- PlayButton은 handlePlayClick을 Button 내 onClick prop으로 전달한다.
- UploadButton은 () => alert('Uploading!')을 Button 내 onClick prop으로 전달한다.
Button 컴포넌트는 onClick prop을 받는다. 이후 받은 prop을 빌트인 button의 onClick={onClick}으로 직접 전달한다.
이벤트 핸들러 Prop 명명하기
button, div 같은 빌트인 컴포넌트는 브라우저 이벤트 이름만을 지원한다.
그러나 사용자 정의 컴포넌트에서는 이벤트 핸들러 prop의 이름을 원하는 대로 명명할 수 있다.
관습적으로 on으로 시작하여 대문자 영문으로 이어진다.
function Button({ onSmash, children }) {
return (
<button onClick={onSmash}>
{children}
</button>
);
}
export default function App() {
return (
<div>
<Button onSmash={() => alert('Playing!')}>
Play Movie
</Button>
<Button onSmash={() => alert('Uploading!')}>
Upload Image
</Button>
</div>
);
}