프롭스 연결하기

리액트 컴포넌트에서 props로 데이터 전달하기

이 글에서는 프로젝트의 랭킹 리스트 코드를 props가 부모에서 자식으로, 손자로 전달했습니다.

 전체 구조 

• RankingContainer: 영화 데이터를 준비해서 각 장르별로 랭킹 리스트를 보여주는 부모 컴포넌트
• RankingList: 전달받은 영화 배열을 map으로 돌며, 각 영화 정보를 Ranking 컴포넌트에 넘기는 자식 컴포넌트
• Ranking: 실제로 영화 한 개의 정보를 화면에 보여주는 손자 컴포넌트

---

코드로 보는 props 전달 흐름

1) 부모 컴포넌트에서 데이터 준비 & 전달

// RankingContainer.tsx

import React, { useMemo } from "react";
import { StyledRankingContainer } from "./styles";
import { RankingList } from "@components/index";
import { MovieWithGenre } from "@models/Movie";

const RankingContainer = () => {
  const moviesByGenre = useMemo(() => [
    {
      type: "신작",
      movies: [
        { id: 1, title: "제목", thumbnail: "이미지경로" },
        { id: 2, title: "제목2", thumbnail: "이미지경로2" },
        // ...생략
      ],
    },
  ], []);

  return (
    <StyledRankingContainer>
      {moviesByGenre.map((movieWithGenre) => (
        <>
          <p>{movieWithGenre.type}</p>
          <RankingList movies={movieWithGenre.movies} />
        </>
      ))}
    </StyledRankingContainer>
  );
};

export default RankingContainer;

• moviesByGenre는 분류별 영화 목록을 담고 있습니다.
• <RankingList movies={movieWithGenre.movies} /> 부분이 바로 props로 데이터 전달하는 부분입니다.
• 각 장르의 영화 배열을 movies라는 이름으로 RankingList에 넘깁니다.

2) 자식 컴포넌트에서 props 받기

import React from "react";
import { Ranking } from "@components/index";
import { StyledRankingList } from "./styles";
import { Movie } from "../../models/Movie";

interface ListProps {
  movies: Movie[];
}

const RankingList = (props: ListProps) => {
  const { movies } = props;

  return (
    <StyledRankingList>
      {movies.map((movie) => (
        <Ranking movie={movie} />
      ))}
    </StyledRankingList>
  );
};

export default RankingList;

• RankingList는 props로 받은 movies를 꺼내서 사용합니다.
• movies 배열을 map으로 돌면서, 각각의 movie를 <Ranking movie={movie} />로 또 props로 넘겨줍니다.

3) 손자 컴포넌트(Ranking)에서 props 받기

import React from "react";
import { StyledRanking } from "./styles";
import { Movie } from "@models/Movie";
import { Link } from "react-router-dom";

interface RankingProps {
  movie: Movie;
}

const Ranking = (props: RankingProps) => {
  const { movie } = props;
  return (
    <StyledRanking>
      <Link to={`/detail/${movie.id}`}>
        <p>{movie.title}</p>
        <p>{movie.thumbnail}</p>
        <p>{movie.id}</p>
      </Link>
    </StyledRanking>
  );
};

export default Ranking;

• Ranking 컴포넌트는 movie라는 props를 받아서, 영화 한 편의 정보를 화면에 보여줍니다.
• <Link to={`/detail/${movie.id}`}>를 사용해, 영화 제목을 클릭하면 해당 영화 상세 페이지로 이동할 수 있도록 구현되어 있습니다.
• {movie.title}, {movie.thumbnail}, {movie.id} 등 props로 받은 데이터를 그대로 화면에 표시합니다.

---

props를 위와 같은 방식으로 쓴 이유

• 부모 → 자식 → 손자 구조로 데이터를 넘기면, 각 컴포넌트가 자신이 맡은 역할에만 집중할 수 있습니다.
• 예를 들어, 영화 데이터가 바뀌면 RankingContainer에서만 관리하면 되며, RankingList와 Ranking은 그 데이터를 받아서 화면에 보여주기만 합니다.
• 위와 같은 방법으로 컴포넌트 재사용성도 높아지고 유지보수도 쉬워지게 되었습니다.

정리

리액트에서 props는
부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 공식적인 방법입니다.
이번 예제처럼 컴포넌트가 여러 단계로 쪼개질 때, props를 통해 데이터를 주고받으며
각 컴포넌트가 자신의 역할에만 집중할 수 있게 도와줍니다.