React #01 - 기초 & todolist 비동기(Ajax) 복습

 

css 전처리기 :  

번들러 : vite

리액트 vs 자바스크립트 : 

   자바스크립트를 모르면 리액트를 할 수 없다. 

   

 

주차별 내용(일정은 변동 가능)
1주차
TodoList - vanillaJS
Counter 프로그램 - 라이브러리 개발
TodoList - 라이브러리 이용
TodoList - React

2주차
리액트 란? 리액트 역사, 리액트 개발환경 설정, create-react-app, Vite
리액트 개발에 필요한 자바스크립트 문법
JSX, 가상 DOM, 리액트 랜더링
리액트 컴포넌트(함수형 컴포넌트, 클래스 컴포넌트)와 라이프 사이클
리액트 훅, useState, useEffect

3주차
리액트 훅, useRef, useReducer
리액트 훅, useMemo, useCallback
사용자 정의 훅 만들기, 고차 컴포넌트
Context API

4주차
리액트 상태관리 라이브러리
Recoil, Zustand
리액트 Router
HTTP 통신(Fetch API, Axios, React Query)
CSR과 SSR, Next.js

5주차
백엔드 개발과 API 서버
Styled components, Tailwind CSS
프로젝트 실습 - 로그인, JWT 토큰 인증
프로젝트 실습 - 게시물 관리

 

 

---

고전적인 레거시 방법으로 JS

 

getTodoItemElem : Todo list의 text가 입력되었을 때 dom 객체로 만드는 함수 

 // Todo 아이템을 받아서 DOM 객체로 만들어 반환

    function getTodoItemElem(item){

      // return (

      //   <li>

      //     <span>1</span>

      //     <span><s>샘플1</s></span>

      //     <button type="button">삭제</button>

      //   </li>

      // );

      // <li></li>

      const liElem = document.createElement('li');

      // <span>

      const noElem = document.createElement('span');

      // <span>

      const titleElem = document.createElement('span');

      // <button>

      const deleteElem = document.createElement('button');

      // 1

      const noTxt = document.createTextNode(item.no);

      // 샘플1

      const titleTxt = document.createTextNode(item.title);

      // 삭제

      const deleteTxt = document.createTextNode('삭제');

      // <span>1</span>

      noElem.appendChild(noTxt);

      if(item.done){  // 완료

        // <s>

        const sElem = document.createElement('s');

        // <s>샘플1</s>

        sElem.appendChild(titleTxt);

        // <span><s>샘플1</s></span>

        titleElem.appendChild(sElem);

      }else{  // 미완료

        // <span>샘플2</span>

        titleElem.appendChild(titleTxt);

      }

      // <button type="button">

      deleteElem.setAttribute('type', 'button');

      // <button type="button">삭제</button>

      deleteElem.appendChild(deleteTxt);

      // <li><span>1</span></li>

      liElem.appendChild(noElem);

      // <li>

      //   <span>1</span>

      //   <span><s>샘플1</s></span>

      // </li>

      liElem.appendChild(titleElem);

      // <li>

      //   <span>1</span>

      //   <span><s>샘플1</s></span>

      //   <button type="button">삭제</button>

      // </li>

      liElem.appendChild(deleteElem);

      return liElem;

    }

 

1. document.createElement('li') 를 사용하여 엘리먼트를 생성한다. 

2. document.createTextNode(item.no) 를 사용하여 텍스트 노드를 생성한다. 

3. appendChild() => 태그의 안쪽에 값을 붙여넣는다.

 

JS로 만드려면 이렇게 오래걸리고 힘들다!!