6. Ref

리액트의 Ref를 이용하면 돔(DOM) 요소들을 직접 조작할 수 있습니다. Ref는 Reference의 줄임말로 참조라는 뜻입니다. 이번 절에서는 이 기능을 이용해 돔 요소를 제어해 보겠습니다.

useRef 사용하기 

리액트에서는 useRef라는 리액트 함수를 이용해 Ref 객체를 생성합니다. 먼저 함수 useRef로 Ref를 생성하기 전에 Body 컴포넌트를 다음과 같이 수정합니다.

코드를 불러오는 중 입니다 ...

src/component/Body.js

State 변수 text로 관리하는 텍스트 입력 폼 하나와 버튼 하나를 생성합니다.

버튼을 클릭하면 이벤트 핸들러 handleOnClick이 실행되어 입력 폼에서 작성한 텍스트를 메시지 대화상자에 표시합니다.

저장하고 페이지에서 텍스트 입력 폼에 ‘안녕 리액트’라고 입력한 다음, <작 성 완료> 버튼을 클릭합니다.

안녕 리액트를 표시하는 대화상자가 나오면 정상적으로 동작하는 겁니다. 계속해서 돔 요소의 하나인 <input> 태그의 입력 폼에 접근하는 Ref를 만들겠습니다. 다음과 같이 Body.js를 수정합니다.

코드를 불러오는 중 입니다 ...

src/component/Body.js

① useRef는 리액트가 제공하는 기능이므로 react 라이브러리에서 불러옵니다.  ② 함수 useRef는 인수로 전달한 값을 초깃값으로 하는 Ref 객체를 생성합니다. 생성한 Ref를 상수 textRef에 저장합니다.  ③ <input> 태그에서 ref={textRef} 명령으로 textRef가 돔 입력 폼에 접근하도록 설정합니다. 이제 textRef를 이용하면 입력 폼을 직접 조작할 수 있습니다.

저장해도 페이지에서는 아직 아무런 변화도 없습니다. 입력 폼에 대한 어떤 조작도 아직 시도하지 않았기 때문입니다.

useRef로 입력 폼 초기화하기

웹 서비스의 로그인 페이지는 대부분 사용자가 ID와 패스워드를 입력하고, 로그인 버튼을 클릭하면 패스워드가 올바른지 점검합니다. 그런 다음 패스워드 입력 폼에서 작성한 값을 초기화합니다. 리액트에서 Ref를 이용하면 이런 동작을 수행할 수 있습니다.

이번에는 useRef를 이용해 텍스트 입력 폼을 초기화하는 법을 알아보겠습니다. 다음과 같이 Body 컴포넌트를 수정합니다.

코드를 불러오는 중 입니다 ...

src/component/Body.js

① 버튼을 클릭해 이벤트 핸들러 handleOnClick을 실행합니다. 대화상자에서 <확인> 버튼을 클릭 하면, textRef.current(textRef가 현재 참조하고 있는 돔 요소)의 value 값을 공백 문자열로 초기화합니다.

저장하고 텍스트 입력 폼에서 ‘안녕 리액트’를 입력한 다음 <작성 완료> 버튼을 클릭 합니다. 안녕 리액트를 표시하는 메시지 대화상자가 나오면 <확인> 버튼을 클릭합니다.

텍스트 입력 폼에서 입력한 문자열이 사라지고 빈 공백만 남습니다. 이렇듯 Ref를 이용하면 돔 요소를 원하는 형태로 조작할 수 있습니다.

useRef로 포커스하기

웹 서비스에서는 사용자가 특정 폼에 내용을 입력하지 않거나 내용이 정한 길이보다 짧으면 해당 폼을 포커스(focus)하여 사용자의 추가 입력을 유도합니다. 리액트의 Ref 기능을 이용하면 특정 요소에 포커스 기능을 지정할 수 있습니다.

이번에는 텍스트 입력 폼에서 사용자가 문자를 다섯 글자 미만으로 입력하면 이 요소에 포커스한 상태로 사용자가 입력을 추가할 때까지 대기합니다.

다음과 같이 Body 컴포넌트를 수정합니다.

코드를 불러오는 중 입니다 ...

src/component/Body.js

① 현재 <input> 태그로 지정한 폼에 입력한 텍스트가 다섯 글자보다 적다면 textRef.current가 참조하는 입력 폼에 포커스를 실행합니다. focus()는 현재 돔 요소에 포커스를 지정하는 메서드 입니다. ② 텍스트 폼에 입력한 값을 초기화하기 위해 set 함수 setText를 호출하고 인수로 빈 문자열을 전달합니다. Ref를 사용하지 않고도 set 함수로 입력 폼을 초기화할 수 있습니다.

저장한 다음, 텍스트 폼에서 다섯 글자 미만의 문자열을 입력하고 <작성 완료 > 버튼을 클릭해 포커스 기능이 동작하는지 확인합니다.

다섯 글자 미만의 문자열을 입력하니 포커스 기능이 동작하면서 입력 폼을 초기화하지 않고 사용자의 입력을 기다립니다.