props는 properties의 줄임말로 특정한 값을 컴포넌트에 전달해 줘야 할 때 props를 사용한다.
App이라는 컴포넌트에서 Test컴포넌트를 사용 할 때 text라는 값을 전달하려고 한다면 아래와 같이 코드를 작성하면된다.
function App() {
return (
<Test name="react" color="red" />
);
}
이제 Test컴포넌트에서 text값을 사용하고 싶다면
function Test(props) {
return <div style={{color: props.color}}>안녕하세요 {props.name}</div>
}
이처럼 컴포넌트에 전달되는 props는 파라미터를 통해서 조회 할 수 있다. props는 객체형태로 전달되며 만약 name
값을 조회하고 싶다면 props.name
을 조회하거나 비구조화 할당을 통해 아래처럼 props를 받을 수 있다.
function Test({name, color}) {
return <div style={{color:color}}>안녕하세요 {name}</div>
}