On this page

2022년 04월 15일

수정하기

문서 생성 2022-04-15 08:21:44 최근 수정 2022-04-15 23:11:48

On this page

📚 오늘 도전하고, 배운 것
🤔 학습하면서 궁금하거나 어려웠던 점
🌅 내일은 무엇을?
🖋 log

📚 오늘 도전하고, 배운 것

React

리액트 컴포넌트를 스타일링하는 방법들

inline style

예시

<label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>

// 클래스 동적으로 추가하기
<div className={`form-control ${!isValid ? "invalid" : ""}`}>

Styled Components

리액트에서 .css 파일을 .js 파일에 import를 사용해서 불러와도, 그 파일에서만 스타일이 국한되지 않는다. 예를 들어 Button.css 내부에 .button css 규칙이 있고 Button.js 컴포넌트에서 import로 불러온 상태에서 다른 컴포넌트에 .button 를 사용하면 스타일이 적용된다. Styled Components는 특정 스타일이 첨부된 컴포넌트를 빌드하는 것을 도와주는 패키지다. 스타일이 첨부된 컴포넌트에만 영향을 주고 다른 컴포넌트에는 영향을 주지 않게 해준다.

설치를 하고

$ npm install --save styled-components

styled-components를 import 한다.

import styled from 'styled-components'

다음과 같이 Tagged Template Literal을 사용해서 스타일을 적용한다. Tagged Template Literal은 React의 기능이 아닌 모든 자바스크립트 프로젝트에서 사용할 수 있는 기능이다.

const Button = styled.button``;

"``"(백틱) 내부에 스타일을 적용해준다. 여기서 기존 button 컴포넌트를 가리키는 선택자는 지워줘도 된다. 이 말은 코드로 예를 들면,

기존 css 코드가 다음과 같이 작성되어 있다면

.button {
  border: 1px solid gray;
  color: white;
  background: gray;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
}

.button:focus {
  outline: none;
}

다음과 같이 작성해주면 된다. &는 SCSS에서 의미와 같다.

import styled from 'styled-components';

const Button = styled.button`
  border: 1px solid gray;
  color: white;
  background: gray;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  &:focus {
    outline: none;
  }
`;

// const Button = props => {
//   return (
//     <button type={props.type} className="button" onClick={props.onClick}>
//       {props.children}
//     </button>
//   );
// };

export default Button;

styled components 패키지가 button에 전달할 수 있는 기존 props를 적용해준다.

개발자 도구로 Styled components를 적용한 컴포넌트를 확인해보면 styled compoents 패키지에 의해 클래스명이 동적으로 생성된 것을 확인할 수 있다. 해당 이름으로 컴포넌트를 만들었을 때 적어둔 스타일 코드를 래핑한다. 고유한 class 명이기 때문에 설정된 스타일이 앱의 다른 컴포넌트에 영향을 미치지 않는다.

CSS 모듈 사용하기

브라우저에서 코드를 실행하기 전에 코드 변환이 필요하기 때문에 CSS 모듈은 이를 지원하도록 구성된 프로젝트에서만 사용할 수 있다. create-react-app으로 만든 프로젝트가 해당된다.

파일 이름에 .module을 붙여야 한다. 만약 Button.css라면 Button.module.css가 되어야 한다. 파일 이름에 .module을 붙이는 이유는 컴파일 프로세스에게 이 코드를 변환하라고 보내는 신호라 할 수 있다.

다음과 같이 import를 사용해 파일을 불러오고

import styles from "./Button.module.css";

className에 className={ styles.button } 와 같이 import한 모듈 이름을 붙여준다.

클래스 이름에 -(대시)가 붙는 경우엔 <div className={styles['form-control']}>

개발자 도구로 살펴보면 클래스 이름이 이상한 값으로 추가된 것을 확인할 수 있다. 컴포넌트이름_클래스이름_고유해시로 구성된다.

CSS 모듈은 CSS 파일에 설정한 CSS 스타일이 해당 파일을 가져오는 컴포넌트로 범위가 지정되도록 하는 것이다. 기본적으로 CSS 클래스, 파일을 가져와서 클래스 이름을 고유한 이름으로 바꿔준다. 기존 코드의 스타일을 건드리지 않고 새 이름(클래스명)으로 스타일을 래핑하는 방식이다.

참고

🤔 학습하면서 궁금하거나 어려웠던 점

Tagged Template Literals에 대해 더 궁금하다

🌅 내일은 무엇을?

백준 알고리즘 문제 풀기
React 학습

🖋 log

아 문제가 잘 안풀린다. 하기도 싫고 하지만 내일 맑은 정신으로 다시 정리해야겠다.

LINKS TO THIS PAGE

2022년 04월