4-2. ref 실습하기

송한솔·2023년 4월 27일

목록 보기

22/54

01. ValidationSample.js / ValidationSample.css파일 생성

프로젝트를 만들어서 ValidationSample.js / ValidationSample.css 파일을 작성해 봅시다.

ValidationSample.js파일

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

class ValidationSample extends Component {
    state = {
        password: '',
        clicked: false,
        validated: 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;

ValidationSample.css파일

/* ValidationSample.css */
.success {
    background-color: lightgreen; /* 초록색으로 변경 */
}
.failure {
    background-color: lightcoral; /* 빨간색으로 변경 */
}

이 코드에 대한 설명

state

password : 사용자가 입력한 비밀번호를 저장하는 문자열입니다.
clicked : ‘검증하기’ 버튼이 클릭되었는지 여부를 나타내는 boolean 값입니다.
validated : 비밀번호가 올바른지 여부를 나타내는 boolean 값입니다.
여기서는 비밀번호가 '0000'과 일치하면 올바른 것으로 간주합니다.

handleChange 함수

비밀번호 입력 필드의 값이 변경될 때마다 호출되어
password상태를 업데이트합니다.

handleButtonClick 함수

"검증하기" 버튼을 클릭할 때 호출되며, clicked 상태를 true로 설정하고,
validated상태를 비밀번호가 '0000'과 일치하는지 여부에 따라 설정합니다.

render 함수

input에 입력된 값이 변경되면
handleChange함수를 호출하여 password의 state값이 변경되고
handleButtonClick 함수의 검증 결과에 따라
변경된 className에 의하여 스타일이 조건부로 결정됩니다.

결과적으로 이 코드에서 의도하는 바는

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

“검증하기” 버튼을 눌렀을때 handleButtonClick함수를 호출합니다.

버튼을 누르지 않는다면 handleButtonClick함수가 호출되지 않아서
className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
⇒ 누르지 않는다면 clicked값이 false로 고정이기 때문에 변경이 없습니다.

handleButtonClick함수를 호출하여 clicked값을 true로 설정합니다.

clicked값이 true로 변경됬을 때 this.state.validated를 호출하여 값이 ‘0000’인지 체크합니다.

this.state.validated ? 'success' : 'failure’
⇒ 이 코드에 따라서 ClassName에 비밀번호가 ’0000’이라면 ‘success’, 아니라면 ‘failure’가 리턴됩니다.

바뀐 ClassName에 의하여 설정해둔 css에 따라 스타일이 변경됩니다.

02. ref설정하기

콜백함수를 통한 ref 설정

// ValidationSample1.js
import React, { Component } from 'react';
import './ValidationSample.css';
class ValidationSample1 extends Component {
    state = {
        password: '',
        clicked: false,
        validated: false // 비밀번호가 틀림
    }

    handleChange = e => {
        this.setState({
            password: e.target.value
        });
    }
    handleButtonClick = () => {
        this.setState({
            clicked: true,
            validated: this.state.password === '0000'
        })
        this.input.style.fontSize = "40px";
        this.input.focus();
    }

    render() {
        return (
            <div>
                <h2>콜백함수로 ref 만들기!</h2>
                <input
                    ref={(ref) => {this.input=ref}}
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''} 
                />
                <button onClick={this.handleButtonClick}>검증하기1</button>
            </div>
        );
    }
}

export default ValidationSample1;

이렇게 하면 앞으로 this.input은 input요소의 DOM을 가리킵니다.

ref의 이름은 원하는 것으로 자유롭게 지정할 수 있습니다.
DOM 타입과 관계없이 this.superman = ref 처럼 마음대로 지정할 수 있습니다.

createRef함수를 이용한 ref 설정(React 16.3v 이후 사용가능)

// ValidationSample2.js
import React, { Component } from "react";
import "./ValidationSample.css";
class ValidationSample2 extends Component {

  input = React.createRef();

  state = {
    password: "",
    clicked: false,
    validated: false, // 비밀번호가 틀림
  };

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

  handleButtonClick = () => {
    this.setState({
      clicked: true,
      validated: this.state.password === "0000",
    });
    this.input.current.style.fontSize = "60px";
    this.input.current.focus();
  };

  render() {
    return (
      <div>
        <h2>createRef를 통해 ref만들기!</h2>
        <input
          ref={this.input}
          value={this.state.password}
          onChange={this.handleChange}
          className={this.state.clicked ? this.state.validated ? "success" : "failure" : ""}
        />
        <button onClick={this.handleButtonClick}>검증하기2</button>
      </div>
    );
  }
}

export default ValidationSample2;