.

.

.

.

.

이 주제는, Javascript 에 대한 사전 지식을 필요로 합니다.

.

.

.

.

.

React 는, Javascript 프레임워크입니다.

고도화 된 프레임웍 은 독립된 랭귀지 수준의 고유의 개발방식과 생태계를 갖게 되기도 하는데, 바로 리액트가 그러합니다.

비슷한 시기에 태어난 Angular, Vue 등도 아직 건재합니다만, React 의 입지는 갈수록 탄탄해지고 있는 느낌이죠. 생태계의 규모도 워낙 압도적입니다.

왜 React 인가.. 라는 질문은 이제 굳이 할 필요 없을 것 같습니다. 여기에서는, 어떻게 하면 React 를 빠르게 이해햘 수 있는가 라는 문제에 집중해 보려고 합니다.

.

.

이 프로젝트는, 리액트 초급 용으로 기획되었습니다.

이 프로젝트의 최종 단계에서 우리는,

• React-Router with dynamic Routing

• React-Hook-Form and Zod Form Validation

• Zustand 를 이용한 전역상태관리

• Suspense

까지 이해하는 것을 목표로 합니다. (NextJS 까지 다루지는 않습니다.) zustand 와 suspense 를 초급단계에서 핸들 되는 주제라고 말하기는 어렵겠지만, 본 프로젝트를 충실히 수행한 이후에는, ‘초급’ 이라는 수식어를 자신있게 떼어낼 수 있겠다는 의미로 받아들이시면 좋겠습니다.

.

.

이 프로젝트는, 총 6 개의 연속 아티클로 기획되었습니다.

#1. 리액트를 배우기 위한 사전 준비

#2. npm create vite@latest & first hooks

#3. more hooks & custom hooks

#4. Form handling in React

#5. React-Router-Dom

#6. Suspense and Next

.

.

전체 목차

,

.

#1. 리액트를 배우기 위한 사전 준비

1. JSX 구문

2. Imperative & Declarative

3. v = f ( s )

4. ES5/ ES6 functions and literals

#2. npm create vite@latest & first hooks

1. npm create vite@latest

2. Hello World React

3. basic hooks : useState

4. basic hooks : useEffect

5. Virtual DOM & StrictMode

6. Components & Props

7. React Dev-Tools

8. first project : your_name

#3. more hooks & custom hooks

1. Workthrough for prev. project

2. useRef

3. useMemo, useCallback, useId

4. useReducer

5. useContext

6. zustand

7. Custom Hook #1. useLocalStorage

8. Custom Hook #2. useAxiosFetch

9. second project : not yet fixed

#4. Form handling in React

1. Workthrough for prev. project

2. Form Basics : Controlled Input & UnControlled Input

3. React-Hook-Form

4. Zod + Resolver

5. fourth project : React-Hook-Form Project

#5. React-Router-Dom

1. Workthrough for prev. project

2. Routing in React

3. React-Router-Dom Basic

4. Nested Route

5. Dynamic Route

6. Error Handling and Fallback

7. Action handling

8. fifth project : not yet fixed

#6. Suspense and Next

1. Workthrough for prev. project

2. Portals

3. Suspense

4. Lazy

5. Async React Router

6. final project : not yet fixed