Props

props는 properties의 줄임말이다. props는 값을 컴포넌트에 전달할 때 사용한다.

사용법

App.js

function App() {
  return (
    <Info name = "이희성" />
  );
}

이렇게 Info 컴포넌트에 name이라고 값을 넘겨주게 되면 Info에서 사용할 수 있다.

Info.js

export default function Info(props) {
  return (
    <h1>이름 : {props.name}</h1>
  )
}

이런식으로 파라미터로 props를 받아 name의 값을 사용하고 싶으면 {props.name}을 사용하면 된다.

조건부 렌더링

조건부 렌더링은 특정 조건에 따라 다른 결과물을 렌더링 하는 것이다.

사용법

아까 props를 사용한 예시에서 조건부 렌더링을 적용시키면 이렇게 된다.

App.js

function App() {
  return (
    <Info name = "이희성" isPerson = {true} />
  );
}

이렇게 Info 컴포넌트에 name이라는 값과 isPerson을 넘겨주게 Info에서 isPerson에 따라 name을 출력할지 말지 정할 수 있는데 가장 기본적인 방법이 삼항연산자를 이용하는 것이다.

Info.js

export default function Info(props) {
  return (
     <h1>{
       props.isPerson ? `이름 = ${props.name}` : "사람 아님"
     }</h1>
  );
}

이런 식으로 사용하면 isPerson에 true 값이 넘어오면 이희성을 출력하고 아니면 사람 아님을 출력한다.