2장: React Router DOM 편
리액트를 이용해 여러 개의 페이지로 이뤄진 애플리케이션을 만드는 데 도움을 주는 react-router-dom의 사용법을 익힌다.
01 수업 소개
리액트 라우터 DOM을 소개하고 필요성을 이해한다.
02 실습 준비
실습에 사용할 앱을 생성한다.
03 Router
BrowserRouter의 역할과 사용법을 익힌다.
04 Link
Link, NavLink컴포넌트의 역할과 사용법을 익힌다.
05 Nested Routing
하나의 라우터로 path값에 따라 주소를 처리하는 법을 익힌다.
06 수업을 마치며
추가로 배울 고급 주제에 대해 알아본다.
https://lshjju.tistory.com/272
egoing - React Router DOM - stackblitz ver
React Router DOMhttps://lshjju.tistory.com/135 React.js Router DOM - 리액트 라우터 돔React Router DOM의 주요 기능 React는 '단일 페이지 애플리케이션(SPA)'을 만드는 데 주로 사용됩니다. SPA는 기본적으로 HTML 파일
lshjju.tistory.com
3장: 스타일드 컴포넌트 편
리액트에서 CSS의 속성을 그대로 사용할 수 있게 도와주는 스타일드 컴포넌트의 사용법을 익힌다.
https://lshjju.tistory.com/273
egoing - styled component - stackblitz ver
Styled componenthttps://lshjju.tistory.com/146 React.js Styled component - 리액트 스타일드 컴포넌트Styled ComponentsReact에서 UI를 만들다 보면 스타일링 때문에 고민하는 경우가 많으실 거예요.CSS 파일은 따로, JavaSc
lshjju.tistory.com
4장: Context API 편
리액트에서 상태를 전역적으로 공유할 수 있게 도와주는 도구인 Context API의 사용법을 익힌다.
https://lshjju.tistory.com/274
egoing - Context API - stackblitz ver
Context APIhttps://lshjju.tistory.com/147 React.js - Context API - 리액트 콘텍스트 에이피아이React.js - Context API - 리액트 콘텍스트 에이피아이 1. Context API는 왜 필요한가요? (Props Drilling 문제)React에서 컴포넌트
lshjju.tistory.com
5장: useReducer 편
useState와 같은 역할을 하지만, 조금 더 복잡한 상태를 체계적으로 관리하도록 돕는 useReducer의 사용법을 익힌다.
https://lshjju.tistory.com/275
egoing - useReducer - stackblitz ver
useReducerhttps://lshjju.tistory.com/148 React.js - useReducer - 리액트 유즈리듀서React useReducer 란 무엇인가요? 이번에는 React의 또 다른 중요한 Hook인 **useReducer**에 대해 알기 쉽게 설명해 드릴게요.useState가 간
lshjju.tistory.com
6. react-redux 편
상태 관리 도구인 리덕스(redux)를 리액트에서 쉽게 사용할 수 있게 돕는 도구인 react-redux의 사용법을 익힌다.
https://lshjju.tistory.com/276
egoing - React redux - stackblitz ver
React reduxhttps://lshjju.tistory.com/150 React.js - redux - 리액트 리덕스Redux(리덕스)란 무엇인가요? Redux는 React(뿐만 아니라 다른 JavaScript 라이브러리/프레임워크)에서 **애플리케이션의 상태(State)를 효율적
lshjju.tistory.com
7. 리덕스 툴킷 편
리덕스 툴킷(Redux toolkit)을 활용하여 리덕스 개발 환경을 쉽게 구축하는 방법을 익힌다.
https://lshjju.tistory.com/277
egoing - redux tool kit - stackblitz ver
React.js - redux tool kithttps://lshjju.tistory.com/152 React.js - redux toolkit- 리덕스툴킷Redux Toolkit(리덕스 툴킷)이란 무엇인가요?Redux Toolkit은 Redux(리덕스)를 더 쉽고 효율적으로 사용하기 위해 만들어진 **공식
lshjju.tistory.com
8. Next.js 편
리액트, 익스프레스(Express.js), 리액트 라우터 돔(React-Router-Dom), 서버 사이드 렌더링 등 웹을 구현하는 데 사용하는 여러 기술을 영리하게 섞어 놓은 기술인 Next.js에 대해 알아본다.
https://lshjju.tistory.com/357
Next.js project index
Final buildhttps://stackblitz.com/edit/stackblitz-starters-m6ogzzsp?file=app%2Fpage.tsx nextagram - StackBlitzThe React framework for productionstackblitz.comhttps://lshjju.tistory.com/359 Next.js basicNext.jshttps://lshjju.tistory.com/341 Next.js ?Next.js
lshjju.tistory.com
교재 마지막 파트인 Next.js 파트는 간단한 소개 정도의 분량입니다.
그러므로 이 파트는 스케줄에 따라 진행하지 못하고 종강 할 수도 있습니다.
그 상황에 대비해 위 포스팅에 프로젝트 개발 과정을 정리해 두었습니다.
필요하다면 종강 후에도 독학 가능할 것입니다.
이 프레임 워크는 공식 교재 버전 이후 새로운 버전이 발표 되었습니다.
그리고 프레임워크 기본 세팅이 아주 많이 변경 되었습니다.
그래서 이 파트는 공식 교재가 아닌 강사가 개발한 프로젝트로 진행 합니다.
'React.js' 카테고리의 다른 글
| 생활코딩! React 리액트 프로그래밍 1장: 리액트 기초 편 (0) | 2026.07.03 |
|---|---|
| 생활코딩! React 리액트 프로그래밍 Warming up (0) | 2025.06.20 |