[React]styled-components와 Prettier 설치 방법

리액트 프로젝트에서 스타일링을 위한 방법의 하나로 styled-components를 사용할 수 있다.

사용하기 위해서는 우선 별도의 설치들이 필요하다.

---

우선 리액트 프로젝트를 생성한다.

예시로 타입스크립트 형식으로 프로젝트를 생성해보도록 하면 다음과 같다.

$ npx create-react-app fileName --template-typescript

---

다음 해당 폴더(위의 예시의 경우, fileName)의 경로로 들어간다.

$ cd fileName

---

이제 본격적으로 설치하는 명령이 필요하다.

다음의 명령어들을 실행하면 styled-components과 Prettier를 설치할 수 있다.

$ npm install --save styled-components

$ npm install --save-dev @types/styled-components jest-styled components

$ npm install --save-dev husky lint-staged prettier

---

위의 코드를 통해서 이제 설치가 되었을텐데, 다음 작업이 하나 더 필요하다.

Prettier의 설정을 해야하는데, 이를 위해서는 prettierrc.js 파일을 생성하고, 다음과 같이 수정을 해야한다.

module.exports = {     jsxBracketSameLine: true,     single Quote: true,     trailingComma: 'all',     printWidth: 100, };

 

---

이제 package.json파일에 다음의 코드를 추가하여 lint-staged와 husky를 설정해야한다.

"husky": {     "hooks": {       "pre-commit": "lint-staged"     }   },   "lint-staged": {     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [       "prettier --write"     ]   },

---

이제 절대 경로로 컴포넌트를 추가하기 위해서 타입스크립터 설정파일인 tsconfig.json을 다음과 같이 수정해야한다.

(원래의 코드에서 빨간색으로 되어있는 부분을 추가시킨 것이다.)

{   "compilerOptions": {     "target": "es5",     "lib": [       "dom",       "dom.iterable",       "esnext"     ],     "allowJs": true,     "skipLibCheck": true,     "esModuleInterop": true,     "allowSyntheticDefaultImports": true,     "strict": true,     "forceConsistentCasingInFileNames": true,     "noFallthroughCasesInSwitch": true,     "module": "esnext",     "moduleResolution": "node",     "resolveJsonModule": true,     "isolatedModules": true,     "noEmit": true,     "jsx": "react-jsx",     "baseUrl": "src"   },   "include": [     "src"   ] }

---

이 다음부터는, 이제 App.tsx파일을 열어서 styled-components를 사용해서 App컴포넌트를 리팩토링하면된다.

 

 

 

내용 출처: 스무디 한 잔 마시며 끝내는 리액트 + TDD