[React 완벽 가이드] section 6 : 리액트 컴포넌트 스타일링

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

82. 모듈 소개

• Conditional & Dynamic Styles
• Styled Components
• CSS Modules

error

error:03000086:digital envelope routines::initialization error

• 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 

83. 동적 인라인 스타일 설정하기

• input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. 

    <div className="form-control">
        <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
        <input
          style={{
            borderColor: !isValid ? "red" : "black",
            background: !isValid ? "salmon" : "transparent",
          }}
          type="text"
          onChange={goalInputChangeHandler}
        />
      </div>

• 하지만 inline 스타일은 css에 최우선 순위를 두기 때문에 모든 style을 오버라이드 한다. 그래서 해당 방법을 선호하진 않는다. (그동안 제대로 style 안먹으면..무조건 inline styling 적용했었는데, 삼가해야 되겠다....🙃 ) 

84. 동적으로 CSS 클래스 설정하기 

• backticks (백틱) 사용하기, 자바스크립트의 기본 기능으로 템플릿 리터럴이라고도 불린다. 
• 위 간단한 구문으로 동적인 클래스를 추가하거나 삭제할 수 있다. 

.form-control.invalid input {
  border-color: red;
  background: rgb(255, 202, 202)
}

.form-control.invlid label {
  color: red;
}

    <form onSubmit={formSubmitHandler}>
      <div className={`form-control ${!isValid ? "invalid" : ""}`}>
        <label style={{ color: !isValid ? "red" : "black" }}>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </div>
      <Button type="submit">Add Goal</Button>
    </form>

85. Styled Components 소개

• 특정 스타일이 첨부된 컴포넌트를 구축할 수 있도록 도와주는 패키지이다. 
• https://styled-components.com/
• Actually, styled package has methods for all HTML elements. It has p method for a paragraph h1, h2, and so on for the h1, h2 tags, div to create a div and so on.

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

export default Button;

import styled from "styled-components";

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

  &:focus {
    outline: none;
  }
  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

export default Button;

→ button tag에 적용된 이상한 class 2개를 볼 수 있다. 이는 우리가 설정한 것이 아니라 styled-components 패키지에 의해 동적으로 생성된 클래스 이름이다. 이 패키지는 결국 우리가 설정한 style을 보고 생성된 클래스 이름으로 이 스타일을 감싸는데 모든 클래스는 고유한 이름을 갖기 때문에 앱에 있는 다른 컴포넌트에 영향을 주지 않는다. 그래서 이 class를 전역 css로 추가한 것이다. 

→ 하지만 모든 styled components마다 고유한 class name을 갖기 때문에 여기서 설정한 style은 app 내의 다른 component에는 절대 영향을 주지 않는다. unique class name 은 styled componet 별로 고유하기 때문 👍  이게 바로 styled-component 가 동작하는 방식이다. 

86. Styled Components & 동적 Props

    border: 1px solid ${(props) => (props.invalid ? "red" : "#ccc")};
    background: ${(props) => (props.invalid ? "red" : "#ccc")}

→ ; 하나 차이로 적용이 되었다가 안되었다가 하네...?!

87.  Styled Components & 미디어 쿼리 

• 미디어 쿼리를 함께 사용할 수도 있다. 

const Button = styled.button`
  width: 100%;
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  @media (min-width: 768px) {
    width: auto;
  }
  &:focus {
    outline: none;
  }
  &:hover,
  &:active {
    background: #ac0e77;
    border-color: #ac0e77;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
  }
`;

export default Button;

88. CSS 모듈 사용하기

• https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/
• st yled 컴포넌트를 좋아하건, 그렇지 않건 그것은 완전히 개인적인 취향이다. 개인적으로 필자는 css는 css 파일로 사용하는 것을 선호한다. (css 파일과 js 분리)
• css 모듈은 이 기능을 지원하도록 설정된 프로젝트에서만 사용 가능하다. why? 브라우저에서 코드가 실행되기 전에 코드의 변환이 필요하기 때문이다. 다행히 리액트앱으로 생성한 project는 기본적으로 css module을 지원하도록 설정되어 있다. 
• *.module.css : 기본적으로 css 모듈이 작동하도록 코드를 변환하라고 컴파일 프로세스에게 보내는 신호이다. 

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

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

export default Button;

→ 컴포는터이름_클래스 이름_고유한 해시값 으로 구성되어있는 것을 확인할 수 있다. css module 내부 프로세스는 css 클래스나 css 파일을 통해 그 클래스의 이름을 고유하게 바꾼다. 이게 바로 핵심 작업!

→ import하는 모든 css 파일을 고유하게 만든다. 

→ 렌더링된 DOM에서 <head> 부분을 확장해 보면  새로 만들어진 클래스를 볼 수 있다.

→ css module은 css파일에서 설정한 css style의 범위가 이 file에 import 하는 컴포넌트에 한정된다는 것을 확실하게 해준다. 

→ 개발자인 우리가 미리 알 수는 없지만 동적으로 만들어진 클래스 name과 컴포넌트를 연결하는 방법! 

89.  CSS 모듈을 사용한 동적 스타일

<div className={styles["form-control"]}></div>

  <div className={`${styles["form-control"]} ${!isValid && styles.invalid}`}></div>

 

정리

1. css 만 사용하기

2. styled 컴포넌트 사용

3. css module 사용

 

각자 선호하는 방법을 사용하면 된다. 

 

90.  모듈 리소스

• 강의 참고 

 

---

https://www.udemy.com/course/best-react/