리액트 프로젝트에서 스타일링을 위한 방법의 하나로 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
'리액트(React, React.js)' 카테고리의 다른 글
| [React] node-module이 없을 때(yarn start가 안될 때) 해결방법 (0) | 2021.09.30 |
|---|---|
| [React/Error/yarn]The engine "node" is incompatible with this module. Expected version 해결방법 (Node/NVM 최신 버전 업데이트) (0) | 2021.09.21 |
| [React] typescript로 생성 (0) | 2021.09.07 |
| [React]폴더 삭제 후 다시 같은 폴더명으로 생성 시 yarn.lock이 계속 발생하는 문제 해결 (0) | 2021.09.06 |