[타자치자 #7] 리팩토링(redux, styled-components)

프로젝트
1. 타자치자(1.0.1) - 한글타자연습
2. 리팩토링(Redux)
3. 리팩토링(TypeScript)
4. 타자치자(1.0.2) - 기능 추가
5. 타자치자(1.0.3) - 모바일
6. 타자치자(1.0.4) - 모바일 장치에서 타수 결과가 Infinity
7. 리팩토링(redux, styled-components)

 

타자치자 놀러가기

컴포넌트 분리

구조를 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하였다.

 

이전에 컴포넌트를 분리하지 않고 하나의 컴포넌트 안에서 상태 관리를 하고 UI도 보여주고 데이터 핸들링도 다 처리하다 보니 코드가 복잡하고 가독성이 상당히 떨어지고 각각의 용도가 명확하게 파악이 안 되는 부분, 컴포넌트를 재사용하는 부분에서도 어려움이 있었다.

 

프레젠테이셔널 컴포넌트

- View 만을 담당하는 컴포넌트

- 상태 관리에 있어 리덕스 스토어에 직접적으로 접근하지 않고 props로 데이터와 함수를 가져옴

 

컨테이너 컴포넌트

- 리덕스와 연동되어 있는 컴포넌트

- 리덕스로부터 상태를 받아 오기도 하고 리덕스 스토어에 액션을 디스패치

 

- 프레젠테이셔널 컴포넌트는 src/components 폴더
- 컨테이너 컴포넌트는 src/containers 폴더

 

적용

메인

메인 페이지에서 아래로 계속 스크롤을 내리면 사이트에 대한 설명을 볼 수 있다. 오른쪽 중앙 부분에 아래쪽으로 스크롤  아이콘이 있는데 이 부분이 최대 스크롤까지 내려오면 사라진다. 

 

컨테이너 컴포넌트에서 스크롤 현재 위치, 스크린 높이, 브라우저 화면 높이를 이용해서 스크롤 최하단에 도달을 확인할 수 있는 함수를 만들었다. 그리고 프레젠테이셔널 컴포넌트에서 props로 받아 아이콘이 사라지게 처리하였다.

 

이런 식으로 메인, 측정, 순위, 회원 인증 등 모든 부분을 각각 모두 프레젠테이셔널, 컨테이너 컴포넌트로 분리하였다. 

 

리덕스 구조 변경(Ducks 패턴)

이전에는 액션 타입, 액션 생성 함수, 리듀서 코드를 모두 다른 파일로 분리하여 작성하였다. 추가하고 싶은 기능이 생길 때마다 세 종류의 파일을 모두 수정해야 하는 번거로움이 있어서 Ducks 패턴을 적용하였다.

 

Ducks 패턴

액션 타입, 액션 생성 함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식

 

적용

Ducks 패턴을 사용하여 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 하나로 합쳤다.

src/modules 폴더

 

redux-persist

리덕스 상태 관리 라이브를 적용하였다. 리덕스의 스토어가 새로고침을 하는 경우 state가 날아가서 이전에는 로컬 스토리지에 값을 저장하고 필요한 경우 꺼내서 사용하였는데, 보다 편리하게 상태를 관리하기 위해 redux-persist를 적용하였다.

 

styled-components

기존에는 컴포넌트 별로 모두 css 파일을 가지고 있었는데, 기능이 늘어나면서 css가 전역으로 중첩되는 부분도 생기고 css 파일이 계속 늘어나는 것도 지저분한 느낌이 들어서 css 파일을 외부에 두지 않는 styled-components를 적용하였다.

 

모바일 반응형을 위해 매번 작성했던 @media (min-width: 768px) {}...

컴포넌트가 늘어날 때마다 매번 작성하고 컴포넌트 간의 전체적인 스타일이 통일되지 않는 느낌이 들었고 수정하기도 너무 힘들었다.

 

ThemeProvider

컨텍스트 API를 통해 구성 요소 트리의 모든 스타일 구성 요소 아래에 테마를 삽입

 

styled-components로 만드는 모든 컴포넌트에서 조회하고 사용할 수 있는 전역 값을 설정한다.

 

App.js

theme.js 파일에 모바일 기기별로 미디어쿼리를 작성해놓고 반응형을 만들고 싶을 때 props로 받아서 적용하였다.