코드숨 8주 차 회고

🔥 글의 목적: 코드숨 8주 차의 학습을 정리하고, 한 주를 회고한다.

📌 학습 내용

• React.memo()
• useCallback
• 프레임워크와 라이브러리
• CSS-in-JS
• Redux-Toolkit

📌 회고

이번 주는 사실 저번 주에 다 따라가지 못한 내용들을 같이 마무리하는 시간이었다.

8주 차에는 CSS-in-JS에 관해서 배우는 시간이었다. CSS-in-JS는, 이전에 부트 캠프를 다니면서 처음 접했던 부분이었다. 그런데 이번에는 CSS-in-JS가 어떤 방식으로 동작하게 되는 것인지 알 수 있었다. 마법 같이 짠하고 사용할 수 있는 것이 아니었고, DOM 상단에 <style /> 태그를 추가하여 className을 주는 방식이었다.

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

<Text>Hello CSS-in-JS</Text>

<style>
.hash136s21 {
  background-color: black;
  color: white;
}
</style>

<p class="hash136s21">Hello CSS-in-JS</p>

이번에 Redux Toolkit의 configureStore를 사용했다. configureStore는 combineReducer를 사용하지 않고 아래와 코드와 같이 reducer를 묶어서 사용할 수 있게 해주었다.

// store.js
import { configureStore } from '@reduxjs/toolkit';

import membershipReducer from './Membership/slice';
import listPageReducer from './List/slice';
import productDetailReducer from './ProductDetail/slice';

const store = configureStore({
  reducer: {
    membership: membershipReducer,
    list: listPageReducer,
    productDetail: productDetailReducer,
  },
});

export default store;

또한 createSlice를 사용하면 자동으로 action 객체를 생성하기 때문에 편리하게 redux를 사용할 수 있었다. Toolkit를 사용하면서 드는 생각은 이렇게 기술을 익힐 때 기존의 고전적인 방법들을 먼저 사용하면서 기본적인 구동 원리를 이해하고 그 다음에는 이렇게 추상화해주는 기술들을 사용하는 것이 좋겠다는 생각이다. 처음부터 Toolkit을 이용하여 Redux를 배웠다면 이렇게 추상화해주는 기술들의 고마움을 제대로 알고 이해하지 못했을 것 같다.