• Feed
  • Explore
  • Ranking
/

    React 를 배워봅시다. #0

    G
    Ganymedian
    2024.06.25
    ·
    3 min read

    .

    .

    .

    .

    .

    이 주제는, 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