이벤트에 따른 class명 변경

 

 

 

ValidationSample.css

.success {
  background-color: lightgreen;
}

.failure {
  background-color: lightcoral;
}

class가 success 면 lightgreen이,

failure면 lightcoral이 되는 css를 먼저 코드한다.

 

ValidationSample.js

import React, { Component } from "react";
import "./ValidationSample.css";

class ValidationSample extends Component {
  state = {
    password: "",
    clicked: false,
    vaildated: false,
  };

  handleChange = (e) => {
    this.setState({ password: e.target.value });
  };

  handleButtonClick = () => {
    this.setState({
      clicked: true,
      validated: this.state.password === "0000",
    });
  };

  render() {
    return (
      <div>
        <input
          type="password"
          value={this.state.password}
          onChange={this.handleChange}
          className={
            this.state.clicked
              ? (this.state.validated
                ? "success"
                : "failure")
              : ""
          }
        />
        <button onClick={this.handleButtonClick}>검증하기</button>
      </div>
    );
  }
}

export default ValidationSample;

 0. 처음 state의 상태는 password는 공백, clicked는 false, vaildate는 false이다.

  state = {
    password: "",
    clicked: false,
    vaildated: false,
  };

 

1. 비밀번호 입력 후 button 클릭

 1-1) handleButtonClick 이벤트 실행

 1-2) clicked가 true로 된다.

 1-3) validate는 state.password === "0000"이 된다.

  handleButtonClick = () => {
    this.setState({
      clicked: true,
      validated: this.state.password === "0000",
    });
  };

 

2. input의 className을 보면, 

 

          className={
            this.state.clicked
              ? (this.state.validated
                ? "success"
                : "failure")
              : ""
          }

2-1) 첫번째 삼항연산자

this.state.clicked ? validated : ""

처음엔 false이기 때문에 className이 없는 "" 상태지만, 버튼을 누르게 되면 validated가 true로 setState된다.

 

2-2) 두번째 삼항연산자

this.state.validated ? "success" : "failure"

 

입력된 password (onChange)가 validated가 0000 인가? 

맞으면 클래스명이 success, 틀리면 failure가 된다.

 

 

---

 

TIP:

 

JSX 내부에서는 if문을 쓸 수 없으며 삼항연산자를 사용하여 조건문을 준다.

중괄호를 쓴 뒤, false 는 null 을 쓰는 것이 관습적이다.

 

 

function Modal() {
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세 내용</p>
    </div>
  );
}

{1 < 3 ? <Modal /> : null}

 

react 에서는 on / off 를 state로 관리한다.

 

  let [modal, modalChange] = useState(false);

modal이 처음엔 false이며, 이벤트가 일어날 때 modalChange로 상태를 관리한다.

(이 경우엔 이벤트 발생 시, true 로 바꾸어주어야겠다)

 

          <h3
              onClick={() => {
                modalChange(true);
              }}
            >

modalChange를 true로 바꾸어 주는 모습