props

props란?

props는 properties의 줄임말로 특정한 값을 컴포넌트에 전달해 줘야 할 때 props를 사용한다.

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>
}