[모각코] ReactJS 프로젝트 시작하기(3)- Recoil,Router에 대해서

먼저 내가 맡은 파트인 검색이랑 localhost의 경우 router설정은 필요없지만 

router에 대해서 1도모르기때문에 코드가 이해되지않는 경우가 다반사였다.

그래서 이번 모각코시간에는 router에 대해나 개념을 조금 잡고 recoil에 대해서 파보기로하였다

 

Router 

주로 페이지이동을 위에 사용되는데 컴포넌트들을 주소에따라 배치를 변경해주는 작업을 의미한다

데이터가 도착점까지 가는 경로들을 구성하는 과정이라고 이해했다.

이를 이용하려면 

npm install react-router-dom

으로 설치해야한다!

**최근에 6버전으로 업데이트가 되어 구글링할때 router 6 이런식으로 하는게 좋다고한다.

 

사용방법은 다음과같다 

1. app.js에서 <Router />로 추가해줘야한다

2. Router.js 따로 생성하여 경로 선언해주기

위와같이 원하는이름의 경로를 붙여줘서 path를 설정해주면된다

또한 element로 호출해줄 컴포넌트들을 넣어주고,넣어주려면 import도 해주면된다!

3. Link to로 이동 요소 설정해주기

가만히 있다가 페이지가 로딩되는 방식이 아니라 버튼을 누르거나 어떤 이벤트가 있을때 페이지이동이있어야하므로

어래와 같이 Link 태그를 활용하여 대상태그를 감싸주는식으로 작성해준다

 

Recoil

recoil은 React전용 전역상태관리 라이브러리 라고한다

장점은 redux처럼 다양하게 구성을 할필요가 없고 비동기요청이 심플한 그런친구라고한다.

이것도 당연히 깔아야한다

npm install recoil

그리고 index.js에도 넣어줘야한다