Displaying Data with Props

만약 <Header />구성 요소를 재사용하면 두 번 모두 동일한 내용이 표시됩니다.

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

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

하지만 다른 텍스트를 전달하고 싶거나 외부 소스에서 데이터를 가져오기 때문에 미리 정보를 모르는 경우에는 어떻게 해야 할까요?

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

같은 방식으로 정보 조각을 React 구성 요소에 속성으로 전달할 수 있습니다. 이것을 props이라고 합니다. 예를 들어 버튼의 가능한 변형을 생각해 보십시오.

JavaScript 함수와 유사하게 구성 요소의 동작을 변경하는 사용자 정의 인수(또는 소품)를 허용하거나 화면에 렌더링될 때 시각적으로 표시되는 구성 요소를 디자인할 수 있습니다. 그런 다음 이러한 소품을 상위 구성 요소에서 하위 구성 요소로 전달할 수 있습니다.

Note

React에서 데이터는 구성 요소 트리 아래로 흐릅니다. 이를 단방향 데이터 흐름이라고 합니다. 다음 장에서 논의할 상태는 부모 컴포넌트에서 자식 컴포넌트로 props로 전달될 수 있습니다.

Using props

HomePage 구성 요소에서 사용자 정의 title prop을 Header 구성 요소에 전달할 수 있습니다.

index.html
function HomePage() {
  return (
    <div>
      <Header title="React" />
    </div>
  );
}

그리고 하위 구성 요소인 Header는 해당 props를 첫 번째 함수 매개 변수로 받아들일 수 있습니다.

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

console.log()로 props를 보면 title 속성을 가진 객체임을 알 수 있습니다.

index.html
function Header(props) {
  console.log(props); // { title: "React" }
  return <h1>Develop. Preview. Ship.</h1>;
}

props는 객체이므로 객체 구조 분해를 사용하여 함수 매개변수 내에서 props 값의 이름을 명시적으로 지정할 수 있습니다.

index.html
function Header({ title }) {
  console.log(title); // "React"
  return <h1>Develop. Preview. Ship.</h1>;
}

그런 다음 <h1> 태그의 내용을 제목 변수로 바꿀 수 있습니다.

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

브라우저에서 파일을 열면 실제 단어 “title”이 표시되는 것을 볼 수 있습니다. 이는 React가 일반 텍스트 문자열을 DOM에 렌더링하려고 한다고 생각하기 때문입니다.

React에게 이것이 JavaScript 변수임을 알려주는 방법이 필요합니다.

Using variables in JSX

title prop을 사용하려면 중괄호 {}를 추가하세요. 이는 JSX 마크업 내부에 직접 일반 JavaScript를 작성할 수 있는 특수 JSX 구문입니다.

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

“JSX 영역”에 있는 동안 “JavaScript 영역”에 들어가는 방법으로 중괄호를 생각할 수 있습니다. 중괄호 안에 JavaScript 표현식(단일 값으로 평가되는 표현식)을 추가할 수 있습니다.

1.점 표기법을 사용한 객체 속성:

example.js
function Header(props) {
  return <h1>{props.title}</h1>;
}
  1. A template literal:
example.js
function Header({ title }) {
  return <h1>{`Cool ${title}`}</h1>;
}
  1. The returned value of a function:
example.js
function createTitle(title) {
  if (title) {
    return title;
  } else {
    return 'Default title';
  }
}

function Header({ title }) {
  return <h1>{createTitle(title)}</h1>;
}
  1. Or ternary operators:
example.js
function Header({ title }) {
  return <h1>{title ? title : 'Default Title'}</h1>;
}

이제 title prop에 문자열을 전달할 수 있습니다. 또는 삼항 연산자를 사용한 경우 구성 요소의 기본 대소문자를 고려했기 때문에 title prop을 전혀 전달할 수도 없습니다.

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

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

이제 구성 요소는 애플리케이션의 다른 부분에서 재사용할 수 있는 일반 title prop을 사용할 수 있습니다. 제목 문자열을 변경하기만 하면 됩니다.

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

Iterating through lists

목록으로 표시해야 하는 데이터가 있는 것이 일반적입니다. 배열 메서드를 사용하여 데이터를 조작하고 스타일은 동일하지만 서로 다른 정보를 보유하는 UI 요소를 생성할 수 있습니다.

HomePage 구성 요소에 다음 이름 배열을 추가합니다.

index.html
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에서 업데이트할 요소를 알기 위해 배열의 항목을 고유하게 식별할 수 있는 무언가가 필요하기 때문입니다.

이름은 현재 고유하므로 지금은 사용할 수 있지만 항목 ID와 같이 고유함이 보장되는 이름을 사용하는 것이 좋습니다.

index.html
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>
  );
}

Additional Resources: