⚛ React ref

인스타그램 react 클론을 진행하던 중, 댓글 창의 게시 버튼을 눌렀을 때 input의 value 값 초기화 및 focusing 풀림 방지 기능이 필요했다. 하지만 button태그에서 형제 DOM 노드로 접근하기 위해서는 props가 아닌 다른 방법이 필요했다. 때문에 공식문서를 검색하던 중 Ref를 알게 되었으며 이를 간단하게 정리해보고자 한다.

React Ref란?

• render 메소드에서 생성된 DOM노드에 접근할 수 있는 방법이며 React 16.3 이후에 추가된 API이다.

• 특정한 DOM노드, 혹은 컴포넌트에 reference 를 지정하여 해당 값을 얻거나 수정할 수 있다.

How to use it?

• class

class Feed extends React.Component {
  constructor(props) {
    super(props);
    this.inputLocation = React.createRef();
  }
  addComment = () => {
    console.log(inputLocation)
  }

• rendering tag

  render() {
    return (
      <>
        <input ref={this.inputLocation} / >
        <button onClick={this.addComment}></button>
      </button>

• 클래스 기반 컴포넌트는 this.name = React.createRef()를 통해 생성이 가능하며 current 속성을 갖는 특정 객체를 통해 접근이 가능하다.

✔ 실제로 확인해보니 바닐라JS에서 쿼리 셀렉터를 통해 DOM 노드에 접근했던 것처럼, current를 통해 접근할 수 있었다.

구현 결과

addComment = () => {
  const { commentList, inputValue } = this.state;
  this.setState(
    {
      inputValue: "",
      commentList: commentList.concat({
        id: commentList.length + 1,
        name: "yongmin",
        comment: inputValue,
      }),
    },
    () => {
      this.setState({ buttonColor: false });
      this.inputLocation.current.value = ""; //addComment()가 실행될 때 input값을 공백화
      this.inputLocation.current.focus(); // 코멘트가 달린 후에도 지속적으로 focus 유지됨
    }
  );
};

• 추가로 이렇게 직접 DOM요소에 접근하여 값을 변경하는 방법은 JQuery와 같은 명령형 방식의 웹 프로그래밍이다. 선언형 방식의 프로그래밍 패러다임을 기반으로 하는, react를 포함한 모던 자바스크립트 라이브러리에서는 반드시 필요한 경우가 아니고선 사용을 지양하는게 좋다고 한다.

• 명령형 프로그래밍: 코드로 원하는 결과를 달성해 나가는 과정에만 관심을 두는 프로그래밍, 즉 어떠한 과정을 거칠 지 구체적인 과정을 하나하나 나열한다. (결과물보다는 과정이 중요)
  
  
• 선언형 프로그래밍: 필요한 과정을 하나하나 나열하기 보다는, 어떤 결과물을 원하는지에 집중되어있다. 즉, 어떻게가 아닌, 무엇이 이루어지는지에 대해 초점이 맞춰져있다.

Reference

• Ref와 DOM

• React에서 Ref 사용하기

• [React] ref로 HTML 엘리먼트에 접근/제어하기