수업을 듣고 내용을 정리한 글입니다.

Props란?

React에서 Props Properties의 약자로, 컴포넌트 간 데이터 전달을 가능하게 해주는 중요한 개념이다. Props 는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 수 있다.

Props 를 사용하면 컴포넌트의 재사용성이 높아진다. 컴포넌트는 Props 를 통해 외부에서 전달받은 값을 사용하므로, 동일한 기능을 하는 컴포넌트라도 Props 를 조금씩 다르게 전달하여 여러 곳에서 사용할 수 있다.

Props 는 다음과 같이 전달할 수 있다.

const ParentComponent = () => {
  return <ChildComponent name="John" age={30} />;
}

const ChildComponent = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

위 예제에서 ParentComponent 에서 ChildComponent 로 name 과 age 라는 Props를 전달하고 있다. ChildComponent 에서는 props 객체를 받아서 name 과 age 를 출력하고 있다.

또한, props 는 객체이기 때문에 destructuring 이 가능하다.

const ParentComponent = () => {
  return <ChildComponent name="John" age={30} />;
}

const ChildComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
}

Props 를 사용할 때는 다음과 같은 주의점이 있다.

• Props 는 불변(immutable)해야 한다.
• Props 를 변경하면 해당 컴포넌트가 다시 렌더링된다.
• Props 에는 자바스크립트의 모든 데이터 타입을 사용할 수 있다.
• Props 는 기본값(default value)을 가질 수 있다.

조건부 렌더링

props 를 활용하여 자신이 원할때만 컴포넌트가 렌더링이 되도록 할 수도 있다.

다음 예제를 보자.

const App = () => {
  return (
    <div>
      <ShowInfo
        name="Yoonchan"
        hobby="sleeping"
        mbti="ISTP"
        email="sibongbang@gmail.com"
        flag={false}
      />
    </div>
  );
}

const ShowInfo = ({ name, hobby, mbti, email, flag }) => {
  return (
    <div>
      <h1>Hello, My name is {name}</h1>
      <p>My hobby is {hobby}</p>
      <p>My mbti is {mbti}</p>
      <p>My e-mail is {email}</p>
      {flag && <p>Extra Line</p>}
    </div>
  );
};

위 예제에서는 App 에서 ShowInfo 로 flag 라는 boolean 형의 props를 전달하고 있는데,

{flag && <p>Extra Line</p>}

flag 의 값에 따라서 이 부분이 보여질지 보여지지 않을지 결정이 된다.
먼저 해당 코드의 의미는, flag 와 <p>Extra Line</p> 모두 값이 참이라면 <p>Extra Line</p> 을 반환하고, 그렇지 않다면 아무것도 반환하지 않는다.

<p>Extra Line</p> 은 값이 항상 참이기 때문에 flag 의 값이 참인지 거짓인지에 따라서 이를 보여줄지 보여주지 않을지 결정할 수 있다.![]