[TIL] 2022/02/22 Tue - emotion, Recoil 사용해보기

 

 

 

Today I Learned

 

얼마만의 TIL인지..!

 

그동안 공부를 안 하거나 코딩을 안 한 건 아니지만, 블로그에 글을 쓸 만큼의 양은 아니었던지라 못 쓰고 있었는데 사전 과제를 하면서 새로운 것들을 사용하게 돼서 정말 오랜만에 TIL을 쓴다.

 

사전 과제에서 요구하는 건 크게 세 가지 정도로, 1) (필수) React 또는 Next.js를 사용할 것, 2) (필수) 차트 라이브러리를 사용할 것, 3) (선택) Redux, Recoil 등 상태 라이브러리 사용이다.

 

스타일에 대한 건 없었지만 지금까지 항상 css-in-js로 styled-components만 사용했었기 때문에 이번에는 다른 걸 사용해 보고 싶어서 @emotion/react 와 @emotion/styled를 설치했다. 상태 관리 툴도 항상 Redux를 사용했었기 때문에 이번에는 Recoil을 사용해 보았다. 차트 라이브러리는 어떤 걸 사용할지 아직 정하지 않았는데, 이전에 사용해 보았던 recharts는 사이즈가 꽤 커서 간단한 도넛 차트 API를 제공하면서도 가벼운 라이브러리가 있는지 찾아볼 예정이다.

 

 

emotion 사용기

 

@emotion/styled는 styled-components 와 사용법이 정말 비슷하다. 그래서 어렵지 않게 사용할 수 있었다. 하지만 몇 가지 다른 점 또한 존재한다.

 

styled-components와 다른 첫 번째는 Nested로 className을 사용하지 못한다는 것이다. 종종 state에 따라 className을 유동적으로 지정하여 스타일을 설정할 때가 있는데 styled-components는 styled 객체 안에 Nested Selector로 className을 사용할 수 있어 편리했다. 또한 해당 className의 element가 어떤 컴포넌트의 하위에 있는 지도 알기 쉬웠다. styled-components와 emotion 모두 styled로 생성한 컴포넌트는 브라우저에서 class를 확인했을 때 알기 어렵게 되어 있어서 className으로도 스타일을 설정할 수 있다는 건 꽤 편리한 기능인데 emotion에서는 제공하고 있지 않은 듯 하다.

 

두 번째는 styled-components에 비해 inline 스타일을 꽤 자유롭게 설정할 수 있다는 것이다. @emotion/react 에서 제공하는 css를 이용해서 inline 스타일에 바로 hover나 미디어 쿼리 등을 설정할 수 있다.

 

그 외의 ThemeProvider나 GlobalStyle 또한 styled 처럼 사용법이 거의 비슷했다. 

 

만약 개인 프로젝트에 css-in-js를 사용할 일이 있다면 앞으로는 emotion을 많이 사용할 것 같다. 왜냐하면 emotion 사이즈가 styled-components보다 3분의 1 정도이니까!

 

 

Recoil 사용기

 

사전 과자에서는 mockapi url 한 개에서 데이터를 받아 오는 게 끝이기 때문에 selector 한 개 사용한 게 끝이지만..! 그래도 후기를 남겨보자면 Redux에 비해 압도적으로 코드량이 적다! 아마 상태를 업데이트 하거나, 매개변수를 이용해서 api 통신을 해야 하는 등의 다양한 상황에서는 코드가 조금 더 복잡해질 수도 있겠지만, 그걸 감안하더라도 전역 상태 관리를 위해 작성해야 하는 코드가 굉장히 적다.

 

import { selector, useRecoilValue } from 'recoil'

export const getOperationSelector = selector({
  key: 'operation/get',
  get: async ({ get }) => {
    try {
      const response = await fetch('mockapi url').then((res) => res.json())
      return response[0].results
    } catch (error) {
      console.error('Operation Data Error', error)
    }
  },
})

export function useOperationValue() {
  const operationData = useRecoilValue(getOperationSelector)
  if (!operationData) {
    throw new Error('Cannot find Operation Data')
  }
  return operationData
}

 

내가 API 통신을 통해 받아 온 데이터로 전역에서 사용할 수 있게 하기 위해 작성한 코드는 이게 전부이다.  Redux를 사용하면서 반드시 해야 했던 스토어 환경 설정이나 액션 타입, 액션 생성 함수, 미들웨어, 리듀서 같은 보일러 플레이트가 없기 때문에 단 몇 줄이면 전역으로 전달해줄 수 있는 상태를 만들 수 있다. 심지어 아래 쪽의 함수는 에러 처리를 위해 편의상 만든 상태 구독 함수로, 컴포넌트에서 작성해도 되는 코드이다.

 

그리고 제공하는 API 들이 React의 Hook과 많이 닮아 있어서 익숙한 것도 좋았다.

 

심지어 내가 사용한 selector는 기본적으로 캐싱을 지원한다. 들어왔던 적이 있는 값을 기억한 후 동일한 값의 응답을 보내는 API 콜에 대해서는 추가적으로 요청을 하지 않는다고 한다. 성능 면에서도 굉장히 유리하다는 생각이 들어서 나중에 더 다양하게 사용해 보고 싶다는 생각이 들었다!