프로그래밍/react

1-8) [리액트 기초] Ref 사용방법

플로어코딩 2024. 1. 29. 13:06

리액트의 Ref 를 이용하면 돔(DOM) 요소들을 직접 조작할 수 있다.

Ref는 Ref-erence의 줄임말로 참조라는 뜻이다.

 

useRef 사용하기

일단 아래와 같이 작성하자.

 

 

// src/App.js

import './App.css';
import Header from './components/Header';
import Body from './components/Body';
import Content1Refactor from './components/contents/Content1Refactor';
import Content2 from './components/contents/Content2';
import Footer from './components/Footer';
import ContentUseRef from './components/contents/ContentUseRef';

function App() {

  return (
    <div className="App">
      <Header />		
      <Body>
          <ContentUseRef />
      </Body>
      <Footer />
    </div>
  );
}

export default App;

 

// src/components/contents/ContentUseRef.js

import { useState } from 'react';


const ContentUseRef = () => {
 const [text, setText] = useState('');

 const handleOnChange = (e) => {
      setText(e.target.value);
 }

 const handleOnClick =(e) => {
      alert(text);    
 }

  return (
      <div>
          <h3>ContentUseRef </h3>
          <input value={text} onChange={handleOnChange} />
          <button onClick={handleOnClick}>전송</button>
      </div>
  )
}

export default ContentUseRef

 

 

위 코드에서 아래의 코드를 추가

 

import { useRef, useState } from 'react'; //useRef 추가



const textRef = useRef(); //추가

<input ref={textRef} value={text} onChange={handleOnChange} /> //변경
// textRef가 돔 입력 폼에 접근하도록 설정하여, 입력 폼을 직접 조작할 수 있다.

 

위 코드를 아직 아무런 변화를 갖진 못한다.

입력 폼을 작성 후 어떤 조작도 하지 않았기 때문이다.

 

위 코드를 그럼 어떻게 활용하면 될까?

 

useRef를 이용하여 입력 폼을 초기화 하는 예시의 전체 코드이다.

 

// src/components/contents/ContentUseRef.js

import { useRef, useState } from 'react';


const ContentUseRef = () => {
 const [text, setText] = useState('');
 const textRef = useRef();

 const handleOnChange = (e) => {
      setText(e.target.value);
 }

 const handleOnClick =(e) => {
      alert(text);    
      textRef.current.focus();			//textRef로 포커싱 및 값 초기화
      textRef.current.value = '';
 }

  return (
      <div>
          <h3>ContentUseRef </h3>
          <input ref={textRef} value={text} onChange={handleOnChange} />
          <button onClick={handleOnClick}>전송</button>
      </div>
  )
}

export default ContentUseRef

 

 

 

여기서 리액트 훅에 대해서 알아보자.

 

리액트 훅(React Hook)이란 함수로 만든 리액트 컴포넌트에서 클래스로 만든 리액트 컴포넌트의 기능을 이용하도록 도와주는 함수들이다.

위 예제들을 보면 State를 만든 useState, useRef들이 이러한 예이다.

이 두 함수 모두 이름이 use로 시작하는데 리액트 훅은 이름 앞에 항상 use를 붙인다.

 

리액트 훅은 이것 외에도

useEffect, useContext, useReducer, useCallback, useMemo 등이 있다.

 

다양한 리액트 훅은 아래 링크를 참조하자

https://legacy.reactjs.org/docs/hooks-reference.html

 

Hooks API Reference – React

A JavaScript library for building user interfaces

legacy.reactjs.org

 

https://react.dev/reference/react

 

React Reference Overview – React

The library for web and native user interfaces

react.dev

 

리액트 ㅎ훅은 2018년도에 처음발표가 되었다.

리액트 훅이 발표되기 전까지는 함수로 만든 컴포넌트에서는 State나 Ref와 같은 기능을 사용할 수 없었다.

따라서 그 시절에는 대부분 컴포넌트를 클래스로 만들었다.

 

클래스로 컴포넌트를 만들다 보니 기본적으로 생성해야하는 코드가 너무 많고, 가독성이 좋지않아

리액트 개발팀에서 함수로 만든 컴포넌트에서도 클래스로 만든 컴포넌트 기능을 하용할 수 있게 하였다.

 

다양한 리액트 훅에 대해서는 다른 컨텐츠에서 다루도록 하겠다.

저작자표시 비영리