[공식문서] JavaScript에서 React로 #7

Props를 사용하여 데이터 표시하기

 

지금까지, <Header /> 컴포넌트를 재사용하려면 두 번 중복해서 같은 내용을 표시할 것입니다.

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

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

 

하지만 다른 텍스트를 전달하고 싶거나, 데이터를 외부 소스에서 가져와서 정보를 미리 알 수 없는 경우는 어떨까요?

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

동일한 방식으로 React 컴포넌트에 속성으로 정보 조각을 전달할 수 있습니다. 이러한 것들을 속성(props)이라고 합니다.

Next.js 공식문서 - HTML 요소 속성(props)

일반 JavaScript 함수와 마찬가지로, 컴포넌트를 디자인할 때 컴포넌트의 동작이나 렌더링할 때 보이는 내용을 변경하는 사용자 정의 인수(또는 props)를 받을 수 있습니다. 그런 다음 부모 컴포넌트에서 자식 컴포넌트로 이러한 props를 전달할 수 있습니다.

참고: React에서 데이터는 컴포넌트 트리를 따라 아래로 흐릅니다. 이를 일방향 데이터 흐름이라고 합니다. 다음 섹션에서 설명할 상태(state)는 부모 컴포넌트에서 자식 컴포넌트로 props로 전달될 수 있습니다.

 

props 사용하기

HomePage 컴포넌트에서 Header 컴포넌트에 사용자 지정 title prop을 전달할 수 있습니다. 마치 HTML 속성을 전달하는 것처럼요.

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

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

// ReactDOM.render(<HomePage />, app)

 

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

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

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

// ReactDOM.render(<HomePage />, app)

 

props를 console.log()로 출력하면 title 속성을 가진 객체임을 확인할 수 있습니다.

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

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

// ReactDOM.render(<HomePage />, app)

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

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

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

// ReactDOM.render(<HomePage />, app)

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

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

 

프로젝트를 브라우저에서 열어보면 실제로 "title"이라는 단어가 표시됩니다. 이는 React가 이것을 일반 텍스트 문자열로 렌더링하려고 한다는 것입니다.

React에게 이것이 JavaScript 변수임을 알려주어야 합니다.

JSX에서 변수 사용하기

 

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

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

중괄호를 'JavaScript 랜드'로 진입하는 방법이라고 생각할 수 있습니다. JSX 랜드 내에서 중괄호 내부에 JavaScript 표현식(단일 값으로 평가되는 것)을 추가할 수 있습니다. 예를 들면 다음과 같습니다.

 

1. 점 표기법을 사용한 객체 속성(object property)

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

2. 템플릿 리터럴(template literal)

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

3. 함수의 반환 값(returned value of a function)

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

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

4. 또는 삼항 연산자(ternary operators)

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

 

이제 title prop에 아무 문자열이나 전달하고, 삼항 연산자로 기본값을 설정했기 때문에 title을 전달하지 않더라도 정상적으로 작동합니다.

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

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

 

이제 컴포넌트는 일반적인 title prop을 수용하며 이를 응용 프로그램의 다른 부분에서 재사용할 수 있습니다. 제목만 변경하면 됩니다.

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

 

리스트 순환하기(Iterating through lists)

 

리스트를 표시해야 하는 경우가 일반적입니다. 배열 메서드를 사용하여 데이터를 조작하고 스타일은 동일하지만 다른 정

보를 포함하는 UI 요소를 생성할 수 있습니다.

 

참고: 데이터 가져오기에 관해서는 React는 견해를 갖고 있지 않습니다. 즉, 여러분의 요구에 가장 잘 맞는 솔루션을 선택할 수 있습니다. 나중에 Next.js에서 데이터 가져오기 옵션을 설명하겠지만, 지금은 데이터를 나타내기 위해 간단한 배열을 사용할 수 있습니다.

 

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

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

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

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

현재 이름은 고유하기 때문에 일단은 이름을 사용할 수 있지만, 보다 보장된 고유한 값인 아이템 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>
  );
}

 

다음 섹션에서는 React에서 상태(state) 및 사용자 이벤트를 듣는 방법에 대해 더 자세히 배우게 될 것입니다.