• 목차
• HTML에서 id를 사용해서 DOM에 이름을 달아준다면 리액트 프로젝트에서는 ref(reference)개념을 이용해서 DOM에 이름을 달아 줄 수 있어
• 리액트 컴포넌트에서도 id를 사용 할 수 있어
  • 하지만 사용을 권장하지 않아
    • id는 유일해야 하는데
    • JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링 할 때 id가 그대로 전달되기 때문에
    • 같은 컴포넌트를 여러번 사용하면 중복된 id들이 여러개 생기니까 잘못된 사용이 되게 돼

5.1 ref는 어떤 상황에서 사용해야 할까?

• DOM을 꼭 직접적으로 건드려야 할 때 사용해야해
• 함수형 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야하기 때문에 나중에 학습

예제 컴포넌트 생성

• js 파일과 css 파일을 각각 생성해주자
• 아래 코드를 보면 input 에서는 onChange 이벤트가 발생하면 handleChange를 호출해서 state의 password값을 input 안에 텍스트로 업데이트 하게 했고
• button 에서는 onClick 이벤트가 발생하면 handleButtonClick을 호출하여 clicked 값을 true로 설정하고 validated 값을 검증했어

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;

.success {
  background-color: lightgreen;
}

.failure {
  background-color: lightcoral;
}

• 뒤에 App 컴포넌트에서 ref를 사용해야하니 App컴포넌트도 클래스형 컴포넌트로 다시 작성해두자

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

class App extends Component {
  render() {
    return <ValidationSample />;
  }
}

export default App;

ref 사용

콜백 함수를 통한 ref 설정

• ref를 만드는 가장 기본적인 방법이야
• ref를 달고자하는 요소에 ref라는 콜백 함수를 props로 전달해주면 돼
• 이 콜백 함수는 ref 값을 파라미터로 전달받고
• 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해줘