React에서 Refs는 DOM 요소 또는 React 컴포넌트에 직접적으로 접근하기 위한 방법을 제공합니다. JSX에서 Refs를 다루는 방법에 대해 알아보겠습니다.

Refs 생성하기

JSX에서 Refs를 생성하는 방법은 다음과 같습니다:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef}>Hello, World!</div>;
  }
}

위 예제에서 React.createRef() 함수를 사용하여 Refs를 생성하고, ref 속성을 통해 해당 Ref를 연결합니다.

Refs 사용하기

Refs를 이용하여 DOM 요소에 직접적으로 접근할 수 있습니다:

class MyComponent extends React.Component {
  // ...

  focusInput() {
    this.myRef.current.focus();
  }

  // ...
}

current 속성을 사용하여 Refs에 직접적으로 접근할 수 있습니다. 위 예제에서는 focusInput 함수를 통해 Refs를 사용하여 input 요소에 포커스를 맞출 수 있습니다.

Refs를 이용한 컴포넌트 접근

Refs를 이용하여 자식 컴포넌트에도 접근할 수 있습니다:

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  render() {
    return <ChildComponent ref={this.childRef} />;
  }
}

부모 컴포넌트에서 Refs를 생성하고, 자식 컴포넌트의 ref 속성을 통해 부모 컴포넌트에서 자식 컴포넌트에 직접적으로 접근할 수 있습니다.

결론

JSX에서 Refs를 다루는 방법을 알아보았습니다. Refs를 이용하여 DOM 요소나 React 컴포넌트에 직접적으로 접근하는 방법을 숙지하면, 보다 유연하고 세밀한 컴포넌트 제어가 가능해집니다.

React 공식 문서 - Refs and the DOM