데이터사이언스의 기반지식 학습

데이터사이언스는 다양한 분야의 지식이 융합된 학문이다. 이 글에서는 데이터사이언스를 공부하고 실무에 활용하기 위해 반드시 알아야 할 수학, 통계, 프로그래밍, 데이터베이스 등 기반지식과 그 내용들을 다룬다.

1. 데이터사이언스의 기초 역량

• 데이터사이언스는 수학적 사고력과 통계적 해석력, 프로그래밍 능력, 데이터베이스 이해가 모두 요구된다.
• 기초 수학(미적분, 선형대수), 확률과 통계, 프로그래밍(Python, R 등), 데이터베이스(SQL 등) 능력이 필수적이다.
• 실제 데이터 분석, 모델링, 시각화 등 실무에서 이 모든 지식이 유기적으로 활용된다.

2. 데이터사이언스의 수학적·통계적 기초

데이터사이언스에서 수학과 통계는 데이터의 구조를 이해하고, 패턴을 발견하며, 분석 결과를 해석하는 데 필수적이다. 아래 표는 각 분야별 주요 내용을 정리한 것이다.

3. 데이터사이언스 실무를 위한 도구와 환경

• Python, R: 데이터분석, 머신러닝, 시각화에 가장 널리 쓰이는 언어
• Pandas, Numpy: 데이터 처리와 수치 연산을 위한 대표 라이브러리
• Scikit-learn: 머신러닝 모델 구현 및 평가
• SQL: 데이터베이스에서 데이터 추출 및 조작
• Jupyter Notebook, Anaconda: 데이터 분석 환경 관리와 문서화

4. 데이터사이언스 학습 영역의 예시

데이터사이언스는 단순히 이론을 배우는 것에 그치지 않고, 실제 데이터를 다루는 실습과 프로젝트 경험이 매우 중요하다. 아래는 데이터사이언스에서 다루는 주요 학습 영역이다.

• 데이터 수집, 전처리, 탐색, 시각화
• 통계적 분석, 가설검정, 예측모델링
• 머신러닝(지도/비지도/강화학습), 딥러닝
• 데이터베이스 설계 및 활용
• 실무 프로젝트 및 데이터 기반 문제 해결

5. 용어 정리

• 벡터/행렬: 다차원 데이터 구조, 선형대수의 기본
• 확률분포: 데이터가 가질 수 있는 값들의 분포
• 가설검정: 통계적 주장에 대한 검증 방법
• EDA: 데이터의 특성을 탐색적으로 분석

정리

리액트에서의 타입 연결

컴포넌트가 어떤 props(프롭스)를 받을지 타입스크립트로 명확하게 정의하면 컴포넌트를 사용할 때 타입 오류를 미리 잡을 수 있고, 코드가 자동완성되어 일의 능률이 올라갑니다.

타입스크립트에서 props 타입을 지정하는 방법

1) 인터페이스(interface)로 props 타입 정의

interface RankingProps {
  movie: Movie;
}

• 이 예시에서 RankingProps는 Ranking 컴포넌트가 받을 props의 타입을 정의합니다.
• movie라는 이름의 prop이 반드시 들어와야 하고, 그 타입은 Movie여야 한다는 뜻입니다.

2) 컴포넌트에 타입 연결

const Ranking = (props: RankingProps) => {
  const { movie } = props;
  // ...
};

• 함수의 매개변수(props)에 RankingProps 타입을 지정합니다.
• 이렇게 하면 props.movie를 쓸 때 타입스크립트가 타입을 체크합니다.

3) 구조분해 할당과 타입 연결

const Ranking = ({ movie }: RankingProps) => {
  // movie는 Movie 타입으로 자동 인식됨
};

• 구조분해 할당을 이용하여 props를 꺼내 쓸 수 있습니다.
• 이와 같은 경우에도 movie의 타입이 자동으로 Movie로 지정됩니다.

2. 프로젝트 내의 Ranking 컴포넌트에 적용

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 = ({ movie }: RankingProps) => {
  return (
    <StyledRanking>
      <Link to={`/detail/${movie.id}`}>
        <p>{movie.title}</p>
        <p>{movie.thumbnail}</p>
        <p>{movie.id}</p>
      </Link>
    </StyledRanking>
  );
};

export default Ranking;

• RankingProps라는 타입을 만들어서 props 타입을 명확히 했습니다
• 부모 컴포넌트가 <Ranking movie={movie} />로 movie 객체를 넘기면 Ranking 컴포넌트는 movie가 반드시 Movie 타입임을 보장받습니다.

타입 연결의 장점

• 오타나 잘못된 타입 사용을 미리 방지할 수 있습니다.
• 자동완성이 잘 동작해서 개발이 편리해집니다.
• 컴포넌트가 어떤 데이터를 기대하는지 명확하게 드러납니다.

children 타입 명시

만약 컴포넌트가 children(태그 사이의 내용)도 받는다면, 이렇게 타입을 추가할 수 있습니다.

interface MyComponentProps {
  color: string;
  children?: React.ReactNode;
}

• children?: React.ReactNode를 추가하면, <MyComponent color="red">내용</MyComponent>처럼 사용할 수 있습니다.

정리

• interface 또는 type으로 props의 타입을 정의합니다.
• 컴포넌트의 매개변수에 그 타입을 연결합니다.
• 부모 컴포넌트가 올바른 타입의 데이터를 넘기지 않으면 에러가 발생합니다.
• 타입스크립트와 함께 쓰면 리액트 컴포넌트의 안전성과 개발 효율이 크게 올라갑니다.

참고: 타입 연결 방식에는 interface, type, React.FC 등 여러 가지가 있지만, 요즘은 interface/type + 함수형 컴포넌트 방식이 가장 많이 쓰인다고 합니다.

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