React

처음 접하는 개념부터 원리와 설계 적용까지, 필요한 단계부터 시작하세요.

개념 노트 13개 · 직접 실습 1개

시작 전 JavaScript 함수·배열·객체·함수 전달·import 문법을 먼저 알아두면 좋습니다.

순서는 권장 경로입니다. 이미 아는 내용은 건너뛰어도 됩니다. 컴포넌트·props·상태·입력을 다룰 수 있다면 Next.js 기초를 시작할 수 있습니다.

시작하기

화면을 작은 컴포넌트로 나누는 이유부터 익힙니다.

React는 컴포넌트라는 작은 화면 조각을 조합하는 라이브러리입니다.

데이터 표시 → 목록 → 클릭과 상태 → 입력으로 작은 화면을 만듭니다.

부모가 전달한 값을 props로 받아 같은 컴포넌트에 다른 내용을 표시합니다.

조건에 따라 요소를 고르고 배열을 화면 항목으로 바꿉니다.

이벤트 함수에서 상태를 갱신하면 React가 다음 화면을 계산합니다.

제어 입력은 상태를 value로 표시하고 onChange로 다음 값을 저장합니다.

직접 사용한 상태와 화면이 어떻게 연결되는지 읽습니다.

상태 갱신·식별·요청 정리를 실제 동작과 상황에 적용합니다.

공연 이름을 props로 받고 수량을 상태로 관리하는 컴포넌트를 작성해 보세요.

과제는 직접 작성·확인하는 연습입니다. 자동 채점이나 완료 기록은 제공하지 않습니다.