[데브코스] React-Task-App: configureStore 심층 분석 및 컴포넌트 구현 과정에서의 타입 활용 정리

❌configureStore에서 composeWithDevtools를 쓰면 에러가 발생한다.

개발자 도구에서 Redux를 찾을 수 없었다. 강사님 코드와 다르게 작성한게 없는데...무슨 차이일까 고민해보았는데 일단 extension 설치부터 되어있지 않았다. 확장 프로그램을 설치 한 후, 다른 블로그 글에서 본 예제대로 store 생성 코드에서 composeWithDevtools를 추가해주었다.

 

시도한 코드:

const store = configureStore({
  reducer,
  composeWithDevtools,
})

여기서 문제가 발생했다. 대부분의 예제에서는 createStore을 사용하며 composeWithDevTools를 import해 적용하고 있었고, 나는 Redux Toolkit의 configureStore를 사용하고 있었다.

그렇다면, configureStore에서도 비슷하게 옵션으로 넘기면 되겠구나, 라는 추측을 하였고, configureStore의 인자로 composeWithDevtools를 넘겨주었다.

결과는, Typescript 에러

 

원인: configureStore은 Devtools를 이미 포함한다.

Redux Toolkit은 Redux를 쓰기 어렵게 만들었던 설정을 기본값으로 해결하자는 철학을 가지고 있다. 그래서 configureStore에는 다음 기능들이 기본적으로 내장되어 있다.

• Redux DevTools 연동
• thunk middleware 포함
• 개발/프로덕션 환경 분기 처리

즉, 

const store = configureStore({
  reducer,
})

 

 

이 한 줄만으로도 Redux DevTools 연결과 middleware 설정이 모두 자동으로 이루어진다. 따라서 composeWithDevTools를 사용할 이유도 없고, 애초에 configureStore의 옵션으로 존재하지도 않는다.

 

configureStore가 받을 수 있는 주요 옵션은 다음과 같다. 

• reducer
• middleware
• devTools
• preloadedState
• enhancers

configureStore을 쓴다면, devtools 사용을 위해 별도로 설정을 할 필요가 없지만, 그래도 직접 제어하고 싶다면 compose가 아닌, 아래와 같이 옵션으로 조절해야 한다.

const store = configureStore({
  reducer,
  devTools: {
    trace: true,
    name: 'My App Store',
  },
})

 

📌Boardlist 컴포넌트 구현과 FC 타입

아래는 BoardList 컴포넌트의 일부이다.

type TBoardListProps = {
  activeBoardId: string;
  setActiveBoardId: React.Dispatch<React.SetStateAction<string>>;
}

const BoardList: FC<TBoardListProps> = ({
  activeBoardId,
  setActiveBoardId
}) => {
  const board = useTypedSelector(state => state.boards.boardArray);
  const [isFormOpen, setIsFormOpen] = useState(false);
}

 

이 컴포넌트는 부모로부터

• 현재 활성화된 보드 ID(activeBoardId)
• 해당 값을 변경하는 함수(setActiveBoardId)

를 props로 전달받는 구조이다. 

 

여기서 눈에 띄는 점은 컴포넌트 타입으로 FC를 사용하고 있다는 것이다.

 

FC란?

type FC<P = {}> = React.FunctionComponent<P>

 

 

FC는 props 타입이 P인 React 함수 컴포넌트를 의미한다. 

const BoardList: FC<TBoardListProps>

 

즉, 이 코드의 뜻은

'BoardList는 React 컴포넌트이며, TBoardListProps 타입의 props를 받는다' 라는 의미로 타입을 명시한 것이다.

 

const BoardList = ({
  activeBoardId,
  setActiveBoardId
}: TBoardListProps) => {
  ...
}

이 코드랑 동작상 완전히 동일하기는 하다. 

 

다만 FC를 사용하면 "이 함수는 컴포넌트다"라는 의도를 타입 차원에서 한 번 더 강조하는 효과가 있긴하다. 최근에는 FC 사용을 지양하는 경우도 많다고 하고, 강의 영상이 다소 오래된 편이라 예전 관행이 반영된 패턴으로 보이기도 하다...

📌React.Dispatch<React.SetStateAction<string>>

SetStateAction<T>의 정의는 다음과 같다.

type SetStateAction<T> = T | ((prevState: T) => T)

즉 setState는 두 가지 방식을 모두 허용한다.

setActiveBoardId("board-1")          // 직접 값 전달
setActiveBoardId(prev => prev + "1") // 이전 값 기반 업데이트

이를 감싸는 Dispatch<A>는 다음과 같은 타입이다.

type Dispatch<A> = (value: A) => void

어떤 값을 받아서 상태 업데이트를 발행(dispatch)하는 함수이다. 결국 두 타입을 합치면,

string 상태를 변경할 수 있는 setState함수

를 의미하게 된다.

---

Redux toolkit이 왜 이런 api를 제공하는지, 상태관리에서의 typescript 적용을 조금 더 명확하게 이해할 수 있었다. 이전까지 잘 알지못했던 새로운 타입 활용을 배우면서 안정적이고 명시적인 타입 정의라는 타입스크립트의 철학을 다시 한번 느낄 수 있는 계기가 되기도 한 듯. 그치만 타입 어려워