HTML·CSS만 알아도 시작하는 AI 시대 리액트 실무

비전공자를 위한 리액트 실무

ReactNext.jsTailwind CSS

중급총 100회20시간

무료 5강 보기 수강 신청 340,000원289,000원

비전공자를 위한 리액트 실무289,000원

수강 신청

이런 경험, 있지 않나요?

리액트 강의 3개째인데, 막상 혼자서 컴포넌트 하나도 못 만들겠어요

AI한테 코드 달라고 하면 주긴 하는데, 왜 이렇게 짰는지 하나도 모르겠어요

비개발 직무로 5년째인데, 이제 리액트 못 하면 자리가 없을 것 같아요

컴포넌트가 뭔지는 알겠는데, 어디서부터 쪼개야 하는 건지...

같은 AI를 써도, 결과가 달라집니다

지금

"로그인 페이지 만들어줘"

수강 후

"useState로 폼 상태 관리하고, 유효성 검사는 onSubmit에서 처리해줘"

지금

AI 코드를 그대로 복붙하고 기도한다

수강 후

AI 코드에서 불필요한 useEffect를 찾아내고 직접 수정한다

지금

에러 나면 에러 메시지를 통째로 AI에 던진다

커리큘럼

총 5개 파트 · 100강

Section 00. 리액트 시작하기

리액트가 왜 필요한지 이해하고, 개발 환경을 세팅하고, 첫 프로젝트를 만들어봅니다.

00. 리액트 시작하기

10.1 리액트예제 소개

무료05:34

20.2 리액트설치

무료08:51

30.3 리액트 폴더정리

무료09:38

Section 01. 리액트 기본문법

자주 묻는 질문

이런 것을 배웁니다

비전공자도 리액트를 배워야 하는 이유

프론트엔드 생태계가 변하고 있습니다. 더 이상 HTML/CSS만으로는 경쟁력을 유지하기 어렵습니다. 이 강의는 기존 업무 역량을 살리면서 리액트를 자연스럽게 익히도록 설계되었습니다.

HTML을 작성하듯 컴포넌트를 만듭니다

JSX는 HTML과 거의 같습니다. 여러분이 이미 알고 있는 마크업 지식을 그대로 활용해서 리액트 컴포넌트를 만드는 방법을 배웁니다.

State와 이벤트로 인터랙션 구현

useState, 이벤트 핸들링, 폼 처리까지. 화면을 동적으로 바꾸는 핵심 개념을 실습과 함께 익힙니다.

React Router로 페이지 전환

SPA에서 페이지를 이동하는 방법, 동적 라우트, 중첩 레이아웃까지 실무에서 바로 쓰는 라우팅 패턴을 배웁니다.

API 연동과 데이터 패칭

fetch로 외부 데이터를 불러오고, 로딩과 에러 상태를 처리하는 실전 패턴을 학습합니다.

실전 프로젝트로 완성하는 포트폴리오

포트폴리오 사이트, 쇼핑몰 상품 페이지, 대시보드 UI — 실무에서 바로 쓸 수 있는 3개 프로젝트를 처음부터 끝까지 함께 만듭니다.

Section 02. 리액트 라우터

React Router로 SPA 페이지 전환, 동적 라우트, 중첩 레이아웃을 구현합니다.

02. 리액트 라우터

12.2 리액트 라우터로 웹 페이지 나누기