[TIL] 240524 (React 가계부 Context API, Redux 리팩토링)

솔·2024년 5월 24일

JavaScript React TIL contextAPI redux rtk 구조분해할당

TIL

목록 보기

51/268

🥞 오늘 한 일

리액트 숙련 개인과제
- “context” 로 브랜치 생성 및 이동
- props drilling으로 불편하게 관리하던 state를 context api 로 리팩터링
- “redux” 로 브랜치 생성 및 이동
- context 로 관리중이던 모든 것을 redux 로 리팩터링
알고리즘 타임어택
- 일관된 문자열의 개수 세기

시간이 얼마나 걸릴지 감이 잘 오지 않아서 오늘 Context API로 리팩토링하는 것까지만 목표로 삼았는데, 생각보다 금방 끝나서 Redux 리팩토링까지 완료했다.

🍽️ 문제 해결

React Redux 리팩토링

문제점

일단 처음에 이미 Context API로 관리 중인 state들을 Redux로 변경하는 자체가 번거로웠다. 여기저기 얽혀있기 때문에 오류가 안 날 수 없는데, 하나씩 확인하고 고치는게 불가능하고 전체적으로 다 제대로 바꿔야만 그제서야 페이지가 동작하기 때문이었다.
그러던 중 계속 useSelector를 사용하여 가져온 변수들이 제대로 가져와지지 않는 문제점이 발생했다. 이 문제가 이번 리팩토링에서 유일하게 고민했던 문제점이었다.

STEP 1

// selectedMonthSlice.js

const initialState = window.localStorage.getItem("selectedMonth");

const selectedMonthSlice = createSlice({
  name: "selectedMonth",
  initialState,
  reducers: {
    setSelectedMonth: (state, action) => {
      return action.payload;
    },
  },
});

모든 state가 같은 문제가 있었고, 편의상 selectedMonth state를 사용하도록 하겠다.
처음에 initialState로 딱히 객체로 만들어주지 않고 그냥 그대로 넣어주었다. 그리고 useSelector로 가져와줄 때는 아래의 코드와 같이 작성했다.

// MonthsList.jsx

const { selectedMonth } = useSelector((state) => state.selectedMonth);

처음에 이렇게 코드를 작성할 때는 문제가 될지도, 문제가 된 이유도 몰랐다.
사실 console.log로 selectedMonth를 찍어본 결과 undefined가 나오는 문제가 이미 있었지만 비동기의 문제인가? 하는 생각, 모든 state들을 리팩토링하면 괜찮을 수도 있겠다는 생각이 들어 크게 개의치 않았다.
그러나 리팩토링을 완전히 다 진행했다고 생각했음에도 계속해서 오류가 나기에, 뭔가 틀린 부분이 있다고 생각하여 다시 한 번 코드를 찬찬히 살펴보다가 먼저 한 가지 사실을 깨달았다. reducers 내 setSelectedMonth 함수 내부에서 return을 해주고 있었는데, 애초부터 return을 사용하는 방식이 아니었던 것. 그리고 더 중요한 점을 깨달았는데, 나는 useSelector로 state를 가져올 때 구조 분해 할당을 사용하고 있었던 것이다.

STEP 2

// selectedMonthSlice.js

const initialState = {
  selectedMonth: window.localStorage.getItem("selectedMonth"),
};

const selectedMonthSlice = createSlice({
  name: "selectedMonth",
  initialState,
  reducers: {
    setSelectedMonth: (state, action) => {
      state.selectedMonth = action.payload;
    },
  },
});

때문에 구조 분해 할당에 맞게 코드를 변경해주었다. 위 방식이 안정적인 것 같아서, 모든 initialState를 객체로 만들었고, 모든 slice 파일들에 같은 방식으로 적용시켜주었다. useSelector로 가져오는 부분에서는 딱히 문제가 없어 수정하지 않았다. 이런 방식으로 모든 파일들을 수정해주니 그제서야 모든 state들이 정상적으로 작동하였다.
오늘 처음 제대로 Redux Toolkit을 사용해보았기에 익숙치 않아서 어려웠으나, 리팩토링을 진행해보니 확실히 적응이 좀 된 것 같다.

알고리즘 타임어택

이번 주부터 새롭게 시작된 타임어택 시간. 1시간 내로 주어진 문제를 풀어야한다.

일관된 문자열의 개수 세기

주어진 문자열 allowed와 문자열 배열 words가 있습니다. allowed 문자열은 서로 다른 문자들로 이루어져 있습니다. 각 words 배열의 문자열이 allowed에 있는 문자들만 포함하고 있을 때, 그 문자열을 "일관된 문자열"이라고 합니다. 여러분의 목표는 words 배열에서 일관된 문자열의 개수를 세는 것입니다.

function countConsistentStrings(allowed, words) {
  return words.filter((word) => {
    for (let i = 0; i < word.length; i++) {
      if (!allowed.includes(word[i])) return false;
    }
    return true;
  }).length;
}

words를 filter하여 word를 하나씩 분석할 수 있도록 한다.
word 내에서도 반복문을 통해 한 문자씩 확인해서, 해당 문자가 allowed에 속하지 않는다면 바로 false를 return한다.
반복문이 다 돌았다면 모두 allowed에 속하는 문자이므로 true를 return한다.
그렇게 filter된 words의 length를 return 하면 문제가 해결된다.

아직 첫 주라 그런지 난이도가 크게 어렵진 않았다.

🍪 배운 것

Context API 및 Redux 등을 사용해 전역 상태 관리를 하면 props-drilling 방식보다 훨씬(*999) 편하다.

🍴 돌아보기

이번에 남들보다 시간이 없어 조급해했지만 여차저차 하다보니 다행히도 오늘 필수 구현 사항은 전부 끝냈다. 하지만 정말 말 그대로 필수로 구현해야하는 부분만 완료했다는 것이고, 선택 구현 사항 및 제대로 알지 못하고 그냥 무지성으로 적은 코드들, 여러가지 디테일한 부분 수정까지 해야만 제대로된 완성이라고 생각이 들기 때문에, 주말 및 (내게만) 마지막 날인 월요일에는 해당하는 부분들을 해내는 걸 목표로 삼아야겠다!