리액트 컴포넌트에서 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를 통해 데이터를 주고받으며
각 컴포넌트가 자신의 역할에만 집중할 수 있게 도와줍니다.

리액트 useMemo란?

useMemo는 리액트에서 제공하는 훅(Hook) 중 하나로, 컴포넌트의 성능을 최적화하기 위해 사용됩니다.
주로 계산 비용이 높은 연산의 결과를 저장하고 재사용하거나, 객체/배열 등 참조형 데이터의 동일성 유지가 필요할 때 활용합니다.
복잡하거나 무거운 연산을 매 렌더링마다 반복하고 싶지 않을 때, 그리고 객체, 배열, 함수 등의 참조값이 매번 새로 만들어져서 불필요한 렌더링이 발생할 때 사용할 수 있습니다.

기본 문법

const memoizedValue = useMemo(() => {
  // 계산이 많이 드는 함수 실행 또는 객체/배열 생성
  return expensiveFunction(a, b);
}, [a, b]);

• 첫 번째 인자: 메모이제이션할 함수(콜백). 이 함수의 반환값이 저장됩니다.
• 두 번째 인자: 의존성 배열. 배열 안의 값이 바뀔 때만 첫 번째 함수가 다시 실행되어 값을 갱신합니다. 값이 바뀌지 않으면 이전에 저장한 값을 재사용합니다.

예시

계산 비용이 높은 함수의 결과 저장

import React, { useMemo, useState } from 'react';

function ExpensiveComponent() {
  const [count, setCount] = useState(0);

  // 비용이 많이 드는 함수
  const expensiveCalculation = (num) => {
    console.log('Calculating...');
    return num * 2; // 실제로는 더 복잡한 연산이라고 가정
  };

  // useMemo로 결과 저장
  const calculatedValue = useMemo(
    () => expensiveCalculation(count),
    [count]
  );

  return (
    <div>
      <p>Count: {count}</p>
      <p>Calculated Value: {calculatedValue}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

• count가 바뀔 때만 expensiveCalculation이 실행되고, 그렇지 않으면 이전 결과를 재사용합니다.

참조 동일성 유지(불필요한 렌더링 방지)

const memoizedObject = useMemo(() => ({ a: 1, b: 2 }), []);

• 빈 배열([])을 의존성으로 넣으면 컴포넌트가 처음 마운트될 때 한 번만 실행되고, 이후에는 같은 객체 참조가 유지됩니다.
• 이 패턴은 자식 컴포넌트에 객체/배열을 props로 넘길 때 불필요한 렌더링을 막는 데 유용합니다.

정리

• useMemo는 값(연산 결과, 객체, 배열 등)을 메모이제이션하여, 의존성 배열의 값이 바뀔 때만 다시 계산합니다.
• 주로 비용이 큰 연산의 최적화 또는 참조 동일성 유지가 필요할 때 사용합니다.
• 의존성 배열을 올바르게 설정하는 것이 중요합니다. 잘못 설정하면 값이 갱신되지 않거나, 불필요한 계산이 반복될 수 있습니다.

useMemo를 적절히 활용하면 리액트 앱의 불필요한 연산과 렌더링을 줄여 성능을 최적화할 수 있습니다.

리액트 라우터(React Router)란?

리액트 라우터(React Router)는 리액트 애플리케이션에서 주소(URL)에 따라 컴포넌트를 다르게 렌더링할 수 있도록 해주는 라이브러리입니다.
즉, 사용자가 브라우저 주소창에 입력한 URL을 감지해서, 해당 경로에 맞는 화면(컴포넌트)을 보여주는 역할을 합니다.
이 기능을 통해 리액트 SPA(Single Page Application)에서도 여러 페이지가 있는 것처럼 자연스러운 내비게이션과 화면 전환을 구현할 수 있습니다.

주요 컴포넌트

• BrowserRouter
  라우터 기능을 사용하려면 앱의 최상위에 <BrowserRouter>로 감싸야 합니다. 이 컴포넌트가 하위 트리에 라우팅 정보를 전달합니다.
• Routes & Route
  <Routes>는 여러 개의 <Route>를 감싸서 관리합니다.
  <Route>는 path 속성에 해당하는 주소로 접근했을 때 어떤 컴포넌트를 보여줄지 정의합니다.
• Link
  내비게이션을 위해 <Link to="/경로"> 컴포넌트를 사용하면, 페이지 새로고침 없이 경로를 바꿔줍니다.

예시 코드

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Main';
import Detail from './pages/Detail';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Main Page</Link>
        <Link to="/Detail">Detail Page</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/Detail" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

위 예시처럼, 주소가 '/'이면 Main 컴포넌트, '/Detail'이면 Detail 컴포넌트가 보여집니다.

리액트 라우터 돔 설치 방법

npm install react-router-dom

기본 사용법

1. BrowserRouter로 앱 전체를 감싸기

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   import { BrowserRouter } from "react-router-dom";
   
   ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </React.StrictMode>
   );
       

2. Routes와 Route로 경로와 컴포넌트 연결

   import { Routes, Route, Link } from "react-router-dom";
   import Home from "./pages/Home";
   import Detail from "./pages/Detail";
   
   function App() {
     return (
       <div>
         <nav>
           <Link to="/">Main</Link>
           <Link to="/Detail">Detail</Link>
         </nav>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/Detail" element={<Detail />} />
         </Routes>
       </div>
     );
   }
       

   • <Link to="경로"> : 버튼/메뉴 등으로 표현 가능하며 클릭 시, 주소를 해당 경로로 바꿔줍니다.
   • <Routes> : 여러 개의 Route를 묶어줍니다.
   • <Route path="경로" element={컴포넌트} /> : 해당 경로에 컴포넌트를 보여줍니다.
3. 각 컴포넌트의 코드 예시

   // pages/Main.tsx
   const Main = () => {
     return <div>Main Page</div>;
   };
   export default Main;
   
   // pages/Detail.tsx
   const Detail = () => {
     return <div>Detail Page</div>;
   };
   export default Detail;
       

실제 작동 원리

• 링크를 클릭하면 브라우저의 주소가 바뀌고, 그에 맞는 이름의 컴포넌트가 나타납니다.
• 화면이 리렌더링 없이 빠르게 전환됩니다.
• 링크를 클릭하지 않아도 올바른 경로를 주소창에 입력하면 해당 컴포넌트가 나타납니다.

정리

• 리액트 라우터는 SPA에서 URL에 따라 컴포넌트를 다르게 보여주는 라이브러리입니다.
• BrowserRouter, Routes, Route, Link 등 다양한 컴포넌트로 라우팅을 손쉽게 구현할 수 있습니다.
• 중첩, 동적, 보호 라우트 등 다양한 고급 기능도 지원합니다.
• 리액트 라우터를 사용하면, 리액트 앱에서 여러 페이지가 있는 것처럼 자연스럽고 효율적인 내비게이션을 구현할 수 있습니다.

데이터사이언스의 기본 개념

1. 데이터사이언스란?

• 데이터사이언스는 데이터로부터 지식과 인사이트를 추출하는 융합 학문이다.
• 통계학, 컴퓨터과학, 수학, 정보공학, 패턴인식, 머신러닝, 데이터마이닝 등 다양한 분야의 방법론을 통합한다.
• 정형·비정형 데이터 모두를 다루며, 데이터 기반 문제 해결과 의사결정이 목적이다.

2. 데이터사이언스의 주요 영역

3. 데이터사이언스와 통계학의 차이

• 통계학은 데이터의 수집·정리·분석·해석에 초점을 둔 수학의 한 분야다.
• 데이터사이언스는 통계학을 포함해 컴퓨터과학, 인공지능, 데이터엔지니어링 등 실무적 응용까지 포괄한다.

4. 데이터사이언스의 핵심 프로세스

1. 문제 정의
2. 데이터 수집
3. 데이터 관리 및 저장
4. 데이터 탐색 및 시각화
5. 데이터 전처리
6. 모델링(머신러닝/통계분석 등)
7. 평가 및 해석
8. 의사결정 및 인사이트 도출

5. 주요 용어 정리

• 데이터마이닝: 대규모 데이터에서 패턴, 규칙, 인사이트를 발견하는 과정
• EDA(Exploratory Data Analysis): 탐색적 자료 분석, 데이터의 기본 특성 파악
• 정보 디자인: 복잡한 데이터를 시각적으로 쉽게 표현하는 기술
• 데이터 과학자: 데이터사이언스를 연구·실무하는 전문가

정리

데이터통신 핵심요약

1. 데이터와 신호, 전송 기본

• 아날로그 vs 디지털: 아날로그(연속값), 디지털(불연속값)
• PCM 변환 3단계: 표본화(Sampling) → 양자화(Quantizing) → 부호화(Encoding)
• 샘플링 정리(Nyquist): 샘플링 주파수 ≥ 2 × 최고 주파수(f_max)
• 전화 1회선 PCM 전송률: 8,000Hz × 8bit = 64kbps
• Eye Pattern: ISI(심볼간 간섭) 측정, 눈의 상하폭=잡음여유, 좌우폭=샘플링주기

2. 라인코딩(Line Coding) & 디지털 신호

• 맨체스터(Manchester) 코딩: 비트 중앙에서 항상 신호 반전(동기화↑)
• 양자화 잡음: 원 신호와 양자화 값의 차이, 레벨↑시 감소

3. 전송 속도, 대역폭, 채널 용량 공식

• 나이퀴스트(이상적, 잡음 無): C = 2W × log₂M

4. 전송 방식 & 매체

• 직렬 전송: 한 번에 한 비트(USB, LAN)
• 병렬 전송: 여러 비트 동시(컴퓨터 내부 버스)
• 동기식/비동기식: 프레임/문자 단위, 플래그/시작·종료 비트

5. 다중화(Multiplexing)

• SONET/SDH: 광통신 동기식 다중화 표준(OC-1, OC-3 등)
• Multiplexer/DEMUX: 다중화/복구 장치

6. 네트워크 토폴로지 & 회선구성

7. 교환 방식 & 데이터링크 계층 제어

• ARQ(Stop-and-Wait, Go-back-N, Selective Repeat): 오류 검출시 재전송
• FEC(Hamming 등): 리던던시로 수신측에서 직접 오류 정정
• 슬라이딩 윈도우: 흐름제어+오류제어, 윈도우 크기, ACK 번호
• Polling/Selection: Master-Slave 방식, Polling=Slave→Master, Selection=Master→Slave