리액트 useState란?

useState는 리액트에서 제공하는 훅(Hook) 중 하나로, 함수형 컴포넌트에서 상태(state)를 관리할 수 있게 해줍니다.
상태란 시간이 지남에 따라 변경될 수 있는 값으로, 예를 들어 버튼 클릭 횟수, 입력 값, 토글 상태 등이 모두 상태에 해당합니다.
useState를 사용하면 컴포넌트가 기억해야 하는 값을 저장하고, 그 값이 바뀔 때마다 컴포넌트가 다시 렌더링됩니다.

useState 사용법

기본 문법

const [상태변수, 상태변경함수] = useState(초기값);

• 상태변수: 현재 상태 값을 저장합니다.
• 상태변경함수: 상태를 변경할 때 사용하는 함수입니다.
• 초기값: 상태의 초기값을 설정합니다.

예시: 카운터 컴포넌트

import React, { useState } from 'react';

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

  const addCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={addCount}>Add</button>
    </div>
  );
}

• count는 현재 카운트 값을 저장하는 상태 변수입니다.
• setCount는 count 값을 변경할 때 사용하는 함수입니다.
• 버튼을 클릭하면 addCount 함수가 실행되고, setCount를 통해 count 값이 1 증가합니다.
• count 값이 바뀌면 컴포넌트가 자동으로 리렌더링되어 새로운 값이 화면에 표시됩니다.

상태를 업데이트하는 두 가지 방법

1. 값 직접 업데이트
   

   const addCount = () => {
     setCount(1);
   };

   count 값을 1로 직접 설정합니다.
2. 함수형 업데이트
   

   const addCount = () => {
     setCount(prevCount => prevCount + 1);
   };

   이전 상태 값을 기반으로 새로운 상태를 계산할 때 사용합니다. 여러 번 연속해서 상태를 변경할 때, 또는 최신 상태 값을 안전하게 사용하고 싶을 때 권장됩니다.

여러 상태를 객체로 관리하기

여러 개의 입력 필드나 관련된 데이터를 하나의 객체로 묶어서 관리할 수도 있습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });

  const { username, message } = form;

  const onChange = e => {
    const { name, value } = e.target;
    setForm({
      ...form,
      [name]: value
    });
  };

  return (
    <div>
      <input
        type="text"
        name="username"
        placeholder="유저명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="메시지"
        value={message}
        onChange={onChange}
      />
    </div>
  );
};

• 여러 입력 값을 하나의 상태 객체(form)로 관리할 수 있습니다.
• onChange 핸들러에서 setForm을 통해 각 필드의 값을 업데이트합니다.

정리

• useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 훅입니다.
• 상태가 변경될 때마다 컴포넌트가 자동으로 리렌더링됩니다.
• 상태 변경 함수는 비동기적으로 동작하므로, 연속해서 상태를 변경할 때는 함수형 업데이트 방식을 사용하는 것이 안전합니다.
• 여러 상태를 객체로 묶어 관리하면 코드가 더 깔끔해지고 유지보수가 쉬워집니다.

useState를 잘 활용하면 리액트 컴포넌트의 동적인 UI와 데이터를 효과적으로 관리할 수 있습니다.

데이터 수집

데이터 분석의 첫걸음은 신뢰할 수 있는 데이터를 확보하는 것이다. 이 글에서는 데이터 수집의 다양한 방법, 데이터의 유형, 그리고 데이터 수집 시 주의해야 할 점을 중심으로 학습한다.

1. 데이터 수집의 목적과 중요성

• 데이터 수집은 분석의 출발점으로, 데이터의 품질이 전체 분석 결과의 신뢰도와 직결된다.
• 정확하고 대표성 있는 데이터를 수집해야만 의미 있는 분석이 가능하다.

2. 데이터 수집 방법의 종류

데이터는 다양한 방법으로 수집할 수 있다. 아래 표는 대표적인 데이터 수집 방법과 특징을 정리한 것이다.

3. 데이터의 유형과 특징

• 정형 데이터: 표 형태로 구조화된 데이터(엑셀, DB 등)
• 비정형 데이터: 텍스트, 이미지, 음성 등 구조화되지 않은 데이터
• 정형 데이터는 분석이 용이하고, 비정형 데이터는 전처리와 변환이 필요하다.

4. 데이터 수집 시 고려사항

• 데이터의 신뢰성, 정확성, 최신성, 대표성 확보
• 윤리적/법적 문제(개인정보, 저작권 등) 준수
• 데이터 포맷(정형/비정형, CSV, JSON, XML 등) 이해

5. 데이터 수집의 자동화와 실무 도구

• 파이썬의 requests, BeautifulSoup, Selenium 등으로 웹스크래핑 자동화
• API 활용을 통한 실시간 데이터 수집
• 센서, IoT 기기와 연동한 자동 데이터 수집

6. 용어 정리

• 웹스크래핑: 웹페이지에서 데이터 추출 자동화
• API: 데이터 제공을 위한 프로그래밍 인터페이스
• 크롤링: 웹사이트를 자동으로 탐색하며 데이터 수집

정리 

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

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

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 + 함수형 컴포넌트 방식이 가장 많이 쓰인다고 합니다.