[React] 5일차 일기

사실 어제 쓰는거 깜빡해서 어제꺼랑 오늘꺼 같이 몰아서 쓸건데 하아 진짜 어렵다!! 슬슬 어려워지기 시작한다. 뭔가 머리론 이해가 다 되고 이래저래 잘 풀리긴 하는데 내일 다시 보면 모를거같은 이 느낌? 그럴 땐 또 복습하면 되지~~! 한 10번은 돌려야 내꺼될듯

 

1. 이미지를 그냥 src에 넣어서 써도 되지만 public폴더에 넣어서 사용한다는 가정하에 리액트로 만든 html 페이지를 배포할 때 안전하게 이미지를 사용하려면 img src에 process.env.PUBLIC_URL + '/경로' 로 작성해야한다.

 

2. 길고 복잡한 코드들은 App.js 말고 다른 js파일로 만들어서 쓸 수 있다. 다른 js파일을 App.js 파일로 불러오고 싶으면 export default 변수명 으로 내보내고 import 변수 from '경로' 로 받으면 된다.

 

3. 여러개의 자료를 내보내고 싶으면 export{변수1, 변수2} 이렇게, 받을 땐 import{변수1, 변수2} from '경로' 이렇게 하면 가능하다. 이렇게 중괄호 안에 변수들은 다른 작명은 안되고 변수 그대로 써야한다.

 

4. 컴포넌트도 export, import 가능하다. 상당히 유용하다.

 

5. 리액트는 Single Page Application 이기 때문에 index.html 파일 하나로만 모든 페이지가 구성된다. 그래서 페이지를 나눌 땐 라우팅을 해주어야 하는데 이때 유용한 것이 'react-router-dom' 이다.

 

6. react-router-dom 사용 방법

  1) 터미널에 npm install react-router-dom@6 작성 (6버전)

  2) index.js 들어가서 <App/> 컴포넌트를 <BrowserRouter>로 감싸준다.

 

7. App.js에서 import {Routes, Route, Link, useNavigate, Outlet ...} from 'react-router-dom' 하면 여러가지 import 해올 수 있다.

 

- <Routes>안에 <Route> 넣으면 라우트됨.

- <Route path='/경로' (그냥 '/'만 쓰면 메인페이지) element={페이지에 띄울 거 (그냥 div나 글자, 컴포넌트 같은거 넣으면 됨)} >> 페이지를 컴포넌트화 시켜놓으면 라우팅하기에 편리

- Link는 <Link to='/'>홈</Link> 이런식으로 쓰면 된다. html에는 a태그로 나온다.

- useNavigate는 페이지 이동을 도와줌. 함수라서 변수에 담아서 쓰면 됨.

ex) <div onClick ={() => {useNavigate 변수명('/경로')}}></div> 이렇게 쓰면 div 누르면 경로로 이동

- useNavigate 변수명(1)이라고 쓰면 앞으로 한 페이지 이동, -1쓰면 뒤로 한페이지 이동한다. 숫자따라 페이지 이동수도 달라짐.

- 존재하지 않는 페이지를 나타낼 때 404페이지 보여주면 된다. <Route path='*'> 이렇게 쓰면 존재하는 페이지 외에 나머지를 의미하는데 여기에 element를 404페이지로 디자인하면 됨.

- <Route>안에 또 다른 <Route>를 넣으면 부모 경로 안에 또 다른 자식 경로로 이동. 이걸 Nested Routes라고 한다.

ex) <Route path='/about'><Route path='contact'></Route></Route> 이렇게 쓰면 /about/contact 이런 식의 링크로 이동함.

- nested route 접속하면 부모 element와 자식 element 둘 다 보여줌. 부모 요소에 자식 요소를 보여줄 위치를 <Outlet></Outlet>으로 지정해줌.

- URL파라미터라는걸 써서 페이지를 무한대로 만들어낼 수 있음. 경로 뒤에 :/작명 쓰면 된다.

- useParams() 쓰면 URL파라미터 가져올 수 있음.