DEMO · 가상 서비스
포트폴리오 데모 — 실존하지 않는 가상 서비스입니다
업데이트 개발 중급

React 18 실전 — 컴포넌트 설계부터 상태 관리까지

컴포넌트를 어디서 끊어야 할지 매번 고민된다면 이 강의가 맞습니다. 화면 하나를 끝까지 만들면서 나누는 기준, 상태를 두는 자리, 데이터를 가져오는 순서를 차례로 잡습니다. 마지막에는 실제로 배포까지 합니다.

4.9 수강평 1,204 수강생 9,120명 마지막 업데이트 2026.06
React 18 실전 강의 미리보기 미리보기 02:40

데모라 영상은 재생되지 않습니다. 실제 서비스라면 이 자리에 플레이어가 들어갑니다.

수강 대상

이런 분께 맞습니다

01

튜토리얼은 끝냈는데

공식 문서를 따라 해 봤지만 막상 내 화면을 만들려니 어디서 시작할지 모르겠는 분.

02

상태가 자꾸 꼬이는

useState를 여기저기 두다 보니 어느 값이 어디서 바뀌는지 추적이 안 되는 분.

03

배포까지 해 보고 싶은

로컬에서만 돌려 봤고, 실제로 올려서 남에게 보여 준 적은 없는 분.

미리 알아 두면 좋은 것

  • · HTML · CSS로 화면을 만들어 본 경험
  • · 자바스크립트 함수 · 배열 메서드 기본기
  • · 터미널에서 명령어를 실행해 본 경험
  • · Git으로 커밋해 본 경험 (없어도 따라올 수 있습니다)

커리큘럼

18강 · 3개 섹션

총 4시간 15분 · 실습 자료 12개

차시를 눌러도 데모라 재생되지 않습니다. 실제로 체크해서 진도가 다시 계산되는 화면수강 대시보드에 있습니다.

강사

프론트엔드 개발 강사 정하윤

정하윤

프론트엔드 개발 · 강의 1개

9년째 화면을 만듭니다. 커머스와 사내 대시보드를 오가며 일했고, 컴포넌트를 잘못 나눠서 고생한 경험이 많습니다. 그래서 이 강의는 "무엇이 맞다"보다 "왜 이렇게 나눴는지"를 계속 이야기합니다.

React TypeScript 디자인 시스템 접근성
강사 소개 보기

강사 이름 · 경력 · 사진은 데모용 예시입니다. 사진은 무료 라이선스 스톡이며 실존 강사가 아닙니다.

수강평

별점 4.9 · 1,204개

2026.06.28
3강 "컴포넌트를 나누는 기준"만으로 값을 했습니다. 지금까지는 파일이 길어지면 나눴는데, 그게 기준이 아니라는 걸 알았어요. 실습 파일도 단계별로 나뉘어 있어서 따라가기 편했습니다.
한지우
18강 수료
2026.06.14
강의 하나가 10~19분이라 출근길에 딱 한 차시씩 끊어 들었습니다. 마지막 배포 편에서 진짜로 주소가 나오니까 그제야 다 만든 기분이 들더군요.
임도현
18강 수료
2026.05.30
좋았지만 9강 useEffect 부분은 두 번 돌려 봤습니다. 처음 듣는 사람에게는 조금 빠릅니다. 대신 질문 게시판 답변이 빨라서 막힌 건 다 풀었습니다.
서나린
14강까지 수강
2026.05.11
회사에서 리액트를 쓰고 있는데도 남는 게 있었습니다. 특히 12강 최적화는 그동안 잘못 알고 있던 걸 고쳤습니다. 중급이라는 표기가 정확합니다.
권시원
18강 수료

수강평과 작성자, 날짜는 실제 후기가 아니라 데모용으로 지어낸 예시입니다.

이 강의에 자주 묻는 질문

Q1 리액트를 처음 봐도 들을 수 있나요?
자바스크립트 기본기가 있으면 따라올 수 있습니다. 다만 난이도를 중급으로 잡아 둔 이유는 3강부터 설계 이야기가 나오기 때문입니다. 처음이라면 1~2강을 먼저 무료로 들어 보고 판단하세요.
Q2 TypeScript도 다루나요?
본편은 자바스크립트로 갑니다. 타입을 붙이는 방법은 부록 자료로 정리해 두었고, 실습 파일에 타입 버전을 함께 넣었습니다. (데모 표기)
Q3 질문은 어디에 하나요?
강의별 질문 게시판에서 강사가 직접 답합니다. 통상 하루 안에 답이 달립니다. 데모에서는 게시판을 제공하지 않습니다.
Q4 수료증이 나오나요?
모든 차시를 들으면 수료증을 발급합니다. 대시보드에서 진도가 100%가 되면 버튼이 바뀝니다. 데모에서도 그 동작은 확인할 수 있습니다.