React 배우기 - 코딩 강좌

React를 직접 작성하며 배우세요. 이 React JS 튜토리얼은 JSX 첫 줄부터 Hooks, 상태 관리와 완성된 앱까지 안내하며, 작성하는 모든 컴포넌트가 라이브 미리보기에서 휴대폰 화면에 바로 렌더링됩니다.

88개 코스와 324개의 인터랙티브 레슨, A1부터 C1까지의 레벨을 제공합니다. 짧은 개념을 읽고, 실제 코드를 입력한 다음 실행을 탭해 결과를 확인하세요. 노트북이나 별도의 설정이 필요하지 않습니다.

휴대폰에서 코드 작성

• JSX에 맞게 설계된 코드 에디터와 앱 안에서 컴포넌트를 렌더링하는 라이브 미리보기

• 런타임(ReactDOM 및 Babel)이 앱에 포함되어 있어 코드가 서버가 아닌 기기에서 실행됩니다

• 여러 파일로 구성된 프로젝트: 실제 앱을 만드는 방식처럼 한 컴포넌트를 다른 컴포넌트로 가져오기

• 렌더링된 버튼을 탭하고, 폼에 입력하며 UI가 반응하는 모습을 확인하기

실험실

• Hooks Lab: 모든 상태 변경과 리렌더링이 발생하는 과정을 실시간으로 확인

• Props 조절기: 슬라이더로 prop을 변경하고 컴포넌트가 업데이트되는 모습 확인

• 렌더 프로파일러 및 상태 타임라인(Pro): 어떤 컴포넌트가 다시 렌더링되었고 그 이유가 무엇인지 확인한 다음, 상태 변화를 되짚어 보기

초급부터 고급까지, 단계별 학습

• 기초: JSX, 컴포넌트, props, state, 이벤트, 리스트와 키, 조건부 렌더링

• Hooks: useState, useEffect, useRef, useReducer, 커스텀 Hooks, useLayoutEffect 등

• 폼과 유효성 검사, React Hook Form, 제어 및 비제어 입력

• 상태 관리: Context, Redux Toolkit 및 RTK Query, Zustand 및 Jotai

• React Router, 데이터 가져오기, TanStack Query, SWR 및 낙관적 UI

• TypeScript, 테스트, Storybook, 접근성 및 보안

• 성능: 메모이제이션, 코드 분할, Suspense, 트랜지션, 가상화 리스트

• React 19 및 Server Components, SSR 및 하이드레이션, 스트리밍

• Next.js App Router, 데이터 가져오기 및 인증

• 웹 개발자를 위한 React Native 기초

• 배포, 마이크로 프런트엔드 및 모듈 페더레이션

실제 프로젝트 만들기

20개의 가이드 프로젝트를 한 번에 한 단계씩 진행하세요. 좋아요 버튼, 프로필 카드, 팁 계산기, 퀴즈 게임, 스톱워치, 회원가입 폼, 장바구니, 이미지 캐러셀, 페이지네이션 리스트, todo 앱 등을 만들 수 있습니다. 다음 단계로 넘어가기 전에 각 단계에서 컴포넌트가 실제로 작동하는지 확인합니다.

익숙해질 때까지 연습하기

• Hooks, 렌더링, 폼, Context 및 성능을 주제로 한 30개의 코딩 미션(쉬움, 보통, 어려움)

• UI Match: 목표 컴포넌트를 다시 만들고 구조, 스타일 및 텍스트에 대한 점수 받기

• Bug Hunt: 문제가 있는 컴포넌트에서 버그를 찾아 수정하기

• Component Recall: 간격 반복을 활용해 이미 작동시킨 코드에 빠진 부분을 다시 입력하기

• 50개의 퀴즈 문제, 50개의 면접 질문 및 요약표

• 일일 챌린지, 연속 학습, XP 및 리더보드

AI 멘토(Pro)

Hook이나 오류에서 막혔나요? AI 멘토에게 명확한 설명을 요청하고, AI가 코드를 검토해 수정 방법을 제안하도록 하거나, 어떤 주제든 맞춤 레슨을 생성하도록 요청하세요.

수료증(Pro)

최종 시험에 합격하고 공유할 수 있는 수료증을 받으세요.

무료 및 Pro

무료: 첫 번째 코스, 가이드 프로젝트 1개, 코딩 미션 2개, 라이브 미리보기가 포함된 코드 에디터, Hooks Lab, props 조절기, Bug Hunt 및 하루 3회의 UI Match 검사. 무료 버전에는 광고가 표시됩니다.

Pro: 88개 전체 코스, 모든 프로젝트와 미션, AI 멘토, 렌더 프로파일러 및 상태 타임라인, 수료증 시험, 광고 없음.

이 앱은 22개 언어로 제공됩니다.

React는 Meta Platforms, Inc.의 상표입니다. Next.js는 Vercel, Inc.의 상표입니다. 이 앱은 독립적인 학습 앱이며 Meta 또는 Vercel과 제휴하거나 해당 기업의 보증을 받지 않습니다.

개인정보처리방침: https://www.coddykit.com/terms/privacy-policy