[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 데이터 전달

학습 목표

| 리액트에서 데이터를 전달하는 방법을 학습합니다.

Props

컴포넌트 간에 데이터를 전달하는 방법으로 컴포넌트의 확장성을 높여 재사용성을 향상시킨다.

 

컴포넌트를 정의할 때 함수와 동일하게 정의하기 때문에 데이터를 전달할 때에도 함수에서 매개변수를 사용하듯이 작성하면 된다.

props 받기

// src/learn/props/Greeting.tsx
const Greeting = (props: { uname: string; age: string }) => {
  // props가 객체 형태로 전달됨
  // 타입을 지정해줘야 함

  return (
    <>
      <h1>
        Hello, {props.uname}({props.age})
      </h1>
      {/* 표현식을 사용해서 태그 안에서 props 데이터 사용 */}
    </>
  );
};

export default Greeting;

props 전달

import Greeting from "./components/learn/props/Greeting";

const App = () => {
  return (
    <>
      <Greeting uname="John" age="39" />
    </>
  );
};

export default App;

(props: { uname: string; age: string })와 같은 식으로 props의 타입을 정의할 수 있지만 props로 전달되는 데이터의 종류가 많아지거나 동일한 타입의 props를 여러 곳에서 사용할 때에는 props의 타입을 정리해주는 것이 좋다.

타입 정리

interface IGreetingProps {
  uname: string;
  age: string;
}

const Greeting = (props: IGreetingProps) => {
  return (
    <>
      <h1>
        Hello, {props.uname}({props.age})
      </h1>
    </>
  );
};

export default Greeting;

장점: 재사용 가능

이렇게 구현하면 타입 인터페이스를 export하여 동일한 타입의 props를 사용하는 컴포넌트 파일에서 해당 타입을 참조하여 재사용할 수 있다는 장점이 있다.

이때에는 타입을 특정 컴포넌트에서 정의하고 관리할 필요가 없기 때문에 별도의 파일로 분리한 후 관리하는 것이 좋다.

비구조 할당

props를 받을 때 props로 받으면 데이터를 사용할 때마다 props.[속성]을 사용해줘야 하기 때문에 비구조할당을 이용해 속성으로 데이터를 받아 사용할 수 있다.

import { INameAndAge } from "../../../type";

const Eat = ({ uname, age }: INameAndAge) => {
  return (
    <h1>
      {uname} - {age} 님이 식사를 시작합니다.
    </h1>
  );
};
export default Eat;

children

위와 같이 props를 활용해 데이터를 전달할 수 있다. 그러나 만약 태그로 감싼 노드 객체를 전달하고 싶다면 속성으로 전달하기 보다는 children을 사용하는 것이 코드의 가독성을 높여줄 수 있다.

children 받기

import React from "react";

const RedColor = (props: { children: React.ReactNode }) => {
  return (
    <>
      <div style={{ color: "red" }}>{props.children}</div>
    </>
  );
};
export default RedColor;

children 전달

import RedColor from "./components/learn/children/RedColor";

const App = () => {
  return (
    <>
      <RedColor>
        I <span style={{ textDecoration: "underline" }}>want</span> to text
        {/* 컨텐츠로 넘어감 */}
      </RedColor>
    </>
  );
};

export default App;