React 추가 개념 정리) Context API 와 Redux 비교, swr , mobx, react - curring

김아름·2022년 4월 24일
0

- Context API 와 Redux 비교하기

  • 전역 상태 관리
    우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다.
    이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만
    하위 컴포넌트에서 사용
    할 수 있습니다.
    모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다.
    하지만 여러 컴포넌트에서 사용되는 상태라면
    props로 하나씩 내려 주기에는 한계가 있습니다.
    이 때 사용하는 전역 상태 관리 도구가 Context API, Redux 등과 같은 도구들입니다.

  • Context API의 특징
    • React에서만 사용할 수 있습니다. (리액트 내장 기능)
    • Entry 파일(root)에서 구성한 Provider를 내려 주는 형식입니다.
    • 사용하고자 하는 컴포넌트에서 작성한 Dispatch와 State를 꺼내서 사용합니다.
    • reducer를 여러 개 만들면 Provider에서 여러 단계로 만들어 사용할 수 있습니다.
  • 사용 방식




    출처 : https://egg-programmer.tistory.com/281#--%--Context%--API%EC%-D%--%--%ED%-A%B-%EC%A-%--
    -> recoilstate와 비슷한 개념 같은데 제대로 이해해놓자 !
  • Context API의 특징
    • React, Vue와 같은 프레임워크 환경에서 사용할 수 있습니다.
    • 상태를 저장하는 Store를 따로 가지고 있습니다.
    • thunk, saga와 같은 미들웨어를 추가적으로 사용하여 구성할 수 있습니다.
    • Redux devtool extension을 사용하면 상태에 대한 디버깅이 가능합니다.
    • 전역 상태 관리 외에도 로컬스토리지 상태저장, 버그리포트 첨부 기능 등의 기능들을 사용할 수 있습니다.
  • 사용방식

결론적으로 보면 Context API와 Redux는 사용법과 그 구조에 조금 차이가 있을 뿐 전역 상태를 관리한다는 점에서는 유사합니다. 애초에 Redux가 Context API를 기반으로 만들어진 것이기 때문이기도 합니다.


단순 전역 상태 관리만 있어도 된다면 Context API, 디버깅이나 로깅 등의 상태 관리 외의 기능이나 미들웨어가 필요하다면 Redux를 사용하는 것이 좋다고 여겨집니다.
사용 방식 예제는 진행했던 프로젝트에서 약식으로 인용하였습니다. 아래를 통해 전체 코드를 볼 수 있습니다.
Context API Redux 경험 상으로는 Context API와 Redux 모두 상태 관리를 편하게 해 준다는 점에서 장점이 있었고, 사용법에서는 큰 차이를 느끼지 않았습니다.
Context API는 React를 사용할 때 추가 dependency 없이 사용할 수 있어서 가볍게 사용할 수 있다는 점에서 좋았습니다. 하지만 상태를 넘겨줄 때 상태가 여러 개라면 Provider를 중첩해서 내려 줘야 하기 때문에 그런 불편했습니다. Redux는 saga, thunk와 같은 미들웨어를 추가적으로 사용할 수 있어 비동기 처리를 따로 Util로 처리할 수 있어서 좋았습니다. 추가 설정을 통해 디버깅을 가시적으로 할 수도 있어 편했습니다. 하지만 미들웨어를 사용하기 위해 관련 개념을 이해해야 하기 때문에 어려운 점이 있었습니다.

참고 : https://www.robinwieruch.de/redux-vs-usereducer

https://medium.com/@ca3rot/아마-이게-제일-이해하기-쉬울걸요-react-redux-플로우의-이해-1585e911a0a6

https://velog.io/@cada/React-Redux-vs-Context-API#context

swr , mobx

  • SWR 에 대해서
    홈페이지에가면 (React-hooks library for Data fetching) 이라는 소개를 볼수 있다
    소개와 같이 리액트 훅을 사용할때 데이터를 가져오기 위한 라이브러리 라는 것을 알수있다.


    swr 은 매번 요청 지속적이고 자동적으로 보내지만 데이터를 받는것이 요청이후 응답을 토대로 받는 구조가 아니다


    먼저 저장된 캐시에서 데이터를 보내주고 swr 은 내부적으로 검증을 하게 된는 과정을 거치게 된다.


    따라서 우리가 보기에 반응속도가 더빠르다는 장점이 있다.


    (실시간 경험 이나 중복된 요청을 방지하는데 이점이 있는 상태관리도구이다.)
  • swr 홈페이지에 아주 잘 나와 있다. 일단 useSWR 을 install 이후 불러온다.


    그리고 인자로 url 주소와 , 함수(fetcher)를 넘겨준다. 그다음 인자로는 추가적인 옵션을 넣어주는 자리이다.


    그리고 첫번째 인자자리에는 꼭 url 정보만 넘겨야 하는것은 아니다 특정 키워드로 데이터를 저장하고 불러올수 있어서 전역상태관리 도구로 이용할수있다.

  • fetcher 라는 함수는 우리가 코드를 적어서 설정 해줘야 하는 부분이다. 예시를 살펴보자
import axios from 'axios';
const fetcher = (url: string) => axios.get(url).then((response) => response.data);
export default fetcher;

useSWR 의 첫번째 인자를 fetcher 내부에서 사용하는 형태이다. 위 예시에서는 url 을 받아와서 요청을 넣고 그값을 반환한다.


const { data , error} =useSWR() 반환한 값을 data, error 를 통해서 사용할수 있게된다.


이외에도 mutate 나 revalidate 로 재요청 시점을 명시할수도 있고


옵션으로 dedupinginterval 캐시된 데이터를 보존하는 시간설정 이라던가 많은 옵션들이 있다.
github.com/vercel/swr/tree/master/examples
출처 : https://seungddak.tistory.com/

- mobx란?

mobX mobX-react.js 라이브러리 필요
Flux와 마찬가지로 Client에서 state를 관리하기 위해 사용
컴포넌트의 state를 별도의 영역에서 관리, 접근
다수의 store관리, 특정 데이터의 형태로 관리(Observable)

decorator

다음과 같은 observable variable이 있다고 하자.

    observable({ 
        _count = 5
    })

이는 다음과 같이 표기할 수 있는데, java에서의 annotation과 같은 표기를 decorator이라 칭한다.

    @observable
    _count = 5;

주요 api

provider
다수의 스토어들을 component에 따라서 다르게 사용할 수 있는데, root가 되는 APP에 스토어들을 정의해줌.

// index.js
import { Provider } from 'mobx-react';

ReactDOM.render(
  <Provider counterStore={CounterStore}>
    <App />
  </Provider>,
  document.getElementById('root')
);

observable
관찰되어지는 데이터


    @observable
    _count = 5;

action
observable 데이터를 변경하기 위해서는 해당 메서드에 action 함수의 parameter로 만들어줘야 함.
이를 decorator로 할 시 다음과 같다.

    @action
    increment() {
        this._count ++;
    }
  • 액션을 붙이지 않는다면?!
    작동은 되지만 만약 3개의 state 값을 변경한다고 치면,
    렌더링이 3번 일어나게 된다.
    따라서 action을 붙여야 하는데, 이를 mobX 측에서는 트랜잭션이라고 한다.

inject
해당 클래스의 props에 store에서 관리하는 데이터를 주입


@inject('스토어변수명')
class 클래스명 extends Component {
...
}

observer
현재 컴포넌트가 데이터를 주시하고 있음을 명시

makeObservable
mobX6에서 데코레이터에서의 변화가 생기면서 생긴 makeObservable

최근 해당 데코레이터 지원을 뺐음. (표준이 아니라는 측면에서)

constructor() {
    makeObservable(this);
}

computed
get 메서드에 일반적으로 적용하거나 모델 객체간 전환 시점에 적용
해당 observable state 변화가 없을 시, 내부 로직 생략하는 api

참고자료
MobX YouTube 강의 영상

- react - curring

  • 커링(Currying) 기법은 인자가 여러개인 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법을 의미합니다. 인자가 n개인 함수를 n개로 분리하여 사용하게끔 만드는 기법입니다.
function helloFunc(word, name) {
    console.log(`${word}, ${name}`);
}

word와 name이라는 두 개의 인자를 받아서 출력해주는 단순한 형태의 함수입니다.
이 함수에 커링을 적용해 봅시다.

function helloFunc(word) {
    return function (name) {
        console.log(`${word}, ${name}`);
    };
}
const printHello = helloFunc("hello"); 
printHello("Tibetan Fox"); // hello, Tibetan Fox
printHello("Tiger");       // hello, Tiger

아까의 함수에 커링을 적용하면 이렇게 됩니다.
n(2)개의 인자를 받던 함수가 n(2)개로 쪼개진 것을 볼 수 있습니다.
또한 첫 번째로 받던 인자인 word를 hello라는 값으로 고정하고 name만 변경하면서 사용 가능한 것 또한 볼 수 있습니다.
즉 커링 기법은 일부 인자에 같은 값을 반복적으로 사용할 때 그 반복되는 인자를 고정함으로써 중복을 최소화 하기에 적합한 기법입니다.
-> 커링 기법을 적용할 때는 인자의 순서가 매우 중요합니다. 변동 가능성이 적은 인자는 앞에, 변동 가능성이 높은 인자는 뒤에 배치해야 합니다. 반드시 이 점을 고려하면서 커링을 사용해야 합니다.

profile
SUNNY SUMMER ! 같이 일하고 싶은 개발자 여름이의 초심을 잃지 않기 위한 주절주절 부트캠프 시절 블로그.

0개의 댓글