생각기록
2023-01-17 React Router, redux 본문
React Router
React 에서 Router 활용하기
지금까지 Router 는 입력받은 주소에 따라 페이지를 변경해주는 역할로 많 이 사용이 되었습니다.
React 에서는 컴포넌트별(DOM) 라우팅이 가능합니다!
조건부 렌더링으로 처리가 가능하지만 서비스의 경우 주소에 따른 구분을 해 줘야만 서비스별 구분이 가능하므로 라우팅 기능을 활용이 필요 합니다!
그리고 해당 모듈을 쓰면 페이지 깜박임 없이 부드러운 브라우징 가능
리액트는 컴포넌트가 주
주소에 따라서 보이는 컴포넌트를 변경 할 수 있다.
html 파일이 변경된다는 것은 깜빡임 없이 리랜더링으로 부드럽게 여러가지를 표현 가능하다
왼쪽은 파일 변화가 있지만,
오른쪽은 주소가 바뀌어도 파일이 바뀌는게 아닌 그려주는 얘들만 다시 그려주는거고, 새로고침이 필요 없다.
모듈 설치 및 적용
npm install react-router-dom
• Npm install react-router-dom
그리고 index.js 컴포넌트로 가서 App 컴포넌트를 라는 react-router-dom 이라는 컴포넌트로 감싸 주세요!
임포트
• 그외의 라우터로는 가 유명하며 주소의 해시 주소 localhost:3000/#hash 를 감지할 수 있는 라우터 입니다!
React Router 용 컴포넌트 만들기
라우팅을 하려면 주소이동
App.js에서
네비게이션 메뉴 만들기
주소 링크를 클릭하면, 리액트가 제공하는 라우팅을 쓰지 않아서 깜빡임이 보인다
지금은 라우팅 구현이 안되어 모든 컴포넌트가 하나의 페이지에서 보이고 있 습니다! → 이를 해결하기 위해 라우팅을 구현!
routes / route
주소가 /면 , 해당 컴포넌트를 보여라!
주소변화가 일어나면, 해당 매치되는 컴포넌트만 보여줍니다.
임포트 가져오기
그래도 깜빡입니다!
a태그는? html이고, 브라우저한테 내가 클릭되면 페이지를 새로 고치는게 기본 폼입니다.
리엑트에서는 link 컴포넌트를 사용
Link to!
깜빡임이 없어졌습니다!
주소에 맞는 원하는 서비스 컴포넌트들을 딱딱 보여줄수 있겟죠
구조 변경
해더 컴포넌트를 따로 빼서 만듭니다.
이런식으로 네브바를 컴포넌트로 빼서 필요한곳에 임포트하면 된다.
App.js
주소 예외 처리
Page Not Found
실제 서비스의 경우 사용자가 예상하지 못한 주소 값을 입력하는 경우가 발 생 합니다.
이럴 때, 브라우저에서 제공하는 404 Not Found 페이지를 띄우면 일단 서 버 응답을 기다리는 시간도 오래 걸릴 뿐더러, 결과 페이지가 서비스의 신뢰 를 깨는 역할을 하게 됩니다!
따라서 잘못 입력 된 주소에 대한 예외 처리가 필요합니다!
React-router-dom 모듈은 해당 부분에 있어서 * 라는 편리한 방법을 제공 합니다!
* 는 모든 주소 입력을 의미하며 아래와 같이 사용합니다
매칭되는지 라우터 채킹하고
위에서 주소가 걸리지 않는다는건 서비스 지원하지 않는 다는 의미입니다.
파라미터 요청에 따라 다른 결과를 내게 하는 법
주소 Parameter 활용
주소의 Parameter 값 활용
• 컴포넌트에 2개의 게시글이 있다고 가정하여 parameter 를 활 용하여 봅시다!
/ 가 있고 없고의 차이?
/ 없이 시작
현재 라우팅 된 주소의 뒤에 해당 주소의 문자열이 추가 됨
현재 라우팅 주소가 locahost:3000/board 일 때
1 → locahost:3000/board/1
/ 였다면 localhost:3000/1
절대경로와 비슷하다고 생각하면 된다.
Route 에 Parameter 선언
App.js 에 선언 된 라우터 선언부에 Parameter 를 선언해 봅시다!
기존과 같은 방법으로 주소/:parameter 로 선언하면 됩니다!
파라미터 이름은 > 주소/:이름
BoardDetail 컴포넌트에서 parameter 받기
Parameter 는 useParams 로 받을 수 있으며
usePrams 임포트 하기
useParams 로 선언한 객 체 변수에 담기게 됩니다
Prams로 하면
객체로 받는다. 주소는 문자로 숫자 1이 들어있다.
boardID 라는 키와 '값'
구조분해 할당 해보기
객체 내부 키를
최상단 <app/> 브라우저 머시기로
app.js 라우팅 해줘야한다.
실제적 파라미터값을 받으려면, 주소상에서 파라미터를 선언한다. 그것을 받고싶은 컴포넌트로가서 use파람스를 인포트해서 사용하면 된다.!
Redux
상태관리 라이브러리
state를 관리하는 도구 입니다.
R로 시작해서 React 랑만 쓰는 것 같지만, 상태 관리가 필요한 다른 프레임 워크(Angular.js / Vue.js / 심지어 Jquery) 에서도 사용이 가능합니다!
물론 Redux 하나를 전체가 공유하는 것은 아니고 Redux 의 개념을 각각의 프레임 워크에 맞춘 라이브러리를 사용합니다
따라서, 우리가 쓰는 건 React-Redux 입니다
코딩애플 추천
React 입문자들이 알아야할 Redux 쉽게설명 (8분컷) - YouTube
왜쓰는가?
1. props 문법 귀찮을 때
2. state 변경 관리할 때 용이
리덕스의 행동을 이해하기 위해 이런 단어들을 알아야 합니다.
- 모든일은 store 내부에서 발생
- 그 내부에 우리가 관리하고자하는 state값이 다 있습니다.
- useSlector라는 훅으로 빼서 씁니다.
- view에서 우리는 store내부의 state값을 빼서 쓰는데,
- dispatcher 는 요청을 store에게 가서 알려주는 역할을 합니다.
- store에서 일하는 실질적 얘는 reducer 하나입니다.
- reducer 가 일을해서 state에 반영하고, view에 전달된다.
reducer 계속 순환하고 무조건 단방향이다!!
컴포넌트들은 요청만 할 수 있도록!
갑자기 버그가 일어나면, 모든 컴포넌트를 뒤져야하는데.. 위의 방법대로 하면! 관리가 용이하다
컴포넌트에서 state 수정 요청하려면?
다른 라이브러리는 이런게 있습니다.
코딩 애플 코드로 하나하나 확인하기
Redux 기초 세팅!
• Redux 를 위한 새로운 App 을 만듭시다! • Npx create-react-app redux-app • 앱 생성 후, redux 관련 모듈을 설치 합시다! • Npm install redux • Npm install react-redux
리덕스와 리액트-리덕스 두개를 설치 합니다!
리액트라우터 돔과 닮아있습니다.
스테이트를 한곳에 모아 관리하는데
<App/>을 특정 컴포넌트는 Provider로 감싸야 합니다.
store 만들기
Redux 에서 createStore 를 임포트 한 뒤, store 를 만들어 줍니다
그리고 provider 컴포넌트에게 상태 관리를 할 store 속성에 만들어진 store 를 부여해 줍니다!
이해라기보다는 이렇게 쓰면된다 ! 외울 수 밖에 없는 문법임..
유일하게 상태변경 할 수 있는 함수 Reducer
( state = weight )
인자에 ?
Store 에 저장 된 값 받아오기!
Store 의 상태 값을 받아올 때에는 React-redux 모듈의 useSelector 를 사용하면 됩니다
리턴이 되어 weight라는 변수에 들어가게 된다..?
값을 변경하는 얘는
Action & Reducer
리듀서 !
액션?
할지 멈출지 돌아갈지..
액션이라는 객체 내부에 type이라는 객체 키가 들어이싿.
리듀서는 (state, 편지지action )
두번째 인자로 편지지
if ( action.type === '증가' ) {
state++;
}......................
상점으로 따지면 창고관리인 같은 역할을 합니다.
Action & Dispatch
• 컴포넌트에 있는 Action 을 index.js 에 있는 reducer 에 까지 보내려면 React-redux 에 있는 useDispatch() 를 사용해야 합니다!
편집지를 보내는 역할을 useDispatch() 가 한다. 보통 이것을 Dispatch 변수에 담아서 쓴다.
useDispatch() 를 하나의 변수에 담고 해당 변수를 통해 Action 의 값을 Reducer 로 전달해 주면 됩니다!
• Dispatch 로 전달 된 Action 의 type 의 값에 따라 Reducer 는 State 값 을 변경하고, 해당 State 값은 컴포넌트에 반영 됩니다
인자로 객체로써 dispatch({ type : ' 증가 ' }) 보내야 한다.
'강의 정리 > React JS' 카테고리의 다른 글
| 2023-01-19 / React Redux 첫 수업/ to do list 만들기 (0) | 2023.01.19 |
|---|---|
| 구조 분해 할당 (0) | 2023.01.18 |
| 2023-01-17 useEffect실전, public 폴더 사용, props.children 이란? (0) | 2023.01.17 |
| 2023-01-12 React useRef (0) | 2023.01.12 |
| 2023-01-10 (0) | 2023.01.10 |
