[TIL] ReactJS 라우트와 리덕스

Route

• 라우팅을 통하여 리액트 프로젝트에서의 페이지 전환을 주로 진행한다

라우트 내에는 History, match , location등을 활용하여 라우트를 사용한다

match 같은 경우는 랜더링이 된 컴포넌트 내에서의 정보를 보여준다.

location.goBack, location.push('/'), location.replace 등을 활용하여 페이지 전환을 할 수있다

Redux

• 리덕스와 context api는 유사하지만 프로젝트의 크기가 크면 리덕스를 사용하는것이 좋다.
• 리덕스에 장점으로는 상태관리뿐 아닌 다른 유익한 기능이 많이 포함되어있다 Context에서는 직접만들어야하는 useSelector 같은 기능이 리덕스에는 어느정도 최적화가 되어있는 기능으로 이미 존재하기에 만들어져있는것을 사용하는것이 효율적이다.
• 리덕스의 3가지 꼭 지켜야하는것들이 있는데
  1. 프로젝트에 스토어는 단 하나만 유지하는것이 좋다
     • 스토어가 많으면 리덕스 툴을 사용하기 힘들다
  2. 리덕스는 순수함수로만 구성해야한다.
     • 동일한 인풋이 들어갔을때 동일한 아웃풋을 줘야한다.
     • 예를들어 Math.random(), new Date(), axios.get() 등등 어떠한 이유로 동일한 인풋을 줘도 아웃풋이 달라지는 이러한 연산등은 사용하지않는다.
  3. 상태는 읽기 전용이다.
     • 배열 및 객체의 원본을 바꾸는 pop, push, splice 등등은 사용하지 않는것이 좋다.
     • 불변성 유지가 되어야 상태관리가 원활해진다.

2. 리덕스의 구성요소 및 키워드

참고문헌: https://react.vlpt.us/redux/01-keywords.html

1. 액션 타입

2. 액션 생성 함수

3. 리듀서

4. 리듀서작성 요령

5. DUCKS 패턴 - 모든 구성요소를 한파일에 몰아서 작성하는 방법

6. 기본 요령 - 액션과 리듀서를 다른 폴더에 작성하는것 (이게 더 좋아보임) https://github.com/reduxjs/redux/blob/master/examples/todos/src/actions/index.js

1. 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트

   • 프레젠테이셔널 컴포넌트란 스토어에 직접적으로 접근하지않고 필요한 값 함수는 props 로만 받아와서 작성하는 컴포넌트입니다. (components 폴더에 작성)
   • 컨테이너 컴포넌트란, 리덕스 스토어의 상태를 조회하거나, 액션을 디스패치 할 수 있는 컴포넌트를 의미합니다. 그리고, HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트들을 불러와서 사용합니다. (containers 폴더에 작성)