CL
Coding Learning Lab기초 학습부터 실습 채점까지
React 기초 학습
상태와 이벤트를 배우고 바로 React 문제로 확인하세요
React는 문법을 외우는 것보다 화면 상태가 어떻게 바뀌는지 이해하는 것이 중요합니다. 컴포넌트, state, input, 배열 업데이트, 필터, 로딩 상태를 짧게 배우고 바로 문제로 연결합니다.
01버튼 클릭 카운터
컴포넌트와 JSX
React 화면은 작은 컴포넌트를 조합해 만듭니다. JSX는 HTML처럼 보이지만 JavaScript 값과 함수를 함께 다루는 문법입니다.
핵심컴포넌트는 입력을 받아 화면 조각을 반환하는 함수처럼 생각하면 됩니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
function Welcome() {
return 학습을 시작합니다
;
}02버튼 클릭 카운터
useState로 화면 상태 관리
버튼 클릭, 입력값 변경, 탭 전환처럼 화면이 바뀌는 값은 state로 관리합니다.
핵심state를 직접 바꾸지 말고 setter 함수를 호출해야 React가 화면을 다시 그립니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
const [count, setCount] = useState(0);
setCount(prev => prev + 1);03입력값 미리보기
입력값을 상태와 연결하기
검색창, 로그인 폼, 댓글 입력처럼 사용자가 입력한 값은 value와 onChange를 함께 연결하면 안정적으로 다룰 수 있습니다.
핵심controlled input은 입력값을 React 상태가 단일 기준으로 관리하게 합니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
const [text, setText] = useState("");
setText(e.target.value)} />04Todo 항목 추가/삭제
배열 상태를 불변하게 업데이트
Todo, 장바구니, 선택 목록처럼 배열을 다룰 때는 원본을 직접 바꾸지 않고 새 배열을 만들어야 합니다.
핵심push 대신 전개 연산자나 filter/map을 사용하면 React 상태 변경이 명확해집니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
setTodos(prev => [...prev, { id: Date.now(), text }]);05필터 버튼 만들기
필터와 조건부 렌더링
전체/완료/미완료 탭, 검색 결과, 상태별 목록처럼 같은 데이터도 조건에 따라 다르게 보여줘야 합니다.
핵심필터 값은 제한된 문자열로 관리하고, 화면에는 필터링된 배열만 렌더링합니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
const visibleTodos = todos.filter(todo => filter === "all" || todo.status === filter);06API 로딩 상태 표시
로딩, 에러, 빈 상태
실무 화면은 성공 상태만 있지 않습니다. 데이터를 기다리는 중, 실패한 경우, 결과가 없는 경우를 분리해야 합니다.
핵심API 화면은 loading, error, empty, success 상태를 먼저 설계하면 깨지는 화면이 줄어듭니다.
실무 예폼, 목록, 필터, API 화면처럼 프론트엔드에서 반복적으로 만드는 UI 패턴에 바로 연결됩니다.
주의React에서는 DOM을 직접 바꾸기보다 상태를 바꾸고 화면은 상태에서 다시 계산하는 흐름이 중요합니다.
if (loading) return Loading...
;
if (error) return Error
;
if (!data) return Empty
;React 15문제 실습 순서
위 개념을 확인한 뒤 아래 순서로 풀면 state, props, 목록, 폼, API 상태까지 실무에서 자주 쓰는 흐름을 끊기지 않고 연습할 수 있습니다.
01
useState counter
상태가 화면을 바꾸는 가장 작은 흐름을 확인합니다.
02
controlled input
입력값을 React 상태와 연결하는 폼 기본기를 연습합니다.
03
array state update
배열 상태를 원본 변경 없이 추가/삭제하는 방식을 확인합니다.
04
filter state
탭, 필터, 상태별 목록 전환에 쓰는 패턴입니다.
05
loading/error/empty
API 화면에서 로딩, 에러, 빈 상태, 성공 상태를 나눕니다.
06
props card
props로 반복 UI를 재사용하는 구조를 연습합니다.
07
conditional rendering
로그인, 권한, 데이터 유무에 따라 화면을 나누는 연습입니다.
08
list key
목록 렌더링에서 안정적인 key가 왜 필요한지 확인합니다.
09
form validation
입력 중 오류 메시지를 계산하고 표시하는 폼 품질 연습입니다.
10
component extraction
반복 JSX를 작은 컴포넌트로 나누는 실무 구조화 연습입니다.
11
derived total
이미 있는 상태에서 합계를 계산해 중복 state를 줄입니다.
12
className toggle
상태값에 따라 className을 바꾸는 UI 패턴입니다.
13
useEffect fetch
컴포넌트가 처음 보일 때 데이터를 불러오는 패턴입니다.
14
API retry state
API 실패 시 사용자가 다시 시도할 수 있는 회복 UI를 만듭니다.
15
useMemo filter
목록 필터 계산을 useMemo로 정리하고 의존성 배열을 점검합니다.
다음 단계
이 페이지를 한 번 훑은 뒤 React 15문제를 순서대로 풀어보세요. 이후 React 문제를 30개까지 확장하기 전에 컴포넌트 분리, props, 폼 검증, API 상태 관리까지 이어갈 예정입니다.