[Next.js Learn] From JavaScript to React(7) - Displaying Data with Props

지치지 않는 백엔드 개발자 김성주·2023년 6월 1일

목록 보기

9/50

Props를 사용하여 데이터 보여주기

지금까지 <Header /> 컴포넌트를 재사용한다면, 두 번 모두 동일한 내용이 표시될 것입니다.

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

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

하지만 만약 다른 텍스트를 전달하고 싶거나 데이터를 외부 소스에서 가져오는 경우에는 어떻게 해야 할까요?

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

마찬가지로, React 컴포넌트에는 속성으로 정보 조각을 전달할 수 있습니다. 이러한 것들을 props라고 합니다.

JavaScript 함수와 유사하게, 컴포넌트를 설계할 수 있습니다. 이 컴포넌트는 사용자 정의 인자 (또는 props)를 받아들이고, 이를 통해 컴포넌트의 동작이나 화면에 표시되는 내용을 변경할 수 있습니다. 그리고 이러한 props를 부모 컴포넌트에서 자식 컴포넌트로 전달할 수 있습니다.

참고: React에서 데이터는 컴포넌트 트리를 따라 하향식으로 흐릅니다. 이를 단방향 데이터 흐름이라고 합니다. 다음 섹션에서 다룰 상태(State)는 부모 컴포넌트에서 자식 컴포넌트로 props로 전달될 수 있습니다.

props 사용하기

HomePage 컴포넌트에서는 HTML 속성을 전달하는 것과 마찬가지로 Header 컴포넌트에 사용자 정의 title prop을 전달할 수 있습니다.

// 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의 값을 명시적으로 지정하기 위해 객체 비구조화(destructuring)를 사용할 수 있습니다.

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가 단순한 텍스트 문자열을 DOM에 렌더링하려는 의도로 인식하기 때문입니다.

React에게 이것이 JavaScript 변수임을 알리기 위한 방법이 필요합니다.

JSX에서 변수 사용하기

정의한 변수를 사용하기 위해서는 JSX 마크업 내에서 직접 일반 JavaScript 코드를 작성할 수 있도록 해주는 특별한 JSX 구문인 중괄호({})를 사용할 수 있습니다.

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

중괄호({})는 "JSX 영역"에서 "JavaScript 영역"으로 진입하는 방법으로 생각할 수 있습니다. 중괄호 내에는 JavaScript 표현식(단일 값을 평가하는 표현식)을 추가할 수 있습니다. 예를 들면 다음과 같습니다:

도트 표기법(dot notation)을 사용한 객체 속성(object property)

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

템플릿 리터럴(template literal):

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

함수의 반환값(The 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)

```javascript
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>
  );
}

이제 컴포넌트는 일반적인 title prop을 받아들이며, 이를 애플리케이션의 다른 부분에서 재사용할 수 있습니다. 단지 title을 변경하기만 하면 됩니다.

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에서 어떤 요소를 업데이트해야 하는지 알아야 하기 때문입니다.

현재는 이름을 사용할 수 있지만, 고유성이 보장되는 것(예: 아이템 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>
  );
}