Chapter 6. Displaying Data with Props

제 6장

Props로 데이터 표시하기

지금까지의 프로젝트에서는, <Header /> 컴포넌트를 재사용하면 두 번 모두 같은 내용을 표시할 것입니다.

function Header() {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
      <Header />
    </div>
  );
}

그러나 다른 텍스트를 전달하거나, 외부 소스에서 데이터를 가져오기 때문에 정보를 미리 알 수 없는 경우 어떻게 해야 할까요?

일반 HTML 요소에는 해당 요소의 동작을 변경할 수 있는 정보를 전달할 수 있는 속성이 있습니다. 예를 들어, <img> 요소의 src 속성을 변경하면 표시되는 이미지가 변경됩니다. <a> 태그의 href 속성을 변경하면 링크의 대상이 변경됩니다.

마찬가지로 React 컴포넌트에도 정보를 속성으로 전달할 수 있습니다. 이러한 것을 props라고 부릅니다.

Props

JavaScript 함수와 유사하게, 컴포넌트가 화면에 렌더링될 때 컴포넌트의 동작이나 표시되는 것을 변경하는 사용자 정의 인수(또는 props)를 받을 수 있도록 컴포넌트를 설계할 수 있습니다. 그런 다음 부모 컴포넌트에서 이러한 props를 자식 컴포넌트로 전달할 수 있습니다.

참고: React에서 데이터는 컴포넌트 트리의 아래 방향으로 흐릅니다. 이것은 _단방향 데이터 흐름_으로 언급됩니다. 다음 섹션에서 다룰 상태는 props를 통해 부모 컴포넌트에서 자식 컴포넌트로 전달될 수 있습니다.

Props 사용하기

HomePage 컴포넌트에서 Header 컴포넌트로 마치 HTML 속성을 전달하는 것처럼 사용자 정의 title props를 전달할 수 있습니다:

function HomePage() {
  return (
    <div>
      <header title="React 💙" />
    </div>
  );
}

그리고 자식 컴포넌트인 Header는 이러한 props를 첫 번째 함수 매개변수로 받아들일 수 있습니다:

function Header(props) {
  return <h1>Develop. Preview. Ship. 🚀</h1>;
}

만약 console.log()를 사용하여 props를 출력하면 이것이 title 속성을 가진 객체임을 확인할 수 있습니다.

function Header(props) {
  console.log(props); // { title: "React 💙" }
  return <h1>React 💙</h1>;
}

props는 객체이므로 함수 매개변수 내에서 props의 값을 명시적으로 명명하기 위해 구조 분해 할당를 사용할 수 있습니다:

function Header({ title }) {
  console.log(title); // "React 💙"
  return <h1>React 💙</h1>;
}

그런 다음 <h1> 태그의 내용을 title 변수로 대체할 수 있습니다.

function Header({ title }) {
  console.log(title);
  return <h1>title</h1>;
}

브라우저에서 프로젝트를 열면 "title"이라는 단어가 실제로 표시됩니다. 이것은 React가 당신이 DOM에 문자열을 렌더링하려는 의도로 생각하기 때문입니다.

JSX에서 변수 사용하기

정의한 변수를 사용하려면 중괄호 {}를 사용할 수 있습니다. 이것은 JSX 마크업 내에서 일반 JavaScript를 직접 작성할 수 있는 특별한 JSX 구문입니다.

function Header({ title }) {
  console.log(title);
  return <h1>{title}</h1>;
}

중괄호를 "JavaScript 영역"에 진입하는 방법으로 생각할 수 있습니다. 중괄호 내에는 JavaScript 표현식(단일 값으로 취급되는)을 추가할 수 있습니다. 예를 들면:

1. 점 표기를 통한 객체 속성:

function Header(props) {
  return <h1>{props.title}</h1>;
}

1. 템플릿 리터럴:

function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}

1. 함수의 반환 값:

function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}

1. 또는 삼항 연산자:

function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

이제 title prop에 어떤 문자열이든 전달할 수 있으며, 삼항 연산자로 컴포넌트의 기본 경우를 처리했으므로 title prop을 전달하지 않을 수도 있습니다:

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}

이제 컴포넌트는 제목 prop을 받아들이며 응용 프로그램의 다른 부분에서 재사용할 수 있는 범용 제목 prop을 받아들입니다. 이제 제목만 변경하면 됩니다:

function HomePage() {
  return (
    <div>
      <Header title="React 💙" />
      <Header title="A new title" />
    </div>
  );
}

목록을 순회하는 방법

표시해야 하는 데이터를 목록으로 가지고 있는 경우가 흔합니다. 배열 메서드를 사용하면 데이터를 조작하고 서로 다른 정보를 보유한 동일한 스타일의 UI 요소를 생성할 수 있습니다.

참고: React는 데이터를 가져오는 방법에 대한 지침이 없으므로 필요에 맞는 가장 좋은 솔루션을 선택할 수 있습니다. 나중에는 Next.js에서 데이터를 가져오는 방법을 다룰 것입니다. 그러나 지금은 데이터를 나타내기 위해 간단한 배열을 사용하겠습니다.

HomePage 컴포넌트에 이름 배열을 추가해 보겠습니다:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
    </div>
  );
}

그런 다음 array.map() 메서드를 사용하여 배열을 순회하고 목록 항목에 이름을 매핑하는 화살표 함수를 사용할 수 있습니다:

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li>{name}</li>
        ))}
      </ul>
    </div>
  );
}

중괄호를 사용하여 "JavaScript" 및 "JSX" 영역을 오갈 수 있음을 주목하세요.

이 코드를 실행하면 React가 배열의 항목을 고유하게 식별할 수 있는 key prop이 누락되었다는 경고가 표시됩니다. 이는 React가 DOM에서 업데이트할 요소를 알기 위해 배열 항목을 고유하게 식별할 수 있는 정보가 필요하기 때문입니다. 현재 이름이 고유하기 때문에 key prop으로 사용할 수 있지만, 항목 ID와 같이 고유한 값이 보장되는 것으로 사용할 것을 권장합니다.

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  );
}

추가 자료:

• 컴포넌트에 props 전달하기

• 목록 렌더링

• 조건부 렌더링