[TIL]

React Ref

: React Ref는 특정한 DOM 노드, 혹은 컴포넌트 인스턴스에 reference를 걸어주는 것이다. Ref를 통해서 render 메서드에서 만든 DOM 노드나 React 요소에 접근해서, 값을 얻거나 수정할 수 있다.

const value = React.createRef();

//Ref 생성
class ClassName extends Component {
  handleRef = React.createRef();

  render(){
    return (
      <Component ref={this.handleRef}>
      {/*...*/}
      </Component>
    )
  };
}

: 클래스에 ref를 할당할 변수를 만들어주고 createRef()로 초기화한다. render에서 요소에 참조를 설정한다.

Ref에 접근하기

: 요소에 ref를 전달하면 변수를 통해 접근할 수 있다. 참조한 요소의 값을 얻거나, 수정하는 것이 가능하며, 메소드를 사용할 수 있다.

componentDidMount(){
  this.handleRef.current.onResize();
}
// ref가 참조하는 인스턴스의 onResize메소드를 사용. 설정한 요소는 ref의 current속성에 담긴다.

ref의 Case

1. HTML 요소에 ref_attribute를 전달하면, DOM 노드가 current 속성값이 된다.
2. 리액트 요소인 custom class component에 ref_attribute를 쓰면, 마운트된 컴포넌트의 인스턴스가 current속성값이 된다.

   함수 컴포넌트는 인스턴스가 없기 때문에 ref를 줄 수 없다. 함수 컴포넌트에 ref를 전달하면 그 ref에 접근할 수 없으며, development 모드에서 error 메세지를 출력한다. index.js:1446 Warning: Function components cannot be given refs. Attempts to access this ref will fail.

ref를 쓰는 경우

1. DOM노드에 접근해서 포커스, 미디어 재생 등을 제어하거나, 사이즈를 얻을 경우
2. 애니메이션을 직접 실행시킬 경우
3. 서드 파티 라이브러리를 사용할 경우
4. 자식의 state에 부모가 접근할 경우
5. state로 제어하지 않는 비제어 컴포넌트를 사용할 경우

class FilterBar extends Component {

  inputRef = createRef;

  handleClear = () => {
    this.inputRef.current.value = ''; // clear the input

    const someState = {};
    this.setState(
      someState,
      () => {
        this.inputRef.current.focus(); // focus the input
      }
    );
  };

  render() {
    return (
      <>
        <input ref={this.inputRef} type="text" />
        {/* ... */}
      </>
    );
  }
}

// <input />에 ref를 생성하고, handleClear 핸들러가 input에 포커스를 준다. 
// 그리고 current는 <input /> 요소이므로, inputRef.current.value로 값에 접근할 수 있다.

---

Event.stopPropagation()

: event.stopPropagation() 메서드는 부모 요소에 이벤트 버블링을 중지하여 부모 이벤트 핸들러가 실행되지 않도록 한다.
Bubbling : 자식 요소로부터 부모 요소로 올라오며 실행되는 것을 이벤트 버블링(Event Bubbling)이라고 한다.

<div>
  div 클릭
  <p>p태그 클릭</p>
  <span>span태그 클릭</span>
</div>

: 이렇게 클릭 이벤트를 생성할 경우 span태그 클릭시 span이벤트 실행 -> p이벤트 실행 -> div이벤트 실행 순으로 진행된다. 하지만 span이벤트가 p, div 상위 요소에 영향을 주지 않기 위해서 event.stopPropagation()을 사용한다.

[ 참고 ] https://tech.osci.kr/2019/10/10/82068584/