REACT 요약정리
Posted by Albert 67Day 10Hour 32Min 54Sec ago [2025-12-01]
1. React란?
React는 Facebook(Meta)에서 만든 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리입니다. 웹페이지를 컴포넌트(부품)로 나누어 관리할 수 있게 해줍니다.
2. 환경 설정
가장 쉬운 시작 방법:
npx create-react-app my-app cd my-app npm start
3. JSX - React의 기본 문법
JSX는 JavaScript 안에서 HTML처럼 보이는 코드를 작성할 수 있게 해줍니다.
function Welcome() {
const name = "철수";
return (
<div>
<h1>안녕하세요, {name}님!</h1>
<p>React에 오신 것을 환영합니다.</p>
</div>
);
}
주의사항:
- 하나의 부모 요소로 감싸야 합니다
- className을 사용합니다 (class 대신)
- 중괄호 {} 안에 JavaScript 표현식을 넣을 수 있습니다
4. 컴포넌트 (Components)
컴포넌트는 UI의 재사용 가능한 조각입니다.
함수형 컴포넌트 (권장):
function Button(props) {
return <button>{props.text}</button>;
}
// 사용
<Button text="클릭하세요" />
5. Props - 데이터 전달하기
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달합니다.
function Greeting(props) {
return <h1>안녕하세요, {props.name}님!</h1>;
}
function App() {
return (
<div>
<Greeting name="영희" />
<Greeting name="철수" />
</div>
);
}
6. State - 상태 관리 (useState)
컴포넌트의 동적인 데이터를 관리합니다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>현재 카운트: {count}</p>
<button onClick={() => setCount(count + 1)}>
증가
</button>
<button onClick={() => setCount(count - 1)}>
감소
</button>
</div>
);
}
7. 이벤트 처리
사용자의 행동에 반응합니다.
function LoginForm() {
const [email, setEmail] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
alert(`입력한 이메일: ${email}`);
};
return (
<form onSubmit={handleSubmit}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="이메일을 입력하세요"
/>
<button type="submit">제출</button>
</form>
);
}
8. 조건부 렌더링
조건에 따라 다른 UI를 보여줍니다.
function UserGreeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>다시 오신 것을 환영합니다!</h1>;
}
return <h1>로그인해주세요.</h1>;
}
// 또는 삼항 연산자 사용
function Status({ isOnline }) {
return (
<div>
{isOnline ? ' 온라인' : ' 오프라인'}
</div>
);
}
9. 리스트 렌더링
배열 데이터를 화면에 표시합니다.
function TodoList() {
const todos = ['장보기', '공부하기', '운동하기'];
return (
<ul>
{todos.map((todo, index) => (
<li key={index}>{todo}</li>
))}
</ul>
);
}
10. useEffect - 부수 효과 처리
컴포넌트가 렌더링될 때 특정 작업을 수행합니다.
import { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prev => prev + 1);
}, 1000);
// 정리(cleanup) 함수
return () => clearInterval(interval);
}, []); // 빈 배열: 컴포넌트 마운트 시 한 번만 실행
return <div>경과 시간: {seconds}초</div>;
}
11. 실전 예제 - Todo 앱
지금까지 배운 내용을 모두 활용한 예제를 만들어드리겠습니다.
import { useState } from 'react';
export default function TodoApp() {
const [todos, setTodos] = useState([]);
const [input, setInput] = useState('');
const [filter, setFilter] = useState('all'); // all, active, completed
// 할 일 추가
const addTodo = (e) => {
e.preventDefault();
if (input.trim() === '') return;
const newTodo = {
id: Date.now(),
text: input,
completed: false
};
setTodos([...todos, newTodo]);
setInput('');
};
// 할 일 완료/미완료 토글
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
// 할 일 삭제
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
// 필터링된 할 일 목록
const filteredTodos = todos.filter(todo => {
if (filter === 'active') return !todo.completed;
if (filter === 'completed') return todo.completed;
return true;
});
// 통계
const activeCount = todos.filter(todo => !todo.completed).length;
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
<div className="max-w-2xl mx-auto">
<div className="bg-white rounded-lg shadow-xl p-6">
{/* 헤더 */}
<h1 className="text-3xl font-bold text-center text-indigo-600 mb-6">
나의 할 일 목록
</h1>
{/* 입력 폼 */}
<form onSubmit={addTodo} className="mb-6">
<div className="flex gap-2">
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="할 일을 입력하세요..."
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
/>
<button
type="submit"
className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
>
추가
</button>
</div>
</form>
{/* 필터 버튼 */}
<div className="flex gap-2 mb-4">
<button
onClick={() => setFilter('all')}
className={`px-4 py-2 rounded-lg transition-colors ${
filter === 'all'
? 'bg-indigo-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
전체 ({todos.length})
</button>
<button
onClick={() => setFilter('active')}
className={`px-4 py-2 rounded-lg transition-colors ${
filter === 'active'
? 'bg-indigo-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
진행중 ({activeCount})
</button>
<button
onClick={() => setFilter('completed')}
className={`px-4 py-2 rounded-lg transition-colors ${
filter === 'completed'
? 'bg-indigo-600 text-white'
: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
}`}
>
완료 ({todos.length - activeCount})
</button>
</div>
{/* 할 일 목록 */}
{filteredTodos.length === 0 ? (
<div className="text-center py-8 text-gray-500">
{filter === 'all' && '할 일을 추가해보세요! '}
{filter === 'active' && '진행중인 할 일이 없습니다! '}
{filter === 'completed' && '완료한 할 일이 없습니다! '}
</div>
) : (
<ul className="space-y-2">
{filteredTodos.map((todo) => (
<li
key={todo.id}
className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors"
>
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
className="w-5 h-5 text-indigo-600 rounded cursor-pointer"
/>
<span
className={`flex-1 ${
todo.completed
? 'line-through text-gray-500'
: 'text-gray-800'
}`}
>
{todo.text}
</span>
<button
onClick={() => deleteTodo(todo.id)}
className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition-colors"
>
삭제
</button>
</li>
))}
</ul>
)}
{/* 통계 */}
{todos.length > 0 && (
<div className="mt-6 pt-4 border-t border-gray-200 text-center text-gray-600">
총 {todos.length}개 중 {activeCount}개 남음
</div>
)}
</div>
{/* 학습 포인트 */}
<div className="mt-6 bg-white rounded-lg shadow p-4 text-sm text-gray-600">
<h3 className="font-bold text-indigo-600 mb-2"> 이 예제에서 배우는 것:</h3>
<ul className="space-y-1 list-disc list-inside">
<li>useState로 상태 관리 (todos, input, filter)</li>
<li>map으로 리스트 렌더링</li>
<li>이벤트 핸들러 (추가, 삭제, 토글)</li>
<li>조건부 렌더링 (필터링, 빈 상태)</li>
<li>폼 제출 처리</li>
<li>배열 메서드 활용 (filter, map)</li>
</ul>
</div>
</div>
</div>
);
}
12. 추가 학습 팁
다음 단계로 배울 것들:
- useContext: 전역 상태 관리
- useReducer: 복잡한 상태 로직 관리
- Custom Hooks: 재사용 가능한 로직 만들기
- React Router: 페이지 라우팅
- API 연동: fetch나 axios로 데이터 가져오기
연습 방법:
- 위 예제를 직접 타이핑해보세요 (복사 붙여넣기 X)
- 기능을 하나씩 추가해보세요
- 에러가 나면 개발자 도구(F12)에서 확인하세요
- 작은 프로젝트를 직접 만들어보세요
유용한 자료:
- 공식 문서: https://react.dev
- React 개발자 도구: Chrome/Firefox 확장 프로그램