2021/05/13 Update - createSelector shopping cart 연습예제

React는 프레임워크가 아닌 라이브러리?

상태관리 라이브러리에 대해서 포스팅을 하는 글에서 갑자기 뜬금없이 React가 프레임워크인지 아닌지에 대한 이야기를 하는 이유는 React에서는 상태관리와 라우팅을 기본적으로 제공하지 않기 때문에 라이브러리로 분류한다는 이야기를 하기 위해서이다. Vue와 Angular에서는 자체적으로 상태관리를 지원하기 때문에 프레임워크라고 하지만 React는 다르다.
하지만 생태계 자체로써 봤을때에는 React도 프레임워크이다.

React의 상태관리 라이브러리의 선택지 Redux와 MobX

React는 Vue와 Angular와 다르게 자체적으로 상태관리를 지원하지 않기 때문에 Redux나 MobX를 선택적으로 사용해서 상태를 관리한다.

ContextAPI + useReducer가 Redux와 MobX를 대체할 수 있다?

JavaScript를 ContextAPI+useReducer라고 하고, jQuery를 Redux나 MobX라고 비유한다면, ContextAPI+useReducer의 조합으로 Redux나 MobX를 구현할 수 있다는 결론이 나온다. 하지만 손쉽게 사용할 수 있도록 이미 만들어져 있는 Redux나 MobX를 사용하는 것이 좋다.

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

• ReactJS Router

웹페이지의 링크를 클릭하면, 다른 화면으로의 전이가 일어나는데, 이러한 화면 전이와 관련된 routing은 React의 react-router-dom이라는 Routing package를 사용해서 정의한다.

• React Router Installation

  react-router-dom은 navigation을 만들어 주기 위한 package이다.

  1	$ yarn add react-router-dom

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

• Axios vs Fetch

• Fetch()

Fetch API는 Request나 Response와 같은 HTTP Pipeline에 접근 및 조작을 하기 위한 JavaScript interface를 제공한다.
Network를 통해 비동기방식으로 resource를 fetch하기 위해서 사용된다고 이해하면 된다.

사용방법은 아래와 같이 fetch() method에 자원을 얻기 위한 path를 넣어주고 request, response에 접근하면 된다.

1
2
3
4
5
6
7
8

// fetch의 기본적인 사용
fetch('examples/example.json')
  .then((response) => {
    // Do stuff with the response
  })
  .catch((error) => {
    console.log('Looks like there was a problem: \n', error);
  });

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

• ReactJS

NPM에서 React library를 살펴보면, 매주 400만건 이상의 유저가 React Library를 다운받고 있고, Facebook에 의해서 관리가 되고 있다. React를 가장 좋은 기술로 만들기 위해 Facebook에서 전적으로 자원과 커뮤니티, 서포트를 아끼지 않고 있다.

Front-end 개발의 생태계를 보면, 71.7%의 사용자가 이미 React를 이용했고, 다른 비슷한 프레임워크와 비교를 했을때 압도적으로 높은 수치의 사용자가 사용하고 있다.