리액트복습

리액트복습

• 리액트 컴포넌트껴넣는 과정 익숙해지기
• 스타일이 깨지지않게 주의할것
• ReactDom이 필요하면 import해야함..
• 컴포넌트 두가지 : 함수형(가볍게 페이지분리해서 사용) / 클래형 (state를 이용한 데이터 바인딩필요)

원하는 프로젝트폴더에서 react app 설치

 

리액트앱설치한 폴더(package json)이 들어있는 폴더에서 npm스타트

index.js가 App을 import하고있다.

App.js에서 리턴값에 원하는걸 넣어서 화면에 출력한다.

---

html폴더에서 필요한것만 쓰자

html폴더의 index에서 바디부분만 가져오자.

function App()의 리턴에 넣어준다.

이때 에러가 발생

반드시 전체를 감싸는 태그가 있어야한다.

<div>중첩이 발생

 

Header는 주로 데이터를 바인딩하지않는다

메인쪽이라 함수형으로하자

 

()=>3; // 함수를 정의하는데 3을 리턴하는 함수, 무명

header.js만들고, header부분 리턴하는 함수만들기

class를 className으로 변경

---

라우팅하기위한 라이브러리 설치

url요청에따라서 스위칭

a 태그대신 Link태그로

/이게 우선순위가 제일위로..처리됨.

"/"를 밑으로둘수도있지만 exact를 넣어주면 딱 정확한 url이된다(패턴x)