React_개념_Day_04

1

2

3

4

 

5

6

7

8

 

ㅡㅡㅡ

 

●

#tailwindcss ㅡ css참고

#바탕화면에 react폴더 생성(c드라이브에서 폴더생성하면, 권한이 필요하지만,경로문제가 안걸립니다.)

#비쥬얼스튜디오에서 front폴더 열기 그리고 터미널(ctrl + shift + `)

#참고 : 프로젝트명 소문자와 숫자로만 작성해야합니다.

#결과

 

ㅡCRA(react)

기본적인 

 

ㅡVite

 

#리엑트(SPA) - 싱글페이지 어플리케이션

 

#하나하나, conponent

#설치1. npm install -D tailwindcss

 

#결과

 

#2. npx tailwindcss init

 

주소처리를 도와주는게 라우터

 

#3. 라우트 설정(npm install react-router-dom) - 경로처리

 

#

●

 

#

 

#root.js

#App.js

 

#

●4

 

리액트의 fallback 

 

 

fallback 문제가생기면, 제를 처리해버려 로딩이라 처리해버려.

 

무슨 동작을 했을대 제대로 동작하지 않앗을때, 대신 실행해주는것, 

엘레멘트(인스턴스 = 객체개념)

path : about

불러올떄, SPA라서 한페이지, 컴포넌트 단위로 불려져옵니다.

변화되는 것들만 처리한다.

모든것을 컴포넌트 단위처리를 합니다. 클래스

요소요소가 모여 하나의 페이지

 

#라우트

라우트하나에서 수월하게 처리, > 라우트 

루트js , todo라우터를 빼고 분할해서 처리했습니다.

root와 todoRouter를 분할처리

전체 : root

경로설정 담당 : todoRouter

 

라우터 - 경로가 들어오면, 경로로 들어가게 하는 것 , 리엑트에서 어느컴포넌트에. 

get, post mapping 처리한다음에, 리턴으로 보내게 되는 것을 router에다가 하면됩니다.

controller단, 최종적인 결과를 뷰로 보냈지만, 여기에서는 뷰페지에서 가기보단, 처리하는 개념 뺴고, 처리할수있도록 컴포넌트와 연결시킵니다.

#

lazy와 Suspense를 사용해서, 지연기능을 사용했다.

바로바로되기 처리되기보단, 부르는 시점에서 메모리 올려서 두개를 처리하는 목적에 있습니다.

●

●

●

●