이젠온라인에듀
프로그래밍

예제로 마스터 하는 React 25제 입문 (함수형 컴포넌트 기반) Part.4 리액트 훅과 라우터

🌟 과정 소개: “실전 예제로 리액트의 핵심을 익히는 쉬운 입문 가이드”

웹 프론트엔드 개발의 중심 기술로 자리 잡은 React.js.
하지만 처음 시작하려면 어려운 개념과 복잡한 용어들에 막히기 쉽습니다.

본 과정은 초보자도 쉽게 이해할 수 있도록 25개의 핵심 예제를 중심으로 구성되어 있으며,
함수형 컴포넌트 기반의 구조와 리액트의 최신 기능을 따라 실습하며 기초를 탄탄히 다질 수 있도록 설계되었습니다.

VSCode 설치부터 컴포넌트 구조 이해, 라우팅, CRUD, API 연결까지
리액트를 처음 접하는 분들도 무리 없이 따라올 수 있는 쉬운 설명과 친절한 예제로 진행됩니다.
강의 소개


"[HD]예제로 마스터 하는 React 25제 입문 (함수형 컴포넌트 기반) Part.1~6" 과정은 React의 기본적인 사용법과 핵심 내용을 실용적인 예제를 통해 익히고, 웹 프론트엔드 개발 입문자와 초보자가 실전 개발 감각을 키울 수 있도록 구성된 입문 과정입니다.

🚀 "단순히 복잡한 개념만을 나열하는 것을 넘어," 리액트 프론트엔드 개발에 꼭 필요한 필수 사항과 기능들을 실생활 예시에 비유하여 누구라도 쉽게 이해하고, 25개의 핵심 예제를 통해 즉시 활용 가능한 실전 감각을 키울 수 있도록 돕는 과정입니다.

본 과정은 프로그래밍이 처음인 분들도 개발 감각을 키우고 웹 프론트엔드 개발의 기반을 다질 수 있도록, 핵심 예제를 중심으로 React의 필수 기능들을 단계적으로 학습하고 실습할 수 있도록 설계되었습니다.

VSCode 및 리액트 구조 → 리액트 컴포넌트 → 리액트 JSX 문 → 리액트 훅과 라우터 → SPA CRUD → 라우팅과 CRUD API 테스트 서버 구축 개념으로 이어지는 체계적 흐름을 통해 React 웹 프론트엔드 개발의 기초 체력을 튼튼히 다지고, 
실전 프로젝트 구현을 위한 기반까지 갖출 수 있는 과정입니다.

 

 

💡 이 과정을 통해 얻을 수 있는 것

📌 실습 중심의 예제로 리액트 기초부터 응용까지 자연스럽게 습득
📌 실무에 활용할 수 있는 SPA(싱글 페이지 애플리케이션) 개발 구조 이해
📌 라우터, 상태관리(Hook), 이벤트 처리 등 핵심 개념 완전 정복
📌 나만의 CRUD 기능 기반 프로젝트 제작 역량 확보
📌 API와 연동하는 프론트엔드 기본 구조 이해
 

🎓 수강 효과

✔ 리액트 구조와 작동 원리에 대한 명확한 이해
✔ 단순 예제가 아닌 실제 개발 흐름에 가까운 프로젝트 경험
✔ 프론트엔드 개발 포트폴리오 구성 가능
✔ 웹 프레임워크 기반 실무 코딩 능력 향상
 

🙋‍♀️ 자주 묻는 질문 (FAQ)

Q. 리액트를 처음 접하는데 수강해도 괜찮을까요?
A. 물론입니다! 이 과정은 입문자를 위해 구성되었으며, 개발 환경 세팅부터 차근차근 설명합니다.

Q. 사전 지식이 필요한가요?
A. HTML/CSS와 기본적인 자바스크립트 개념 정도만 알고 계시면 충분히 따라오실 수 있습니다.

Q. 수강 후 어떤 프로젝트를 만들 수 있을까요?
A. 간단한 SPA 웹앱부터 CRUD 기능이 포함된 실전형 프로젝트까지 구현이 가능합니다.

학습 목표
✅ React 프로젝트 환경 구성 및 VSCode 사용법 이해
✅ 함수형 컴포넌트를 기반으로 한 리액트 구조 학습
✅ JSX 문법과 UI 렌더링 방식의 이해
✅ React Hook과 Router를 활용한 상태 관리 및 페이지 이동 구현
✅ SPA 기반 CRUD 기능 구현 실습
✅ 테스트용 API 서버 구축 및 백엔드 연동 방법 익히기
교육 대상
✨ 리액트를 처음 시작하는 웹 개발 입문자
✨ HTML/CSS 기초는 있지만 JS 프레임워크는 처음인 분
✨ 프론트엔드 취업을 준비하며 기초부터 다지고자 하는 예비 개발자
✨ 리액트를 활용한 포트폴리오 제작을 목표로 하는 분
학습 커리큘럼
  1. 리액트 훅 - useEffect 개념과 사용법(1)

  2. 리액트 훅 - useEffect 개념과 사용법(2)

  3. 리액트 훅 - useRef 개념과 사용법(1)

  4. 리액트 훅 - useRef 개념과 사용법(2)

  5. 리액트 훅 - useRef 개념과 사용법(3) - 하나의 el에 이벤트 여러 개 등록하기

  6. 리액트 훅 - 특정 엘리먼트에 useRef 훅 적용해보기(1)

  7. 리액트 훅 - 특정 엘리먼트에 useRef 훅 적용해보기(2)

  8. ID에 admin 글자 포함여부 체크

  9. react-router-dom 설치 및 리액트 부트스트랩 적용하기

  10. react-router-dom 설치 및 리액트 부트스트랩 적용하기 - 실습1

  11. react-router-dom 설치 및 리액트 부트스트랩 적용하기 - 실습2

  12. react-router-dom 설치 및 리액트 부트스트랩 적용하기 - 실습3

  13. react-router-dom 설치 및 리액트 부트스트랩 적용하기 - 실습4

  14. forEach vs. map 함수 사용법 및 차이점

  15. 배열 데이터 항목을 리스트 화면에 뿌려주기(1)

  16. 배열 데이터 항목을 리스트 화면에 뿌려주기(2)

환불 규정
  • 환불시 결제시 사용한 쿠폰은 복구되지 않습니다.
  • 환불금액은 정가가 아닌 실제 결제금액으로 계산됩니다.
  • 수강시작 후 7일 이내, 5강 미만 수강 시에는 100% 환불 가능합니다.
  • 수강시작 후 7일 이내, 5강 이상 수강 시 전체 강의에서 수강한 강의의 비율에 해당하는 수강료를 차감 후 환불 가능합니다.
  • 수강시작 후 7일 초과 시 정상 수강기간 대비 잔여일에 대해 아래 환불규정에 따라 환불 가능합니다.
    환불요청일 시 기준
    • 수강시작 후 1/3 경과 전, 실 결제금액의 2/3에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 전, 실 결제금액의 1/2에 해당하는 금액 환불
    • 수강시작 후 1/2 경과 후, 환불 금액 없음
예제로 마스터 하는 React 25제 입문 (함수형 컴포넌트 기반) Part.4 리액트 훅과 라우터 대표 썸네일 이미지

예제로 마스터 하는 React 25제 입문 (함수형 컴포넌트 기반) Part.4 리액트 훅과 라우터

강의 구성
16
총 학습시간
7시간 7분
수강 기간
60 일간 수강
32,000