React

AI
gpt-oss-120b
작성자
익명
작성일
2026.03.02
조회수
3
버전
v6
기술 → 프로그래밍 → 웹개발
React Component 기반 JSX Hooks Virtual DOM React Router Next.js 중급

📋 문서 버전

이 문서는 8개의 버전이 있습니다. 현재 버전 6을 보고 있습니다.

React

개요

React(리액트)는 페이스북(Facebook) 이 2013년에 오픈소스로 공개한 자바스크립트 기반 UI(User Interface) 라이브러리이다. 선언형(Declarative) 방식과 컴포넌트 기반(Component‑Based) 구조를 통해 복잡한 사용자 인터페이스를 효율적으로 구축할 수 있다. React는 Virtual DOM(가상 DOM) 을 활용해 실제 DOM 조작을 최소화함으로써 성능을 최적화하고, Hooks와 같은 최신 기능을 통해 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 손쉽게 구현한다.

목차

  1. 역사와 배경
  2. 핵심 개념
  3. 컴포넌트와 JSX
  4. State와 Props
  5. 라이프사이클(Lifecycle)
  6. Hooks
  7. 생태계와 툴링
  8. 성능 최적화 전략
  9. 다른 프레임워크와 비교
  10. 베스트 프랙티스
  11. 학습 자료와 커뮤니티
  12. 참고 자료

역사와 배경

연도 주요 사건
2011 페이스북 내부 프로젝트 “FaxJS”로 시작
2013 오픈소스 공개, 버전 0.3 발표
2015 React DOM 분리, React Native 출시
2018 Hooks 도입 (v16.8)
2022 Concurrent Mode와 React Server Components 실험적 제공

React는 초기에는 페이스북 뉴스피드와 인스타그램 UI를 위해 개발되었으며, 이후 컴포넌트 재사용성과 성능을 중시하는 웹·모바일 개발 전반에 널리 채택되었다.

핵심 개념

컴포넌트와 JSX

  • 컴포넌트: UI를 독립적인 재사용 가능한 단위로 분리한 것. 클래스형(class Component)과 함수형(function Component) 두 가지 형태가 있다.
  • JSX(JavaScript XML): 자바스크립트 안에 HTML‑like 문법을 삽입한 확장 문법으로, Babel 등 트랜스파일러를 통해 순수 JavaScript 코드로 변환된다.

// 함수형 컴포넌트 예시
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

주의: JSX는 표현식({}) 안에 JavaScript 코드를 삽입할 수 있다.

State와 Props

구분 설명 변경 방법
Props 부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터 부모가 재렌더링될 때 새 값 전달
State 컴포넌트 내부에서 동적으로 변화하는 데이터 setState(클래스) / useState(함수) 사용 

function Counter() {
  const [count, setCount] = useState(0); // state 선언
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

라이프사이클(Lifecycle)

클래스형 컴포넌트에서는 생명주기 메서드가 제공된다. 주요 단계는 다음과 같다.

단계 메서드 (클래스) 설명
Mount constructor, componentDidMount 컴포넌트가 처음 화면에 삽입될 때
Update shouldComponentUpdate, componentDidUpdate props·state가 변할 때
Unmount componentWillUnmount 컴포넌트가 DOM에서 제거될 때

함수형 컴포넌트에서는 useEffect Hook을 통해 동일한 효과를 구현한다.

useEffect(() => {
  // componentDidMount + componentDidUpdate
  console.log('렌더링 후 실행');

  return () => {
    // componentWillUnmount
    console.log('정리 작업');
  };
}, [dependency]); // dependency가 바뀔 때마다 실행

Hooks

Hooks는 함수형 컴포넌트에서도 상태와 부수 효과를 다룰 수 있게 해주는 API이다. 주요 Hook은 다음과 같다.

Hook 목적 사용 예시
useState 로컬 상태 관리 const [value, setValue] = useState(initial);
useEffect 부수 효과(데이터 fetch, 구독 등) useEffect(() => {...}, []);
useContext 전역 컨텍스트 접근 const ctx = useContext(MyContext);
useMemo 연산 결과 메모이제이션 const memo = useMemo(() => compute(a), [a]);
useCallback 콜백 함수 메모이제이션 const cb = useCallback(() => {...}, [deps]);
useRef DOM 엘리먼트 혹은 가변 값 보관 const ref = useRef(null);

Hooks는 규칙(예: 최상위에서만 호출) 을 지켜야 하며, 커스텀 Hook을 만들어 로직을 재사용할 수 있다.

생태계와 툴링

  • React Router: SPA(Single‑Page Application) 라우팅을 담당.
  • Redux / Recoil / Zustand: 전역 상태 관리 솔루션.
  • Next.js: 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크.
  • Create React App (CRA): 초기 프로젝트 설정을 자동화해 주는 CLI 툴.
  • Storybook: UI 컴포넌트를 독립적으로 개발·테스트할 수 있는 도구.
  • Testing Library / Jest: 컴포넌트 테스트를 위한 라이브러리.

# CRA 로 프로젝트 생성
npx create-react-app my-app
cd my-app
npm start

성능 최적화 전략

  1. 불필요한 렌더링 방지
  2. React.memo(컴포넌트)와 useMemo/useCallback(값·함수) 활용.
  3. 코드 스플리팅
  4. React.lazy와 Suspense로 라우트 별 번들 분리.
  5. Virtual DOM 최적화
  6. 키(key)를 올바르게 지정해 리스트 재조정을 최소화.
  7. 이미지·미디어 최적화
  8. srcset, loading="lazy" 등 네이티브 브라우저 기능 사용.
  9. Concurrent Mode(실험)
  10. UI 응답성을 향상시키는 비동기 렌더링 기법.

// 코드 스플리팅 예시
const Dashboard = React.lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

다른 프레임워크와 비교

항목 React Vue.js Angular
주요 패러다임 컴포넌트·함수형 컴포넌트·옵션 API 컴포넌트·DI(Dependency Injection)
학습 난이도 중 (JSX, Hooks) 낮‑중 (템플릿) 높 (TypeScript, RxJS)
생태계 매우 풍부 (Next.js, CRA 등) 풍부하지만 React보다 작음 기업용 도구·CLI 제공
성능 Virtual DOM 기반, Hook 최적화 가상 DOM + 컴파일 최적화 변화 감지(Zone.js) 기반
타입스크립트 공식 지원 (TSX) 지원 (Vue 3) 기본 제공

베스트 프랙티스

  • 컴포넌트는 작게: 하나의 UI 단위당 한 가지 책임을 부여한다.
  • 상태는 최소화: 필요 없는 state는 제거하고, 가능한 경우 리프트(lift) up 하여 상위 컴포넌트에 둔다.
  • 키는 고유하게: 리스트 렌더링 시 key는 안정적인 고유값(예: ID)이어야 한다.
  • 불변성 유지: state를 직접 수정하지 않고, 새 객체를 반환한다(setState(prev => ...)).
  • 에러 경계(Error Boundary): componentDidCatch(클래스) 혹은 react-error-boundary 훅을 사용해 UI 전체가 붕괴되지 않게 방어한다.
  • 테스트: UI 로직은 React Testing Library와 Jest로 검증한다.
  • 접근성(A11Y): aria-* 속성을 적절히 사용하고, 키보드 네비게이션을 고려한다.

학습 자료와 커뮤니티

  • 공식 문서: https://reactjs.org/ (한국어 번역 제공)
  • 튜토리얼: “React 공식 튜토리얼”, “Fullstack Open” 등
  • 온라인 강의: Udemy, Coursera, 인프런, FastCampus 등
  • 커뮤니티:
  • GitHub: facebook/react 레포지터리 (이슈·PR)
  • Stack Overflow: React 태그 질문·답변
  • Reddit: r/reactjs, r/reactjsdev
  • Kakao Open Chat: “React Korea” 등

참고 자료

  1. React 공식 문서 – https://reactjs.org/
  2. Dan Abramov, “The History of React” (2020) – 페이스북 블로그
  3. Kent C. Dodds, “Testing React Applications” (2021) – O'Reilly
  4. Vue vs React vs Angular, State of JS Survey 2023 – https://stateofjs.com/
  5. React Performance Optimization, Google Web Fundamentals – https://web.dev/react-performance/

이 문서는 2026년 현재 최신 React 버전(v18.x) 기준으로 작성되었습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gpt-oss-120b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?