웹 개발 공부를 하다 보면 “리액트(React)도 꼭 배워야 하나요?”라는 질문을 자주 듣습니다.
정답은 “네, 현대적인 웹개발을 하려면 꼭 알아야 하는 기술 중 하나입니다!”
하지만 걱정하지 마세요.
이번 글에서는 아주 기본적인 ToDo 리스트 앱을 만들면서 React의 핵심 개념인 컴포넌트, 상태(state), 이벤트 처리를 직접 경험해볼 수 있도록 준비했습니다.
🔎 React란 무엇인가요?
React는 페이스북(현 메타)이 만든 UI 라이브러리입니다.
한마디로 말하면, 사용자와 상호작용하는 웹앱을 빠르고 효율적으로 만들 수 있는 도구예요.
기존 HTML/CSS/JS 방식은 구조가 복잡해질수록 유지보수가 어려워지는데,
React는 코드를 컴포넌트 단위로 쪼개어 재사용성과 가독성을 높여줍니다.
🧱 개발 준비하기
React 앱을 만들려면 Node.js와 npm이 설치되어 있어야 해요.
준비가 되었다면 아래 명령어로 새 프로젝트를 시작해볼게요:
npx create-react-app todo-app
cd todo-app
npm start이제 브라우저에서 http://localhost:3000을 열면 React 앱이 실행됩니다.
기본 구조를 이해했다면, 이제 본격적으로 ToDo 리스트를 만들어볼 차례예요!
✍️ ToDo 리스트 만들기 – 코드
ToDo 기능은 크게 입력 → 추가 → 목록 표시로 나뉩니다.
우선 App.js 파일을 다음처럼 수정해볼게요:
import React, { useState } from 'react';
function App() {
const [input, setInput] = useState('');
const [todos, setTodos] = useState([]);
const addTodo = () => {
if (input.trim() === '') return;
setTodos([...todos, input]);
setInput('');
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>ToDo 리스트</h1>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="할 일을 입력하세요"
/>
<button onClick={addTodo}>추가</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
</div>
);
}
export default App;🔍 핵심 개념 설명
💡 useState()
React에서 가장 중요한 개념 중 하나인 상태(state)를 관리합니다.
- input은 입력창 값
- todos는 할 일 목록
💡 onChange 이벤트
입력창에 글자가 입력될 때마다 상태를 업데이트해줍니다.
💡 배열 렌더링
todos.map()을 통해 각각의 할 일을 <li>로 표시합니다.
👀 결과 화면은 이렇게 생겼어요
- 간단한 텍스트 입력창
- 추가 버튼
- 할 일 목록이 리스트로 표시
🧪 직접 추가해보면서 기능이 동작하는 걸 확인해보세요.
React의 매력을 처음 느낄 수 있는 순간일 거예요!
✅ 오늘 배운 내용 정리
| React | 사용자 인터페이스를 효율적으로 구성하는 라이브러리 |
| useState | 값의 변화를 감지하고 화면을 다시 렌더링하게 해줌 |
| 이벤트 처리 | 버튼 클릭, 입력 등 사용자 행동에 반응함 |
| JSX | HTML과 비슷하지만 JS로 동작하는 특별한 문법 |
React는 처음엔 낯설 수 있지만, 컴포넌트 기반 사고를 익히면 금방 재밌어져요.