React

React 완벽 복습

리액트 컴포넌트 스타일링

컴포넌트 스타일링의 두 가지 접근 방식

1. Styled Components

• 글로벌 스타일에 추가되지 않음
• 컴포넌트에만 영향
• 외부 라이브러리를 사용
  • npm install --save styled-components

2. CSS Modules

• 일반적인 css를 사용할 경우

  • 패키징하면 build폴더의 static폴더에서 파일들이 빌드되면서
  • css파일들이 각각 갖고있던 동일한 클래스명이 덮어 씌워지면서 충돌이 발생

• css-module을 이용하여 클래스명이 충돌하는 문제를 해결

  • 컴포넌트명.module.css로 파일명을 변경 후 사용하면
  • 크롬 개발자 도구의 클래스명에서 hash값이 붙어 고유한 값으로 인식

빈값인지 확인하기

• trim() 사용하여 공백제거 후 길이가 0이면 return

const formSubmitHandler = event => {
  event.preventDefault()
  if (enteredValue.trim().length === 0) {
    setIsValid(false)
    return
  }
  props.onAddGoal(enteredValue)
}

동적으로 CSS 클래스 설정

• 동적 인라인 스타일

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

• 위의 코드를 동적인 CSS 클래스로 변경해보면

<div className={`form-control ${!isValid ? 'invalid' : ''}`}>
  <label>Course Goal</label> />
  <input type="text" onChange={goalInputChangeHandler} />
</div>

스타일에

.form-control.invalid input {
  border-color: red;
  background: #ffd7d7;
}
.form-control.invalid label {
  color: red;
}

스타일이 지정된 컴포넌트 및 동적 Props

• styled-components 안에서 Props를 이용해서 스타일 지정

const FormControl = styled.div`
  & label {
    color: ${props => (props.invalid ? 'red' : 'black')}
  }

  & input {
    border: 1px solid ${props => (props.invalid ? 'red' : '#ccc')}
    background: ${props => (props.invalid ? '#ffd7d7' : 'transparent')}
  }
`

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

import styles from './CourseInput.module.css'

const CourseInput = props => {
  
(생략)

  return (
    <form onSubmit={formSubmitHandler}>
      <div
        className={`${styles['form-control']} ${!isValid && styles.invalid}`}
      >
      </div>
    </form>
  )
}