React_개념_Day_05_01

 

●

백과 서버를 만들고 묶는 것

 

#

태일윈드를 사용, js로 작업들어갑니다.

 

컴포넌트는 함수형, 그리고 리턴이 항상들어가있습니다.

ex) div가 소문자로들어가면, 태그입니다.

대문자는 컴포넌트 우리가 만든것입니다.

 

모든태그는 시작이있으면 끝이 있습니다.

 

 

return은 하나의 자료만 리턴합니다.

부모로 감싸서, 통으로 리턴을 합니다.

 

 

ex)같습니다.

속성을 객체형태로 받아오는 것이 props

매개로 넘겨받는 값, 자바스크립트의 한 객체를 받습니다.

객체는 {key:value}중괄호

그다음 그 객체들을 배열로 묵는것은 [ {key:value},{key:value} ]   대괄호 첨부

 

대괄호[] :배열

중괄호 {} : 객체

 

#

제이슨 {“Key”: “value”}

모든 프로그램은 텍스트프로그램 처리합니다.

쌍따옴표로 되어있습니다.

#@media 반응형

단계적 실행

#css적용

#태일윈드가 여러개의 스타일싯트중 하나 (태일윈드가 인텔리제이가 적용잘됩니다.)

 

snipet

스타일시트의 상세정보가 띄어주는 기능도 제공합니다.

(기존에 썻던 css의 문법을 해석해줍니다.)

 

#태일윈드와

#1.75rem(루트크기를 기준으로 1.75배입니다.) 

#컴포넌트는 export default 시켜야합니다.

#똑같습니다.(함수선언과 관련되어있습니다.)

대문자는 컨포넌트

어떻게 분류하는것이 최상인지, 반복하는 것은 무조건 다로 뺸다. 중복을 최소화한다.

어느 한곳에서 슬떄는, 따로 호출해서 씁니다.

 

제어문안에서 코드가 많다면, 메소드로 빼고, 메소드를 호출하게 합니다.

누가봐도 읽기 쉽게 처리합니다.

리팩토링할때,

 

#라우터

최적의 경로를 찾아서, 데이터가 넘어갈수있도록, 도와주는 역할.

안내자 역할을 하는 것

따로 폴더로 빼서, router(root.js)

 

import {createBrowserRouter} from “react-router-dom”;

 

#

어떤것을 가져다쓰냐면, root사용

●

#App.js

#root.js

lazy

suspens : 리액트에서 제공하는 것, 

 

리액트는 하나의페이지 작성, 뭔가를 읽을떄마다, 컴포넌트로 읽을떄마다, 재랜더링, 

//suspense, lazy : 필요한 순간까지 컴포넌트를 메모리상으로 올리지 않도록(렌더링), 

지연로딩을 위해 사용

const Loading = <div>Loading…</div>

const Main = Lazy(() => import(“../pages/MainPage”))  ㅡ 콜백함수(함수안에 함수호출)

 

const root = createBrowserRouter([

{

path:””,

element:<Suspense fallback={Loading}><Main /></Suspense>

}

])

 

export default root;

#MainPage.js

 

#지연로딩

임폴트에서 불러 오는 방법이- 즉시로딩

함수처리해서 사용하는 방법이 - 지연로딩 

#링크의개념(html의 a태그가 링크개념이라 보면됩니다.)

#

//BasicLayout 컴포넌트는 화면 상단에는 공통적인 메뉴와 링크를 보여주고 

//아래쪽으로 각 페이지 컴포넌트를 출력하는 구조

 

함수컴포넌트

md : 미디어쿼리, 

 

 

●

#칠드런이란 개념

#상단메뉴 만들기

 

#

모듈 - 관련있는 기능들을 묶어놓는 것

 

#

요즘사이트들은 번호로 많이 이동을 합니다.

page,size라는 쿼리로 처리

 

/todo/list

/todo/add

/todo/read/번호 ㅡ 조회페이지 번호,page,size 대부분 번호로 이동합니다. 11번가,

/todo/modify/번호 ㅡ 수정/삭제페이지, 특정회원에 대해서, 번호에 대해서, 

번호,이동할페이지,사이즈가 필요합니다.(번호,page,size)

 

#

/todo/list,add,read,modify를 처리할려고 칠드런이라는 개념을 사용/children

상하마진

아울렛이라는 컴포넌트를 이용,

 

Basiclayout의 영향을 받고있습니다. 

todo가 들어왔을때, todo에 대한 레이아웃을 설정합니다.

 

#위아래 여백 설정

#todo설정

#outlet이란 개념

 

#