React - 동적 스타일링

Dynamic style

• 리액트에서는 동적으로 스타일 클래스를 추가하고 제거할 수 있다.

• 아래의 코드를 보면, input태그에 값이 들어오지 않은 채로 제출을 누르면 invalid라는 css클래스가 동적으로 추가되며 빨간색으로 input과 label 태그를 바꿔준다.

• 그리고, 입력이 들어올 때마다, 공백인지 아닌지를 판단해 제대로된 값이 들어온다면 invalid클래스를 제거해주도록해 원상복구 시키도록 한다.

• 아래의 코드를 통해 동적으로 특정 상황에 맞게 스타일을 쿼리스트링을 이용해 삽입하거나 제거할 수 있다는 사실을 알 수 있다.

const [isValid, setIsValid] = useState(true);

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


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


<div className={`form-control ${!isValid ? 'invalid' : ''}`}>

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

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

Styled Components

• Styled Components 란? 스타일이 적용되는 컴포넌트에만 영향을 미치고 다른 곳에서는 영향을 미치지 않는 라이브러리이다.
• 설치는 다음과 같다. npm install --save styled-components

Tagged template Literal

• 메서드의 괄호 대신에 백틱으로 전달하는 구문이다.
• styled.button 은 신기하게도 새로운 button을 반환하는 메서드이다.
  • h1 h2 p a button 어떤 html 태그들을 포함하고 있다.
• 이는 굳이 .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);
  }
`

• 그리고 동적으로 백틱 내부로 props를 넘길 수 있다. 생성된 Button을 사용할 때, props를 넘기고
• border: 1px solid ${props => (props.전달받은 인자 ? 'red' : 'blue')}의 형태를 통해 동적으로 세부적인 css 요소에 접근할 수 있다.