React 코드 리뷰 노트
이 화면이 왜 다시 렌더링되지 않는지 상태 흐름부터 확인합니다
JSX 문법 설명보다 먼저 state 변경, input 연결, 목록 업데이트, loading/error 분기가 실제 UI에서 어떻게 실패하는지 봅니다. 각 모듈은 같은 실수 유형의 React 문제로 바로 이어집니다.
방문자가 읽은 개념이 실제 문제로 이어지도록 모든 모듈 버튼은 홈 실습 랩의 정확한 문제 ID로 이동합니다.
컴포넌트와 JSX
React 화면은 작은 컴포넌트를 조합해 만듭니다. JSX는 HTML처럼 보이지만 JavaScript 값과 함수를 함께 다루는 문법입니다.
function Welcome() {
return 학습을 시작합니다
;
}useState로 화면 상태 관리
버튼 클릭, 입력값 변경, 탭 전환처럼 화면이 바뀌는 값은 state로 관리합니다.
const [count, setCount] = useState(0);
setCount(prev => prev + 1);입력값을 상태와 연결하기
검색창, 로그인 폼, 댓글 입력처럼 사용자가 입력한 값은 value와 onChange를 함께 연결하면 안정적으로 다룰 수 있습니다.
const [text, setText] = useState("");
setText(e.target.value)} />배열 상태를 불변하게 업데이트
Todo, 장바구니, 선택 목록처럼 배열을 다룰 때는 원본을 직접 바꾸지 않고 새 배열을 만들어야 합니다.
setTodos(prev => [...prev, { id: Date.now(), text }]);필터와 조건부 렌더링
전체/완료/미완료 탭, 검색 결과, 상태별 목록처럼 같은 데이터도 조건에 따라 다르게 보여줘야 합니다.
const visibleTodos = todos.filter(todo => filter === "all" || todo.status === filter);로딩, 에러, 빈 상태
실무 화면은 성공 상태만 있지 않습니다. 데이터를 기다리는 중, 실패한 경우, 결과가 없는 경우를 분리해야 합니다.
if (loading) return Loading...
;
if (error) return Error
;
if (!data) return Empty
;React 실무 복습 루틴
React 15문제를 무작정 풀기보다 입력값, 폼 검증, API 상태, 재시도 흐름을 순서대로 묶어보세요. 실제 서비스 화면에서 자주 이어지는 패턴입니다.
버튼 클릭에만 제출 로직을 넣거나, 로딩과 에러 상태를 boolean으로 흩어놓으면 실무 화면에서 버그가 늘어납니다.
문제를 맞힌 뒤 입력 출처, 제출 흐름, 실패 메시지, 재시도 버튼까지 코드 리뷰 기준으로 점검하세요.
React 15문제 실습 순서
위 개념을 확인한 뒤 아래 순서로 풀면 state, props, 목록, 폼, API 상태까지 실무에서 자주 쓰는 흐름을 끊기지 않고 연습할 수 있습니다.
다음 단계
이 페이지를 한 번 훑은 뒤 React 15문제를 순서대로 풀어보세요. 이후 React 문제를 30개까지 확장하기 전에 컴포넌트 분리, props, 폼 검증, API 상태 관리까지 이어갈 예정입니다.