프론트엔드 개발을 시작하려고 하면 꼭 나오는 이름이 있죠. 바로 React입니다. 저도 처음에는 “그냥 JavaScript로 하면 안 되나?”라고 생각했어요. 근데 실제로 써보니까 왜 다들 React를 쓰는지 바로 이해됐습니다.

React가 뭔가요?

React는 Facebook(현 Meta)에서 만든 JavaScript 라이브러리예요. 2013년에 오픈소스로 공개됐고, 지금은 전 세계에서 가장 인기 있는 프론트엔드 도구가 됐습니다.

핵심은 뭐냐면, UI를 컴포넌트 단위로 쪼개서 만든다는 거예요. 레고 블록처럼요.

예를 들어볼게요. 네이버 메인 페이지를 생각해보세요.

• 상단 검색바 = 하나의 컴포넌트
• 뉴스 섹션 = 하나의 컴포넌트
• 광고 배너 = 하나의 컴포넌트
• 로그인 박스 = 하나의 컴포넌트

이렇게 쪼개놓으면 뭐가 좋냐면, 검색바에 문제가 생겨도 뉴스 섹션은 그대로 작동해요. 수정도 검색바만 고치면 됩니다.

왜 React를 써야 할까?

1. Virtual DOM으로 빠른 렌더링

일반 JavaScript로 웹페이지를 업데이트하면, 브라우저가 전체 페이지를 다시 그려요. 근데 React는 “가상 DOM”이라는 걸 사용해서 바뀐 부분만 업데이트합니다.

쉽게 말하면 이렇게 생각하면 돼요:

일반 JS: 방 전체를 부수고 다시 짓기
React: 벽지만 새로 바르기

당연히 React가 빠르겠죠?

2. 컴포넌트 재사용

버튼 하나를 만들었다고 해봅시다. 이 버튼이 10군데에서 필요하면 어떻게 할까요?

일반 HTML이라면 같은 코드를 10번 복붙해야 해요. 근데 React는?

// Button 컴포넌트 한 번만 만들면
function Button({ text }) {
  return <button className="my-btn">{text}</button>;
}

// 어디서든 가져다 쓰면 됨
<Button text="로그인" />
<Button text="회원가입" />
<Button text="구매하기" />

실행 결과:

버튼 디자인을 바꾸고 싶으면? Button 컴포넌트 하나만 수정하면 10군데가 전부 바뀝니다.

3. 거대한 생태계

React를 쓰면 엄청난 양의 라이브러리를 가져다 쓸 수 있어요.

• 상태 관리? Redux, Zustand, Recoil
• 라우팅? React Router
• UI 컴포넌트? Material-UI, Chakra UI, Ant Design
• 애니메이션? Framer Motion
• 데이터 페칭? React Query, SWR

뭔가 필요하면 npm에서 검색하면 거의 다 있습니다.

4. 취업 시장에서 압도적

2024년 기준으로 프론트엔드 채용 공고의 70% 이상이 React를 요구해요. Vue나 Angular도 있지만, React가 압도적입니다.

저도 취업 준비할 때 React 할 줄 안다고 하니까 면접 기회가 훨씬 많았어요.

React의 핵심 개념 미리보기

앞으로 배울 내용들을 간단히 정리해볼게요.

JSX

HTML처럼 생겼는데 JavaScript 안에서 쓸 수 있는 문법이에요.

const element = <h1>안녕하세요!</h1>;

실행 결과:

처음 보면 좀 어색한데, 금방 익숙해집니다.

컴포넌트

UI를 독립적인 조각으로 나눈 거예요. 함수형 컴포넌트가 요즘 표준입니다.

function Welcome() {
  return <h1>환영합니다!</h1>;
}

Props

컴포넌트에 데이터를 전달하는 방법이에요. 부모가 자식에게 값을 넘겨주는 거죠.

State

컴포넌트 내부에서 변하는 데이터를 관리해요. 버튼 클릭 횟수, 입력값 같은 거요.

Hooks

함수형 컴포넌트에서 상태나 생명주기를 다루는 기능이에요. useState, useEffect 같은 게 있습니다.

React 배우기 전에 알아야 할 것들

React를 바로 시작하기 전에 이것들은 먼저 익혀두세요.

필수:

• HTML 기본 태그
• CSS 기본 스타일링
• JavaScript 기초 (변수, 함수, 배열, 객체)
• ES6 문법 (화살표 함수, 구조분해, spread 연산자)

하면 좋은 것:

• Git 기본 사용법
• npm/yarn 패키지 매니저
• VS Code 에디터

JavaScript ES6 문법은 특히 중요해요. React 코드의 80%는 사실 JavaScript거든요.

다음 단계

다음 글에서는 실제로 React 프로젝트를 생성하는 방법을 다룰 거예요. Vite를 사용해서 빠르게 React 앱을 만들어보겠습니다.

솔직히 React가 처음에는 어려워 보일 수 있어요. 저도 그랬고요. 근데 컴포넌트 개념만 이해하면 나머지는 자연스럽게 따라옵니다.

하나씩 차근차근 해보면 생각보다 금방 익숙해질 거예요!

---

React 시리즈 다음 글:

• 다음: React App 생성하기 - Vite로 프로젝트 시작하기

← 블로그 목록으로