Basics
컴포넌트와 JSX 기본기
프로젝트 생성, 명령어, 구조 살펴보기, 컴포넌트 기초, JSX 문법, 조건부 렌더링과 리스트 렌더링을 다룹니다.
React Frontend Course
화면을 컴포넌트와 상태 흐름으로 읽습니다
React는 화면을 작게 나누고, 데이터와 이벤트가 움직이는 길을 설계하는 프론트엔드 도구입니다. 얄코의 React 강의로 컴포넌트, JSX, props, state, hooks, Context, routing, 파이널 프로젝트까지 웹앱의 기본 동선을 정리합니다.
37개 수업4시간베스트 강의평점 4.9수강평 196개2026년 5월 업데이트
얄코 React 인프런 강의
Trust
1,220명이 수강 중인 베스트 React 강의
공개 데이터 기준 수강생 1,220명, 좋아요 248개, 수강평 196개, 평점 4.9의 얄코 React 강의입니다.
37개
수업
4시간
베스트 강의
평점 4.9
Hooks
State와 hooks 흐름
props, 이벤트 핸들링, state, useReducer, useRef, 생명주기와 useEffect, 커스텀 훅, 최적화를 단계적으로 봅니다.
Project
Context, routing, 파이널 프로젝트
React 19 Context 변경점, 라우팅, 추가 기능, 데이터 매니징과 페이지·컴포넌트 작성 흐름을 연결합니다.
Visual Proof
강의에서 보게 될 화면의 결
강의 커버와 참고 이미지를 바탕으로, 오늘 선택한 디자인 톤에 맞춘 광고용 화면 흐름을 보여줍니다.
컴포넌트 상태 흐름
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
Hooks 라이프사이클 맵
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
Context Routing Architecture
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
파이널 프로젝트 보드
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
React 19 업데이트 레이더
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
강의 커버
React 강의의 컴포넌트, JSX, props, state, hooks, Context, routing, React 19, 파이널 프로젝트 흐름을 확인할 수 있는 참고 화면입니다.
Why React
HTML, CSS, JavaScript 다음에는 화면을 나누는 법이 필요합니다
정적인 페이지를 넘어 상호작용하는 웹앱을 만들려면 화면을 컴포넌트로 나누고, 값과 이벤트가 어떤 방향으로 흐르는지 정리해야 합니다. 이 강의는 React를 배우는 이유와 DOM 배경지식에서 시작해 UI 구조를 읽는 기준을 잡습니다.
- DOM 배경지식
- 실습 환경
- 프로젝트 생성
- 컴포넌트
- UI 분해
- 상호작용
Foundation
컴포넌트, JSX, 조건부 렌더링으로 첫 화면을 만듭니다
무료 공개 파트에서는 예제 페이지 활용, 프로젝트 생성, React 프로젝트 구조, 컴포넌트 기초, JSX 문법, 조건부 렌더링, 리스트 렌더링, JSX 속성과 스타일링을 다룹니다. 화면을 코드로 조립하는 첫 흐름입니다.
- component
- JSX
- conditional rendering
- list rendering
- style
- project command
Decision Point
커리큘럼과 미리보기를 바로 확인하세요
랜딩은 강의의 핵심 판단 기준만 압축합니다. 가격, 섹션별 수업, 수강평, 미리보기는 인프런 상세 페이지에서 최종 확인하는 흐름이 가장 정확합니다.
State Flow
props, 이벤트, state로 화면의 변화를 다룹니다
React 앱은 부모에서 내려오는 props와 사용자 이벤트, 그리고 state 변경으로 화면을 갱신합니다. props, 이벤트 핸들링, state 기초와 심화를 통해 UI가 어떻게 반응하는지 확인합니다.
- props
- event handling
- state
- setState
- data flow
- render update
Hooks
useReducer, useRef, useEffect, 커스텀 훅으로 구조를 넓힙니다
상태 규칙이 복잡해질 때는 useReducer, DOM이나 변경 가능한 값을 다룰 때는 useRef, 외부 흐름과 동기화할 때는 useEffect가 필요합니다. 커스텀 훅과 최적화까지 보며 반복되는 동작을 구조화합니다.
- useReducer
- useRef
- useEffect
- custom hook
- optimization
- lifecycle
App Structure
Context, routing, React 19, 파이널 프로젝트로 앱 단위까지 갑니다
Context와 라우팅은 페이지가 늘어나는 React 앱에서 중요한 구조입니다. 강의는 React 19에서 Context 관련 수정된 사항과 추가 기능을 함께 짚고, 파이널 프로젝트에서 데이터 매니징, Context, routing, 페이지와 컴포넌트 작성 흐름을 연결합니다.
- Context
- routing
- React 19
- data managing
- pages
- components
Decision
HTML, CSS, JavaScript 기초를 마친 사람에게 맞습니다
원문은 수강 전 지식으로 HTML, CSS, JavaScript 기초를 안내합니다. 최신 가격, 제공 자료, 커리큘럼, 무료 공개 영상, 수강 가능 여부는 인프런 상세 페이지에서 확인하세요.
- 프론트엔드 개발자를 꿈꾸는 사람
- HTML, CSS, JavaScript 기초 과정을 마친 사람
- 아이디어를 React 웹앱으로 구현해보고 싶은 사람
- 컴포넌트, props, state, hooks 흐름을 한 번에 정리하고 싶은 사람
- Context, 라우팅, React 19 업데이트와 파이널 프로젝트까지 보고 싶은 사람
FAQ
수강 전 자주 묻는 질문
강의는 어디에서 확인할 수 있나요?
상단과 하단의 인프런 CTA 버튼을 누르면 강의 상세 페이지에서 가격, 커리큘럼, 미리보기를 확인할 수 있습니다.
완전 초보자도 들을 수 있나요?
기초 문법 강의보다는 실무 제작 흐름에 가깝습니다. HTML, CSS, JavaScript와 React 또는 Next.js 경험이 있으면 더 수월합니다.
수강 후 무엇이 남나요?
컴포넌트와 JSX에서 시작해 props, 이벤트, state, useReducer, useRef, useEffect, 커스텀 훅, Context, 라우팅, 파이널 프로젝트까지 React 웹앱의 기본 흐름을 연결합니다.
구매 전 무엇을 보면 좋나요?
커리큘럼과 미리보기를 보고 내 프로젝트나 포트폴리오에 바로 응용할 수 있는 장면이 있는지 확인하는 것이 좋습니다.
Course CTA
지금 보는 페이지의 목적은 하나입니다.
강의를 듣고 손에 남을 결과물을 판단하게 하는 것.
가격, 커리큘럼, 수강평, 미리보기는 인프런 상세 페이지에서 최종 확인하세요. 광고용 링크는 항상 강의 상세로 연결됩니다.
https://www.ludgi.ai/landing/inflearn-ad-yalco-react-foundation-clay-20260601-094557-67c02dd0