자바스크립트를 어느 정도 배웠다면 다음 단계로 리액트(React)를 배우는 경우가 많습니다. 구직 공고에도 자주 등장하고, 실무에서도 가장 많이 쓰이는 프론트엔드 라이브러리 중 하나이기 때문입니다. 이 글에서는 리액트가 무엇인지부터 개발 환경 설정, 핵심 개념까지 처음 배우는 사람도 따라갈 수 있도록 순서대로 정리했습니다.
📖 목차
1. 리액트란 무엇이고 왜 배워야 할까
2. 리액트 개발 환경 설정하는 방법
3. 기본 개념과 예제 코드 이해하기
4. 마무리
#1. 리액트란 무엇이고 왜 배워야 할까
1) 리액트가 뭔가요?
리액트(React)는 Meta(구 Facebook)가 2013년 오픈소스로 공개한 자바스크립트 라이브러리입니다. 정확히는 UI(사용자 인터페이스)를 만들기 위한 도구인데, 웹 페이지의 화면을 구성하는 부분에 특화되어 있습니다.
HTML, CSS, 자바스크립트로 웹을 직접 조작하는 방식과 달리, 리액트는 컴포넌트(Component) 방식으로 화면을 구성합니다. 화면을 작은 조각으로 나눠 만들고, 그 조각을 조합해서 전체 페이지를 완성하는 구조입니다.
💡 레고 블록에 비유하면, 버튼 하나도 하나의 블록(컴포넌트)입니다. 그 버튼 블록을 한 번 만들어두면 여러 곳에서 가져다 붙일 수 있습니다. 매번 새로 만들 필요 없이 재사용이 가능합니다.
· · · · ·
2) 왜 리액트를 배워야 할까
리액트가 꾸준히 인기 있는 이유는 몇 가지가 있습니다.
첫째, 실무 수요가 많습니다. 국내외 IT 기업 채용 공고에서 React는 프론트엔드 직군 거의 필수 요건입니다.
둘째, 생태계가 넓습니다. Next.js(서버사이드 렌더링), React Native(모바일 앱) 등 리액트를 기반으로 한 기술 스택이 다양해 배워두면 응용 범위가 넓습니다.
셋째, 컴포넌트 개념이 범용적입니다. 리액트의 컴포넌트 기반 개발 방식은 Vue, Svelte 등 다른 프레임워크를 배울 때도 개념이 연결됩니다.
#2. 리액트 개발 환경 설정하는 방법
1) Node.js 설치
리액트를 개발하려면 먼저 Node.js가 필요합니다. Node.js는 자바스크립트를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경이고, npm(Node Package Manager)이 함께 설치되어 라이브러리를 쉽게 관리할 수 있게 됩니다.
Node.js 공식 사이트(nodejs.org)에서 LTS 버전을 내려받아 설치합니다. 설치 후 터미널에서 아래 명령어로 정상 설치 여부를 확인합니다.
node -v
npm -v
각각 버전 번호가 출력되면 정상적으로 설치된 것입니다.
· · · · ·
2) Vite로 프로젝트 만들기
예전에는 create-react-app(CRA)으로 프로젝트를 시작하는 방법이 많이 쓰였지만, 현재는 Vite(비트)를 사용하는 방식이 권장됩니다. Vite는 빌드 속도가 훨씬 빠르고 설정이 간단합니다.
터미널에서 프로젝트를 만들 폴더로 이동한 뒤 아래 명령어를 순서대로 실행합니다.
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev
명령어를 실행하면 로컬 개발 서버가 시작되고, 브라우저에서 http://localhost:5173을 열면 리액트 앱이 실행됩니다.
· · · · ·
3) 폴더 구조 이해하기
Vite로 생성한 리액트 프로젝트의 기본 구조는 다음과 같습니다.
파일 / 폴더
역할
public/
정적 파일 보관 (아이콘, 이미지 등)
src/
실제 개발 코드가 들어가는 폴더
src/main.jsx
리액트 앱의 진입점 (최초 실행 파일)
src/App.jsx
최상위 컴포넌트 (화면 구성의 시작점)
package.json
프로젝트 설정 및 의존성 목록
vite.config.js
Vite 빌드 설정 파일
처음에는 src/App.jsx 파일만 수정하면서 연습하면 됩니다. 나머지 파일은 프로젝트가 커지면 자연스럽게 익히게 됩니다.
#3. 기본 개념과 예제 코드 이해하기
1) 컴포넌트(Component)
컴포넌트는 리액트의 가장 핵심 개념입니다. 화면을 구성하는 독립적인 조각이라고 이해하면 됩니다. 함수 형태로 작성하고, 반드시 JSX(HTML과 비슷한 문법)를 반환합니다.
// 간단한 컴포넌트 예제
function Hello() {
return <h1>안녕하세요, 리액트!</h1>;
}
JSX는 자바스크립트 안에 HTML처럼 생긴 코드를 작성할 수 있게 해주는 문법입니다. 리액트가 내부적으로 이 코드를 자바스크립트로 변환해서 화면에 보여줍니다.
JSX를 사용할 때 자주 만나는 규칙이 있습니다.
첫째, 반드시 하나의 최상위 태그로 감싸야 합니다. 여러 태그를 반환할 때는 <div> 또는 빈 태그(<></>)로 묶어야 합니다.
둘째, HTML의 class 속성 대신 className을 사용합니다. class가 자바스크립트 예약어이기 때문에 JSX에서는 className으로 씁니다.
셋째, 자바스크립트 표현식은 중괄호 {}로 감쌉니다. 변수 값을 화면에 출력하거나 함수를 연결할 때 사용합니다.
function Profile() {
const name = "채은";
return (
<>
<p className="intro">이름: {name}</p>
<p>직업: 개발자</p>
</>
);
}
· · · · ·
3) Props와 State
Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법입니다. 읽기 전용이기 때문에 자식은 받은 값을 그대로 화면에 사용합니다.
// 부모에서 값 전달
<Button label="클릭하세요" />
// 자식 컴포넌트에서 수신
function Button({ label }) {
return <button>{label}</button>;
}
State는 컴포넌트 안에서 변하는 데이터를 관리하는 방법입니다. useState 훅(Hook)을 사용하며, State 값이 바뀌면 화면이 자동으로 다시 렌더링됩니다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
⚠️ State는 직접 수정하면 안 됩니다. 반드시 setCount처럼 setter 함수를 통해 값을 바꿔야 화면이 정상적으로 업데이트됩니다. count = count + 1처럼 직접 대입하면 화면이 바뀌지 않습니다.
#4. 마무리
리액트를 처음 배울 때 가장 중요한 개념은 세 가지입니다.
첫째, 컴포넌트로 화면을 나누는 방식을 이해하는 것.
둘째, JSX 문법에 익숙해지는 것.
셋째, Props와 State로 데이터를 다루는 방법을 익히는 것.
이 세 가지를 이해하면 리액트의 기본 흐름이 보이기 시작합니다.
환경 설정은 Node.js 설치 후 Vite로 프로젝트를 만드는 방식이 현재 기준 가장 일반적입니다. npm create vite@latest 한 줄로 시작할 수 있으니, 직접 코드를 치면서 익히는 것이 가장 빠른 방법입니다.
이 글이 리액트를 처음 시작하는 데 도움이 되었으면 합니다.
