리액트 설계 하기

서론

어떠한 컴포넌트의 제어를 위임 할수록 구현 복잡도가 증가하고, 코드 이해에 대한 러닝커브가 증가하는 것은 필연적인 일이나,

로직 처리와 UI 처리가 분리된다는 이점 및 재사용성을 고려 해보았을 때 제어의 위임은 필수적인 설계 방식이다.

여러 설계 방식이 있으나, 제어의 위임도가 높은 2가지 패턴을 소개합니다.

Props Getter 패턴

useCounter가 getter에 해당 되고 useCounter에서는 여러 상태관리를 처리한다.

recoil, react-query, swr등의 리액트 친화적인 상태관리 라이브러리들은 정확히 props getter 패턴을 따르는것 같다.

const [state, setState] = useRecoilState(default)
const{data, error} = useSwr('url', fetcher)

• 장점: reducer 패턴에 비해 코드 복잡도가 낮다.
• 단점: getter의 구현 복잡도가 증가한다.

import React from 'react';
import {Counter} from './Counter';
import {useCounter} from './useCounter';

const MAX_COUNT = 10;

function Usage() {
  const {count, getCounterProps, getIncrementProps, getDecrementProps} = useCounter({
    initial: 0,
    max: MAX_COUNT,
  });

  const handleBtn1Clicked = () => {
    console.log('btn 1 clicked');
  };

  return (
    <>
      <Counter {...getCounterProps()}>
        <Counter.Decrement icon={'minus'} {...getDecrementProps()} />
        <Counter.Label>Counter</Counter.Label>
        <Counter.Count />
        <Counter.Increment icon={'plus'} {...getIncrementProps()} />
      </Counter>
      <button {...getIncrementProps({onClick: handleBtn1Clicked})}>Custom increment btn 1</button>
      <button {...getIncrementProps({disabled: count > MAX_COUNT - 2})}>Custom increment btn 2</button>
    </>
  );
}

export {Usage};

State Reducer 패턴

제어의 위임이 가장 극심한 패턴. 미리 정의해둔 reducer에서 상태관련 로직을 처리한다.

redux에서 자주 사용되는 패턴. 코드 가독성도 극심하게 나빠지는 것을 알 수 있다.

import React from 'react';
import {Counter} from './Counter';
import {useCounter} from './useCounter';

const MAX_COUNT = 10;
function Usage() {
  const reducer = (state, action) => {
    switch (action.type) {
      case 'decrement':
        return {
          count: Math.max(0, state.count - 2), //The decrement delta was changed for 2 (Default is 1)
        };
      default:
        return useCounter.reducer(state, action);
    }
  };

  const {count, handleDecrement, handleIncrement} = useCounter({initial: 0, max: 10}, reducer);

  return (
    <>
      <Counter value={count}>
        <Counter.Decrement icon={'minus'} onClick={handleDecrement} />
        <Counter.Label>Counter</Counter.Label>
        <Counter.Count />
        <Counter.Increment icon={'plus'} onClick={handleIncrement} />
      </Counter>
      <button onClick={handleIncrement} disabled={count === MAX_COUNT}>
        Custom increment btn 1
      </button>
    </>
  );
}
export {Usage};

참고

리액트 설계 가이드