이번 프로젝트 UI는 다음과 같이 생겼다.

확장프로그램에서 vscode-styled-components를 설치하자

1. Inline Dynamic Styling

이전에 만들었던 Expenses 프로젝트도 빈칸으로 제출하면 제출이 됐었다. 하지만 빈칸으로 제출했을 때는 제출을 막고, 사용자에게 피드백을 해주어야 한다.

• sumit 버튼을 눌렀을 때의 행동을 수정해보자

const formSubmitHandler = (event) => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      console.log("no input");
      return;
    }
    props.onAddGoal(enteredValue);
  };

제출은 하지 않지만 사용자에게 피드백은 줄 수 없었다. 따라서 useState를 이용해서 사용자에게 피드백을 줄수 있도록 해본다.

 const formSubmitHandler = (event) => {
   event.preventDefault();
   if (enteredValue.trim().length === 0) {
     console.log("no input");
     setIsValid(false);
     return;
   }
   setIsValid(true);
   props.onAddGoal(enteredValue);
 };

 return (
   <form onSubmit={formSubmitHandler}>
     <div className="form-control">
       <label style={{ color: isValid ? "black" : "red" }}>Course Goal</label>
       <input
         type="text"
         onChange={goalInputChangeHandler}
         style={{
           borderColor: isValid ? "black" : "red",
           backgroundColor: isValid ? "white" : "yellow",
         }}
       />
     </div>
     <Button type="submit">Add Goal</Button>
   </form>

클래스를 초기화 하는 기능도 필요하다.
입력값이 변하면 setIdValid 를 true로 바꾼다.

  const goalInputChangeHandler = (event) => {
    if (event.target.value) setIsValid(true);
    setEnteredValue(event.target.value);
  };

---

2. Dynamic CSS Class

inline 스타일링을 사용하면 우선순위로 무시하게 되어 클래스를 만드는 편이 낫다.

다음과 같은 클래스 파일을 생성해준다.

.form-control.invalid div {
 color: red;
}
.form-control.invalid input {
 border-color: red;
 border-width: 5px;
 background-color: rgb(197, 141, 141);
}

• 그리고 className 부분을 동적으로 할당해 주는 것이다. 백틱으로 문자열을 감싸고 안쪽에 ${}부분을 넣어 추가적으로 invalid라는 문자열이 들어갈것인지 동적으로 결정한다.

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

---

3. Styled Component

styled-components 설치하기
npm install --save styled-components

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;

---

4. Styled Component & 동적 props

이번엔 Styled Component를 이용하여 FomControl을 바꾸는 방법 두가지에 대해서 알아보려고 한다.

기본적으로 FormControl 이라는 styled Component를 만들어준다.

const FormControl = styled.div`
 margin: 0.5rem 0;

 & label {
   font-weight: bold;
   display: block;
   margin-bottom: 0.5rem;
 }

 & input {
   display: block;
   width: 100%;
   border: 1px solid #ccc;
   font: inherit;
   line-height: 1.5rem;
   padding: 0 0.25rem;
 }

 & input:focus {
   outline: none;
   background: #fad0ec;
   border-color: #8b005d;
 }

 &.invalid div {
   color: red;
 }
 &.invalid input {
   border-color: red;
   border-width: 5px;
   background-color: rgb(197, 141, 141);
 }
`;

하지만 이렇게 하면 동적으로 input 박스를 컨트롤 할 수 없다. 동적으로 스타일링을 추가하는 방법에는 두가지가 있다.

첫번째 방법

클래스이름 추가하기

<FormControl className={isValid ? "" : "invalid"}>
        <label style={{ color: isValid ? "black" : "red" }}>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </FormControl>

두번째 방법

styled-component 안에 props를 넣을 수도 있다.

<FormControl invalid={!isValid}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </FormControl>
      <Button type="submit">Add Goal</Button>

const FormControl = styled.div`
  margin: 0.5rem 0;

  & label {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
    color: ${(props) => (props.invalid ? "red" : "black")};
  }

  & input {
    display: block;
    width: 100%;
    border: 1px solid ${(props) => (props.invalid ? "red" : "#ccc")};
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
    background-color: ${(props) => (props.invalid ? "yellow" : "transparent")};
  }

  & input:focus {
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }

`;

---

4. 미디어 쿼리

다음 사진에 있는 버튼을 누르면 모바일 환경에서 웹 앱이 어떻게 보이는지 살펴볼 수 있다.
작은 화면으로 볼 경우 Add Goal을 넓게 만들고 싶을 수도 있는데 매우 간단한다.

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;
  
  @media (max-width: 768px) {
    width: 100%;
  }
  
  ...

---

5. CSS module

styled-component를 사용하는것도 좋지만 js 파일과 css파일을 분리해 놓는 것을 선호할 수도 있다. 그런데 전에도 봤지만 css파일을 이용하는것이 불리한 이유는 같은 이름의 class가 있을 경우 스타일링이 겹칠수 있다는 것이다. 다음에 볼 CSS module은 이 문제를 해결해 준다.

• css파일 불러올 때 import './Button.css'; 대신
  import styles from './Button.module.css';를 사용한다.
• css 파일 이름을 name.module.css로 수정한다.
• class를 불러올 때 동적으로 불러온다.

    <button type={props.type} className={styles.button} onClick={props.onClick}>
      {props.children}
    </button>

---

6. Dynamic Styling using CSS module

CourseInput.js 에서 CSS 모듈을 활용한 동적 스타일링을 해보자

• 먼저 css 파일 이름에 module.css를 추가해준다.
• import styles from "./CourseInput.module.css"; import 해준다.
• 그리고 FormControl 컴포넌트를 div로 바꾸고 클래스 이름을 넣어준다.
  • 그런데 form-control이라는 클래스는 - 때문에 클래스 지정이 안된다. 다음과 같이 해주자.
  • <div className={styles["form-control"]}>
• invalid 속성도 동적으로 추가해주자.

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

• invalid 를 추가할 때 항상 "invalid"가 아닌 styles.invalid 인지 확인하자

미디어 쿼리를 추가할 땐 css 파일을 이용한다.
styled component와 다른점은 selector를 추가해준다.

@media (max-width: 768px) {
  .button {
    width: 100%;
  }
}