1. Udemy(4)

Redux & Async code

• 리듀서는 순수하고 부작용(Side-effects: 데이터 요청(fetch) 등의 비동기 작업, 브라우저 캐시 같은 순수하지 않은 것들)이 없으며 동기적인 기능이어야 한다
• 따라서 비동기 코드는 컴포넌트 내부(ex. useEffect()) 또는 action creators 안에서만 사용해야 한다 !절대 리듀서안에서 사용하지 않는다!
• 하지만 Side-effects가 없는 서비스 개발은 없으므로 현재 저장소 상태를 디스패치하거나 확인하여 비동기 논리가 저장소와 상호작용하도록 해야하는데 그것을 가능하게 해주는 것이 리덕스의 미들웨어이다
• Redux에는 여러 종류의 비동기 미들웨어가 있으며 각각 다른 구문을 사용하여 논리를 작성할 수 있다
• 가장 일반적인 비동기 미들웨어로 redux-thunk, redux-saga, redux-observable가 있다

Thunk

• 액션 객체 대신 함수를 반환하는 액션 생성자를 호출할 수 있는 미들웨어이다
• Redux Toolkit의 configureStore기능은 기본적으로 썽크 미들웨어를 자동으로 설정한다
• Redux 툴킷은 현재 썽크 함수를 작성하기 위한 특별한 API나 구문을 제공하지않고, 특히 createSlice() 호출의 일부로 정의할 수 없기 때문에 리듀서 조직과 별도로 작성해야 한다
• Thunks는 일반적으로 dispatch(dataLoaded(response.data))와 같은 일반 작업을 전달한다

---

Router

• 리액트는 한개의 페이지로 이루어진 애플리케이션 SPA(Single Page Application)이다
• SPA는 한 번 요청에 모든 페이지를 다운받기 때문에 처음에는 로딩이 느릴 수 있지만 그 이후에 페이지 전환은 빠르게 가능하다
• 이렇게 페이지가 하나인 경우에도 일반 웹 사이트처럼 URL에 따른 페이지 이동을 할 수 있게 해주는 기능이 React Router(react-router-dom)이다

NavLink

• Link처럼 작동하며 Link를 대체할 수 있다
• activeClassName값을 줘, 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 CSS 클래스를 적용할 수 있다

// 예시
import { NavLink } from 'react-router-dom';

<NavLink to="/quotes" activeClassName="active"}>
  All Quotes
</NavLink>

// CSS
a.active {
  color: #e6fcfc;
}

Redirect

• 해당 URL을 열려고 하면 다른 URL가 열리게 된다

// 예시
import { Redirect } from 'react-router-dom';

<Route exact path="/">
  <Redirect to="/quotes" />
</Route>
// '/' 경로로 들어오면 '/quotes'경로로 연결된다

useHistory

• 화면 이동을 할수 있게한다
• history의 여러 메서드중 push와 relace가 있는데 push는 페이지를 이동하는 것이기 때문에 뒤로 돌아갈 수 있고 replace는 페이지를 교체하는것이기 때문에 뒤로 돌아갈 수 없다

useLocation

• 사용자가 현재 머물러있는 페이지에 대한 정보와 URL 쿼리에 대한 정보를 알려준다
  • url : http://localhost:3000/quotes?sort=asc
  • pathname: "/quotes"
  • search: "?sort=asc"
• 쿼리스트링이란, 사용자가 웹으로 데이터를 전달하는 방법중 하나로 URL 주소 뒤에 query parameters를 덧붙여 추가적인 정보를 서버측에 전달한다
  • ? : 쿼리스트링의 시작을 나타내는 기호
  • key=value : 한 쌍으로 구성
  • & : 여러개의 파라미터값을 전달할 경우 &로 구분

new URLSearchParams

• url 에서 query parameters를 가져오거나 수정할때 사용된다
  • 가져오기 : get('key')
  • 수정하기 : set('key', '변경할 value')

// 예시
import { useLocation } from 'react-router-dom';

// url = http://localhost:3000/quotes?sort=asc
const location = useLocation();
const queryParams = new URLSearchParams(location.search);

console.log(queryParams.get('sort'));  // asc

useRouteMatch

• match객체의 값에 접근할 수 있게 해주는 hook
• 인자로 프로퍼티들(path, strict, sensitive, exact)을 객체로 줄수 있으며 만약 path프로퍼티와 현재 페이지의 URL이 일치할 경우 해당 path의 match객체를 반환하고 일치하지 않을 경우 null을 반환한다
• 아무 인자도 넘겨주지 않으면 현재 Route의 match객체를 반환한다

// 예시
import { useRouteMatch } from 'react-router-dom';

const match = useRouteMatch();
/* 
{path: "/quotes/:quoteId",
 url: "/quotes/-MglBGIUbXEBBgspr81o",
 isExact: true
 params: {…}}
*/

const match = useRouteMatch('/qu');
// null

const match = useRouteMatch({
      path: '/quotes/:quoteId',
      strict: true });

strict & exact & sensitive

주소	가능	불가능
strict path="/one/"	/one/, /one/two	/one
strict path="/one"	/one/, /one/two, /one
exact path="/one" or "/one/"	/one, /one/	/one/two
strict exact path="/one"	/one	/one/, one/two

• strict : 뒤에 슬래쉬를 생략할 순 없지만 추가할 수 있고 다른주소를 붙일 수도 있다
• exact : 뒤에 슬래쉬를 추가 또는 생략 가능하지만 다른 주소가 붙어선 안된다
• sensitive : 대소문자를 구분한다 (strict, exact : 대소문자 구분x)

useParams

• 현재 Route의 match.params에 접근하기 위한 hook
• URL 매개 변수의 key/value 쌍의 객체를 반환한다

// 예시
import { useParams } from 'react-router-dom';

const params = useParams();
// {quoteId: "-MglBGIUbXEBBgspr81o"}