ref

• DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는데 사용되는 특별한 속성
• render 메소드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공

WHEN?

⭐️DOM을 직접적으로 건드려서 ⭐️ 특정 DOM에 작업을 해야할 때 사용!
state만으로 구현할 수 없는 기능이 있는데 이럴 때 DOM에 직접 접근해야 함

• 스크롤 박스
• 포커스 주기
• 미디어 재생 관리

클래스형 컴포넌트에서 ref를 사용하는 법

React.createRef() API를 이용하는 방법

리액트 v16.3에 도입된 방법
리액트에 내장된 createRef()를 이용한다

class MyComponent extends Component{
    constructor(props){
        super(props);
        this.myRef=React.createRef();
    }
    render(){
        return(
            <>
            <input ref={this.myRef}/>
            <button onClick={this.handler}>포커스 전달</button>
            </>
        );
    }
    handler=()=>{
        const node=this.myRef.current;
        node.focus();
    }
}

ref를 설정해 준 DOM에 접근하려면 this.myRef.current를 조회

콜백 ref를 이용하는 방법

• ref 어트리뷰트에 React.createRef()를 통해 생성된 ref를 전달하는 대신, 함수를 전달
• ref를 달고자 하는 요소에 콜백함수를 props로 전달, 콜백함수는 ref값을 파라미터로 받음
• 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정함

<input ref={x=> this.myInput=x}>

this.myInput변수는<input> 요소의 DOM을 참조하고 이를 직접 제어하는 것이 가능함

class MyComponent extends Component {
  state = {
    message: "",
  };

  render() {
    return (
      <>
        <input
          ref={(x) => {
            this.myRef = x;
          }}
          onChange={(e) => this.setState({ message: e.target.value })}
        />
        <button onClick={this.handler}>포커스 전달</button>
      </>
    );
  }
  handler = () => {
    const node = this.myRef;
    node.focus();
  };
}

패스워드 검증 예제

검증 버튼을 클릭했을 때, 패스워드 입력창의 내용이 0000이면 배경을 파란색으로, 아니면 붉은색으로 설정
0000이 아닐 경우, 패스워드 입력창에 포커스가 전달되도록

• 패스워드가 맞았을 때

• 패스워드 틀렸을 때

---

우선 PasswordChecker.js 컴포넌트를 생성한다.

패스워드 검증 버튼을 클릭했을 때 동작 추가

  clickButton=()=>{
    if(this.state.password==="0000"){
        this.setState({isValid:true});
    }else{
        this.setState({isValid:false});
    }
  };

패스워드 입력창에 0000를 입력하면 isValid를 true로 설정해서 배경이 파란색으로 나오도록, 그렇지 않으면 빨간색으로 나오도록

패스워드가 틀렸을 때 입력창에 포커스가 전달되도록 수정

1. 콜백함수 이용하는 방법

  clickButton=()=>{
    if(this.state.password==="0000"){
        this.setState({isValid:true});
    }else{
        this.setState({isValid:false});
        this.myInput.focus();
    }
  };

this.myInput.focus();추가

 <input
     type="password"
     value={this.state.password}
     onChange={this.changedPassword}
     style={this.state.isValid? {background:"blue"} : {background:"red"}}
     ref={x=>this.myInput=x} />

ref={x=>this.myInput=x}추가

2. createRef() 이용하는 방법

리액트 멤버 변수 myInput=React.createRef(); 추가
this.myInput.current.focus(); 포커스 적용

<input
 type="password"
 value={this.state.password}
 onChange={this.changedPassword}
 style={this.state.isValid? {background:"blue"} : {background:"red"}}
 ref={this.myInput}
/>

ref={this.myInput}추가