정정지용
기술스택 목록
프론트엔드

React

프로젝트 6개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

재사용 가능한 컴포넌트로 사용자 인터페이스를 선언적으로 구축하는 자바스크립트 라이브러리

React는 UI를 컴포넌트 단위로 쪼개고, 데이터(state)가 바뀔 때마다 화면을 자동으로 다시 그려주는 자바스크립트 라이브러리입니다. DOM을 직접 조작하며 상태를 관리하던 방식이 코드 규모가 커질수록 복잡해지고 버그가 늘어나는 문제를 해결하기 위해 만들어졌습니다. 개발자는 '현재 상태에서 화면이 어떻게 보여야 하는가'만 선언하면, React가 실제 DOM 업데이트를 알아서 처리합니다. 이런 컴포넌트 기반 구조 덕분에 대시보드, 어드민 화면, 관리자 콘솔처럼 화면 요소가 많고 반복되는 UI를 일관되게 구성하기 쉽습니다.

이럴 때 사용합니다

  • 화면 요소가 많고 상태 변화가 잦은 대시보드나 관리자 UI를 만들 때
  • 재사용 가능한 컴포넌트로 여러 화면에서 UI를 일관되게 유지하고 싶을 때
  • 생태계가 넓어 라우팅, 상태 관리 등 다양한 라이브러리와 조합하기 쉬울 때

핵심 개념

Component
UI의 한 조각을 독립적인 함수나 클래스로 정의한 단위로, 조합해서 전체 화면을 구성한다.
JSX
자바스크립트 코드 안에 HTML과 비슷한 문법으로 UI 구조를 작성할 수 있게 해주는 확장 문법이다.
State
컴포넌트가 가지는 데이터로, 값이 바뀌면 해당 컴포넌트와 하위 UI가 다시 렌더링된다.
Props
부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터로, 컴포넌트 간 데이터 흐름을 만든다.
Virtual DOM
실제 DOM을 직접 조작하는 대신 메모리상의 가상 트리를 비교해 변경된 부분만 반영하는 내부 동작 방식이다.
Hooks
함수형 컴포넌트에서 상태나 생명주기 같은 기능을 사용할 수 있게 해주는 함수들(useState, useEffect 등)이다.

가장 기본적인 React 컴포넌트

버튼을 클릭할 때마다 state가 변경되고, React가 화면의 숫자 부분만 자동으로 다시 렌더링합니다.

JavaScript
import { useState } from 'react';

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

  return (
    <div>
      <p>현재 값: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

export default Counter;

처음 쓸 때 흔한 함정

  • state를 직접 수정하지 않고 반드시 setter 함수를 통해 갱신해야 화면이 리렌더링된다
  • useEffect 등 훅의 의존성 배열을 잘못 지정하면 무한 렌더링이나 오래된 값 참조가 발생한다
  • props와 state를 혼동하면 데이터 흐름 방향(부모→자식)이 꼬여 예측 못한 동작이 생긴다

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Node.js3Shell Script3TypeScript3Next.js2Ant DesignClaude CLIClaude Code CLIcracoCreate React AppDockerExpressGit Hooks