프레임워크 · 2013년 공개
React는 화면을 컴포넌트 단위로 나눠 선언적으로 만드는 JavaScript UI 라이브러리로, 상태가 바뀌면 필요한 부분만 다시 그립니다.
React는 Meta(당시 Facebook)가 만들어 2013년에 오픈 소스로 공개한 사용자 인터페이스 라이브러리입니다. 화면을 컴포넌트라는 작은 함수 단위로 나누고, 각 컴포넌트가 받은 props와 자신의 상태(state)에 따라 어떤 모습이어야 하는지를 JSX로 선언합니다. 데이터가 바뀌면 React가 이전 결과와 비교해 실제로 달라진 부분만 DOM에 반영합니다.
React는 버튼, 입력 폼, 목록처럼 상호작용이 많은 화면에서 특히 힘을 발휘합니다. 단일 페이지 애플리케이션, 대시보드, 관리 화면, 사내 디자인 시스템에 널리 쓰이며, Next.js 같은 프레임워크와 함께 서버 렌더링 웹사이트를 만들거나 React Native로 모바일 앱을 만들 때도 같은 사고방식을 그대로 씁니다. 라우팅, 데이터 요청, 테스트 도구 등 생태계가 넓어 필요한 부품을 골라 조합할 수 있습니다.
처음 배운다면 react.dev 공식 문서의 빠르게 시작하기와 틱택토 튜토리얼을 따라 해 보는 것을 권합니다. 공식 문서는 새 제품에 Next.js 같은 프레임워크를 권하지만, 학습용으로는 Vite로 만든 단순한 프로젝트가 구조를 이해하기 쉽습니다. 배열 메서드, 구조 분해, 모듈 같은 최신 JavaScript 문법을 먼저 익혀 두면 JSX와 훅을 훨씬 수월하게 이해할 수 있습니다.
화면을 독립적인 함수 컴포넌트로 나누고, props로 데이터를 넘기며 작은 부품을 조합해 큰 화면을 만듭니다.
DOM을 직접 바꾸는 대신 상태에 따른 결과 화면을 JSX로 적으면, React가 바뀐 부분만 효율적으로 갱신합니다.
useState, useEffect, useRef, useContext 같은 훅으로 상태, 부수 효과, DOM 참조, 공유 데이터를 함수 안에서 다룹니다.
Next.js, React Router, TanStack Query, React Native 등 검증된 도구와 함께 웹부터 모바일까지 같은 방식으로 개발할 수 있습니다.
React 개발 도구는 Node.js 위에서 동작합니다. nodejs.org에서 LTS 버전을 설치한 뒤 node와 npm의 버전이 표시되는지 확인합니다.
node --version && npm --versionVite의 react-ts 템플릿으로 TypeScript를 쓰는 React 프로젝트를 만듭니다. JavaScript만 쓰려면 템플릿 이름을 react로 바꿉니다.
npm create vite@latest my-app -- --template react-ts프로젝트 폴더로 이동해 의존성을 설치하고 개발 서버를 실행합니다. 터미널에 표시된 주소(기본 http://localhost:5173)를 브라우저에서 엽니다.
cd my-app && npm install && npm run devsrc/App.tsx의 App 함수는 화면에 그릴 내용을 JSX로 반환하는 컴포넌트입니다. useState 훅으로 count 상태를 만들고, 버튼을 누르면 setCount가 값을 바꿉니다. 상태가 바뀌면 React가 App을 다시 호출해 달라진 숫자만 화면에 반영합니다. 개발 서버가 켜져 있으면 파일을 저장할 때마다 브라우저가 곧바로 갱신됩니다.
src/App.tsx
import { useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
return (
<main>
<h1>Hello, React!</h1>
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
</main>
);
}
npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev설치부터 React 의 핵심 개념까지, 여섯 장으로 차근차근 따라 합니다.
React 에 관해 묻고, 경험을 나누고, 의견을 주고받는 곳입니다.
아직 토론이 없습니다. 첫 이야기를 시작해 보세요.
댓글 0개
로그인 · 로그인하면 댓글을 남길 수 있습니다.