• 기존 방식은 css 코드가 해당 컴포넌트가 있는 곳에만 국한되지 않았다.

  • 해당 클래스 이름을 가진 요소가 어딘가에 있다면 그 요소도 영향을 받게 된다.

• trim

  if (enteredValue.trim().length === 0) {
      // trim을 쓰면 앞 뒤의 공백을 제거해준다.
      setIsValid(false);
      return;
  }
  

• 앞, 뒤 공백을 제거한 이후에 0이라면 아예 공백 값이므로 valid를 false 로 체킹한다.

• 동적 인라인 스타일링

return (
    <form onSubmit={formSubmitHandler}>
        <div className="form-control">
            <label
                style={{
                    color: !isValid ? 'red' : 'black',
                }}
            >
                Course Goal
            </label>
            <input
                style={{
                    boderColor: !isValid ? 'red' : '#ccc',
                    background: !isValid ? 'salmon' : 'transparent',
                }}
                type="text"
                onChange={goalInputChangeHandler}
            />
        </div>
        <Button type="submit">Add Goal</Button>
    </form>
);

• ` 백틱을 사용해서 인라인으로 넣는방법

return (
    <form onSubmit={formSubmitHandler}>
        <div className={`form-control ${!isValid ? 'invalid' : ''}`}>
            <label>Course Goal</label>
            <input type="text" onChange={goalInputChangeHandler} />
        </div>
        <Button type="submit">Add Goal</Button>
    </form>
);

styled components

• 특정 스타일이 첨부되는 컴포넌트에만 영향을 미치고 다른 컴포넌트에는 영향을 미치지 않는다.

• styled component 적용방법

• taged template literal 방식을 사용한다. (자바스크립트 문법)

import styled from 'styled-components';

const Button = styled.button``; // styled.button() 과 동일

• styled component 는 html 요소 전부를 가지고 있다.