React 배우기 - 코딩 강좌

React 배우기를 시작하는 분들을 위한 React js 학습 앱입니다. JSX부터 훅, 상태 관리, 앱 제작까지 배우고 휴대폰에서 실시간 미리보기를 확인하세요. A1–C1 수준의 React 강좌 88개와 대화형 레슨 324개를 제공하며, 22개 언어를 지원합니다.

휴대폰에서 코드 작성

• JSX IDE/editor: 읽고, 코드를 작성하고, 실행하며 실시간 미리보기를 확인하세요. 노트북이나 별도 설정이 필요 없습니다.

• 내장된 ReactDOM/Babel이 서버가 아닌 기기에서 실행됩니다.

• 여러 파일로 구성된 프로젝트, 컴포넌트 가져오기, 상호작용 가능한 버튼과 폼을 지원합니다.

실험실

• Hooks Lab: 상태 변화와 리렌더링을 실시간으로 확인하세요.

• Props knobs: 슬라이더로 props를 조절하세요.

• Render profiler/state timeline (Pro): 무엇이 왜 리렌더링됐는지 확인하고, 타임라인을 이동하며 상태를 살펴보세요.

초급부터 고급까지 단계별로

• JSX, 컴포넌트, props, 상태, 이벤트, 목록과 키, 조건부 렌더링

• useState, useEffect, useRef, useReducer, 커스텀 훅, useLayoutEffect 등

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

• Context, Redux Toolkit/RTK Query, Zustand, Jotai

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

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

• 메모이제이션, 코드 분할, Suspense, 트랜지션, 가상화 목록

• React 19, 서버 컴포넌트, SSR/하이드레이션, 스트리밍

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

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

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

실제 프로젝트 만들기

안내에 따라 만드는 React 배우기 프로젝트 20개: 좋아요 버튼, 프로필 카드, 팁 계산기, 퀴즈 게임, 스톱워치, 회원가입 폼, 장바구니, 이미지 캐러셀, 페이지별 목록, 할 일 앱 등. 각 단계에서 컴포넌트가 제대로 작동하는지 확인합니다.

익숙해질 때까지 연습

• React 배우기 코딩 미션 30개: 쉬움/보통/어려움 난이도로 훅, 렌더링, 폼, 컨텍스트, 성능을 연습하세요.

• UI Match: 주어진 화면을 재현하고 구조·스타일·텍스트 점수를 확인하세요.

• Bug Hunt: 컴포넌트의 버그를 찾아 수정하세요.

• Component Recall: 간격을 두고 반복 학습하며 빠진 컴포넌트 코드를 복원하세요.

• 퀴즈 50문항, 면접 질문 50개, 핵심 요약표.

• 일일 챌린지, 연속 학습 기록, XP, 순위표.

AI 멘토 (Pro)

AI 설명, 코드 리뷰, 수정 제안, 원하는 주제의 맞춤 레슨.

수료증 (Pro)

최종 시험에 합격하면 공유 가능한 수료증을 받을 수 있습니다.

이런 분들을 위한 앱

• HTML, CSS 또는 JavaScript를 조금 아는 초보자

• 빠르게 다른 프레임워크로 전환하려는 개발자

• 프런트엔드 개발자 면접을 준비하는 분

• 프로젝트 포트폴리오를 만드는 독학 개발자

무료 및 Pro

무료: 첫 번째 React 강좌, 가이드 프로젝트 1개, 코딩 미션 2개, editor/실시간 미리보기, Hooks Lab, Props knobs, Bug Hunt, UI Match 검사 하루 3회. 광고 포함.

Pro: 전체 강좌 88개, 모든 프로젝트와 미션, AI 멘토, Render profiler/state timeline, 수료증 시험. 광고 없음.

React와 Next.js는 각 소유자의 상표입니다. 독립적인 학습 앱으로, 해당 상표 소유자와 제휴 관계가 없으며 이들의 보증을 받지 않습니다.

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