전에 만들어 놓았던 프로젝트에서 public 폴더에 temp.css 파일을 생성한다.
React도 보통의 웹페이지처럼 css 파일을 생성하고 public/*.html 파일에 <link /> 태그를 추가하여 웹서비스 스타일링을 할 수 있다.
그러므로 위의 만들어 놓은 css 파일을 public/index.html에서 다음과 같이 수정하여 적용한다.
터미널에서 npm start 명령어를 입력해보자.
만약 sh: react-scripts: command not found 에러가 나올 경우, npm install을 쳐서 빠진 패키지를 설치해준다.
하지만 React는 컴포넌트 중심으로 개발하기 때문에 모든 css 파일을 한 곳에서 관리하게 되면, 어떤 컴포넌트에서 어떤 스타일을 활용하는 지 쉽게 알 수 없다.
그래서 React에서는 css 파일을 React 컴포넌트 파일에서 import하는 방식으로 스타일도 컴포넌트 중심으로 설계할 수 있도록 하고 있다.
현재 프로젝트는 create-react-app 명령어로 생성되어서 ./src/App.tsx 파일을 열어보면 다음과 같이 css 파일을 import하는 것을 확인할 수 있다.
React는 위와 같이 JSX 파일에서 직접 css를 import하는 것으로 해당 React 컴포넌트가 어떤 스타일을 사용하는 지 알 수 있도록 하고 있다. 해당 스타일 파일을 적용하고 있는 지 확인하기 위해 ./src/App.css 파일을 열어 다음과 같이 배경 색상을 강제적으로 되돌린다.
save를 하면 local에 있는 React App index 페이지가 다시 원래 색상으로 돌아가는 것을 확인할 수 있다.
styled-components
React는 컴포넌트 별로 css를 갖는 형식으로 스타일을 관리하게 된다. 하지만 모든 css를 관리하지 않다 보면 css 클래스 명이 중복되어 잘못된 스타일 적용될 수 있다. 만약 한 곳에서 모든 스타일을 관리하다 보면 어떤 스타일이 컴포넌트에 적용되고 있는 지 한눈에 알 수 없다.
이런 문제를 해결하고자 styled-components 라이브러리가 나왔는데, 다음과 같은 장점이 있다.
1. 클래스 이름 버그 해결
보통 css에 클래스 이름을 생성하고 스타일을 작성한 다음, 해당 이름을 HTML 태그에 적용함으로써 스타일을 적용한다. 하지만 이런 방식은 클래스 명의 중복, 겹침 또는 철자 오류가 발생할 수 있다. styled-components는 스타일을 컴포넌트에 직접 적용함으로써 이런 문제를 해결할 수 있다.
2. 더 쉬운 css 관리
일반적인 방식으로 스타일을 적용하면 해당 스타일의 클래스가 코드의 어디에서 사용되는 지 쉽게 알 수 없다. styled-components는 모든 스타일이 특정 컴포넌트에 연결되기에 더 명확히 사용되는 스타일을 알 수 있다. 또한 styled-components는 모든 스타일이 특정 컴포넌트에 연결되어 있기 때문에, 사용되지 않은 불필요한 스타일을 쉽게 제거할 수 있다.
3. 간단한 동적 스타일 적용
동적인 스타일을 관리하기 위해 여러 클래스를 만들 필요가 없으며 컴포넌트의 상태에 따라 쉽게 직관적으로 동적 스타일을 적용할 수 있다.
4. css 자동 구성
styled-components는 페이지에 렌더링되는 컴포넌트를 추적하여 해당 스타일을 완전히 자동으로 추가한다. 또한, 코드 분할과 결합하여 사용자가 필요한 최소한의 코드를 자동으로 추가한다.
프로젝트에 적용
해당 프로젝트 루트 폴더에 터미널로 들어가 다음과 같이 입력하여 styled-components를 설치한다.
npm install --save styled-components
npm install --save-dev @types/styled-components jest-styled-components
App.tsx 파일을 열어 다음과 같이 라이브러리를 import하여 다음과 같이 수정한다.
styled-components를 사용하여 React 컴포넌트를 생성하기 위해서는 Styled.[HTML 태그] 형식과 js의 템플릿 리터럴(shift 누른 상태에서 물결, ~로 입력되는 키, ₩)을 사용한다. 위와 같이 컴포넌트의 스타일링을 하게 된다.
App.tsx에서는 기존 태그 대신 컴포넌트 명을 기반한 태그를 불러와서 쉽게 적용 시킬 수 있다.
참고로 React에서는 HTML 태그에 class 대신 className을 사용하여 클래스를 지정한다.
위와 같이 적용하면 React App 웹페이지를 확인해보면 기존에 회전되는 로고가 움직이지 않게 되는데, 회전 애니메이션을 추가해야 한다.
App.tsx 파일에서 AppLogo에 다음과 같이 내용을 추가한다. 물론 App.css 파일에서 복붙한 것이다.
차이가 있다면, css에서는 App-logo라는 클래스 명을 사용하여 지정하였으나, styled-components에서는 해당 컴포넌트가 직접 애니메이션을 수행하므로 클래스 명을 따로 지정하지 않아도 된다.
애니메이션이 한 곳에서만 사용되는 경우, 하나의 컴포넌트에 전부 선언하여도 되지만, 만약 여러 곳에서 같은 애니메이션을 사용해야 한다면 다음과 같이 애니메이션을 분리하여 사용한다.
애니메이션을 분리하기 위해 styled-components의 keyframes를 사용할 필요가 있다.
위와 같이 styled-components는 js의 템플릿 리터럴을 사용하여 문자열 중간에 js 변수를 사용할 수 있다. 이처럼 자주 반복되어 사용되는 애니메이션은 styled-components의 keyframes를 사용하여 미리 정의하고 필요한 부분에서 정의된 애니메이션을 사용하면 된다.
p 태그는 어떠한 스타일도 적용되어 있지 않으므로 그대로 사용하도록 냅두고, a 태그를 AppLink 컴포넌트를 만들어서 적용해보고 맨위에 css파일을 import 문을 지우고 파일도 지우면 완벽히 styled-components로 리팩토링을 완료하게 된다.
p 태그 내 code 태그 내용 중에 다음과 같이 수정한다.
src/App.js => src/App.tsx
테스트 적용
지난 포스트에서 @testing-library/react로 작성한 App.test.tsx를 터미널에서 npm run test를 입력하여 그대로 실행해본다.
App-logo 클래스를 통해 찾았던 HTML 요소를 찾지 못한 에러가 발생한 것이다.
이 에러를 수정하기 위해 테스트 코드를 다음과 같이 수정해본다.
npm run test를 입력했는데 fail이 뜬다면 snapshot을 업데이트하는 u 키를 눌러주면 테스트가 정상적으로 통과되는 것을 알 수 있다.
Github Repo
