최근 웹 개발 트렌드를 따라가다 보면 빠지지 않는 이름, 바로 React입니다.
Facebook이 개발한 React는 전 세계에서 가장 인기 있는 프론트엔드 라이브러리로, 동적인 웹페이지를 빠르고 효율적으로 만들 수 있는 도구입니다.
이번 글에서는 React를 처음 접하는 초보자를 위해 꼭 알아야 할 개념과 실습 방법을 차근차근 안내드릴게요.
React란 무엇인가요?
- 컴포넌트 기반의 UI 라이브러리
- 선언형 프로그래밍 방식으로 개발 효율 극대화
- SPA(Single Page Application) 구현에 적합
🧩 비유: React는 웹페이지를 작은 블록(Component)으로 나눠 조립하는 방식입니다. 유지보수성과 재사용성이 뛰어납니다.
사전 준비사항
| 항목 | 설명 |
|——|——|
| Node.js | React 실행을 위한 환경, 설치 링크 |
| npm 또는 yarn | 패키지 관리 도구 |
| 코드 편집기 | VS Code 추천 |
설치 확인 명령어:
“`bash
node -v
npm -v
“`
React 앱 생성하기 (CRA 사용)
“`bash
npx create-react-app my-app
cd my-app
npm start
“`
npx: 프로젝트 생성 도구create-react-app: 초기 세팅 자동화npm start: 개발 서버 실행
🖼️ ALT 태그 예시:
컴포넌트 구조 이해하기
“`jsx
function Welcome() {
return
안녕하세요, 리액트!
;
}
“`
- JSX 문법: HTML과 JavaScript를 혼합한 문법
- 컴포넌트는 함수로 작성하며
return값을 렌더링
상태(State)와 이벤트(Event)
“`jsx
import { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
현재 카운트: {count}
);
}
“`
| 개념 | 설명 |
|——|——|
| useState | 컴포넌트 내부 상태 저장 |
| onClick | 버튼 클릭 이벤트 처리 |
React 기초 실습 예제
간단한 “할 일 목록(Todo List)” 만들기:
“`jsx
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState(”);
const addTodo = () => {
setTodos([…todos, text]);
setText(”);
};
return (
setText(e.target.value)} />
{todos.map((todo, idx) =>
-
-
- {todo}
)}
-
);
}
“`
📌 위 예제는 상태 관리, 이벤트, 배열 처리 등 핵심 기능을 포함한 완성도 높은 입문 예시입니다.
자주 묻는 질문(FAQ)
- React는 프레임워크인가요?
→ 아니요, 라이브러리입니다. 그러나 생태계가 넓어 프레임워크처럼 느껴질 수 있습니다.
- TypeScript도 함께 배워야 하나요?
→ 추천은 하지만 초반엔 순수 JavaScript로 시작해도 충분합니다.
- React Native와 차이는?
→ React Native는 모바일 앱 개발용. 로직은 비슷하지만 플랫폼이 다릅니다.
입문자 추천 학습 리소스
마무리
React는 배우기 쉽지만, 정확한 개념 이해와 실습 병행이 중요합니다.
이번 입문 강좌에서 소개한 기본기만 잘 다져도 간단한 SPA 웹앱을 만들 수 있어요.
계속해서 실습과 프로젝트로 React 감각을 키워보세요!
🔎 다음 포스팅 주제 추천
→ 24번: 실무에서 많이 쓰이는 JavaScript 함수 모음
→ 31번: JavaScript 이벤트 핸들링 완벽 가이드
참고자료
- https://ko.legacy.reactjs.org/docs/getting-started.html
- https://scrimba.com/learn/learnreact