React 40장 - TSX로 리팩토링하기 (1)

React

TO-Do List 링크

리팩토링

1. 일전에 만들었던 TO-DO List 코드를 수정할 겸, 배운 TypeScript를 활용해 보기로 했다.

2. 작성된 리액트에서 TSX로 전환 후 수정해도 되지만 부족한 부분을 추가적으로 작성해보기 위해 새로운 TSX를 만들었다

3. 타입스크립트를 적용하는 두 가지 방법이 있는데, 새로운 template을 작성하는 것을 선택했다. 리액트를 타입스크립트로 적용하기

4. 기존의 Router 기능을 위해 모듈을 설치한다.

   • npm install react-router-dom

5. lazy와 Suspense를 활용할 것이기 때문에 코드를 추가한다.

6. 그 전에 컴포넌트 구조에 대해 생각해보고, 컴포넌트 구조를 먼저 잡는다.

7. 컴포넌트화 시키기 위해 기존에 작성했던 컴포넌트의 HTML요소를 세부적으로 나눈다.

   • Recoil을 사용할 것이기에 atom 폴더, custom hooks를 위한 custom 폴더
   • 우선 구조만 잡아놓는다.

8. styled-components에 대해서도 더 다양하게 사용해볼 것이기 라이브러리를 설치해줄 것인데, 처음으로 package.json 파일에 dependencies와 devDependencies를 나누어 설치해줬다.

npm i --save-dev styled-components
npm i --save-dev @types/styled-components

• 우선 두 가지는 가시성의 차이가 있다.

  • 의존성 리스트가 늘어나며 보기 불편해진 것을 개선한다.
  • 프로젝트를 빌드하기 위해 바벨과 그에 관련된 플러그인을 설치해서 프로젝트를 빌드하고 빌드한 파일을 npm에 배포한다면 최종 사용자의 입장에서 필요없는 패키지이기 떄문에 devDependencies로 분류되며, 최종 사용자는 해당 의존성을 설치하지 않는다.
  • dependencies 항목의 어떤 패키지 A가 B를 필요로 하고 B를 실행시키기 위해 C가 필요하다면 A,B,C가 모두 설치되어야 하고 모두 설치되지 않는다면 작동하지 않는다.
  • 하지만 devDependencies 항목에서 A를 테스트하기 위해 B를 테스트할 필요가 없기 때문에 A를 테스트 하는 행위에서는 B가 설치되지 않는다.

• dependencies에는 애플리케이션 동작과 연관된, devDependencies는 직접적인 연관은 없지만, 개발할 떄 필요한 라이브러리를 설치하면 된다.

1. App 컴포넌트에 스타일 컴포넌트를 이용해 img 요소를 여러 개 작성했는데, 깔끔하게 정리하기 위해 Background 컴포넌트를 따로 만들어 배경 이미지를 정리하였다.

2. 반응형을 구현하기 위해 스크린 크기에 따른 미디어 쿼리도 작성하였다.