(3) 지금 바로 React 시작하기 - Props

• 위니브 엠버서더가 되어 무료로 강의를 제공 받고 후기를 작성한다.
• React 기초 강의에 나오는 가본 개념을 정리 했다.
•  https://www.inflearn.com/course/%EC%A7%80%EA%B8%88%EB%B0%94%EB%A1%9C-react/dashboard

1. Props

• Components를 만드는 법을 알았다. 그러나 충분하지 않다.
• 우리가 만든 컴포넌트는 항상 같은 값을 render한다. 동적으로 유연하게 변경되는 컴포넌트를 제작하려면 어떻게 할까?
• 컴포넌트는 props를 가지고 있다. 함수로 치면 함수의 매개변수와 같다.
• props는 data 또는 components를 components에게 전달할 수있다. props를 전달 받은 components가 customize 해서 사용할 수 있도록

import React from 'react';
import { createRoot } from 'react-dom/client';

// props
function FriendlyGreeting({ name }) {
  return (
    <p
      style={{
        fontSize: '1.25rem',
        textAlign: 'center',
        color: 'sienna',
      }}
    >
      Greetings, {name}!
    </p>
  );
}

const root = createRoot(document.querySelector('#root'));

root.render(
  <div>
		{ // props }
    <FriendlyGreeting name="Josh" />
    <FriendlyGreeting name="Anita" />
    <FriendlyGreeting name="Rahul" />
  </div>
);

 

Default values

• 값을 모를때 기본 값을 두고 싶으면 어떻게 할까?
• 예를 들어 user 이름을 알면 Hey 김아무개! 모르면 Hey There로 기본 값을 there로 두고 싶다.
  • || Operator를 사용하면 된다.

function FriendlyGreeting({ name }) {
  return (
    <p>
      Hey {name || 'there'}!
    </p>
  );
}

• 더 좋은 방법으로 props에 기본 값을 지정하는 방법이 있다.

function FriendlyGreeting({ name = 'there' }) {
  return (
    <p>
      Hey {name}
    </p>
  );
}

• props에 기본 값을 지정하면 props의 값이 여러개일때 관리가 쉬워진다.
  • ||으로 분기하던 코드도 정리되어 깔끔해지고, 기본 값을 확인하고 싶을때 props만 보면되는 장점
  • 값을 입력했는데 || 이 동작해서 발생하는 버그를 사전에 방지
  • 필요할떼 재정의 해서 사용 가능

function HorizontalRule({ size = '100px' }) {
  return (
    <div style={{ width: size }}>
      {/* Line-drawing stuff here */}
    </div>
  );
}

<HorizontalRule size="250px" /> // Will be "250px"
<HorizontalRule />              // Will be "100px"

• 마지막으로 nullish coalescing operator를 사용하여 null과 undefined인 경우에만 기본 값을 작성하는 방법도 있다.

function FriendlyGreeting({ name }) {
  return (
    <p>
      Hey {name ?? 'there'}!
    </p>
  );
}

 

2. Children Props

 

• Button 컴포넌트를 만든다 가정해보자

function RedButton({ contents }) {
  return (
    <button
      style={{
        color: 'white',
        backgroundColor: 'red',
      }}
    >
      {contents}
    </button>
  );
}

root.render(
  <RedButton contents="Don't click me" />
);

• HTML의 button에 contents를 작성하는 방법과는 차이가 있다.

<button>
  Don't click me
</button>

• React는 children props라는 기능으로 HTML과 유사하게 contents를 전달하는 방법을 제공한다.

root.render(
  <RedButton>
    Don't click me
  </RedButton>
);

function RedButton({ children }) {
  return (
    <button
      style={{
        color: 'white',
        backgroundColor: 'red',
      }}
    >
      {children}
    </button>
  );
}

• open - close tages 사이에 값을 전달하면 React가 자동으로 값을 children으로 전달한다.
• children은 props에서 제공하는 예약어이다.