React에서 동적으로 스타일링하기 (삼항연산자, CSS 적용)

 

 

리액트에서 강력한 부분이 바로

조건부 렌더링이다.

 

조건부 렌더링에 대해 알아보기:

https://ko.reactjs.org/docs/conditional-rendering.html

조건부 렌더링 – React

 

이 부분은 JSX에서만 적용되는 것이 아니라

CSS 스타일링에서도 적용이 가능하다.

 

아래는 예시이다.

 

import React, { useState } from 'react';

import Button from '../../UI/Button/Button';
import './CourseInput.css';

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true)
  // 사용자가 제출한 것이, 입력한 것이 유효한지 확인하기 위한 Bool
  // 초기값은 true로 주고 아래에서 False를 set할 예정

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

  const formSubmitHandler = event => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      // 문자열.trim() -> 양쪽 모든 개행, 빈칸 없애는 메서드
      setIsValid(false); // 빈 값이 오는 경우에는 명백하게 잘못된 값이 들어오기 때문에 false
      return;
    }
    props.onAddGoal(enteredValue);
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <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>
      <Button type="submit">Add Goal</Button>
    </form>
  );
};

export default CourseInput;

 

위의 예시 경우,

유저가 입력한 값이 유효한지 안 한 지를 판단한 후 setState를 통해 상태 저장을 하고

해당 상태에 따라서 CSS 스타일링을 동적으로 수행한다.

 

또 다른 방법은 조건부로 클래스를 추가하는 것이다.

위의 방법은 인라인 스타일링으로 CSS의 모든 우선순위 중 가장 높게 잡히는 문제가 있다.

 

이것을 해결하기 위해서 CSS에 내가 원하는 스타일과 클래스를 명시해 두고

원하는 값이 오면 해당 클래스를 활성화하는 방식으로 한다.

 

예시로 리턴 부분만 작성해 보면

  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>
  );

백틱과 ${}를 통해서 내가 원하는 값이 있을 때 invalid를 클래스에 붙여서 활성화할 수 있다.

 

 

Udemy에서 리액트를 듣다가 조건부로 스타일링을 할 수 있다는 사실에 메모성으로 남겨둔다.