TIL 38 | 리액트에서 DOM 에 직접적인 접근을 할 때, ref

리액트에서 DOM 에 직접적인 접근을 해야 하는 경우가 있다.

• input / textarea 등에 포커스를 해야 할때
• 특정 DOM 의 크기를 가져와야 할 때
• 특정 DOM 에서 스크롤 위치를 가져오거나 설정을 해야 할 때
• 외부 라이브러리 (플레이어, 차트, 캐로절 등) 을 사용 할 때

첫번째로 input등에 포커스를 해야할 때를 예시로
이전에 js방식으로 접근하는 방법과,
리액트를 ref를 통해 접근하는 방식을 살펴보도록 하자.

우선 input창에 계속 focus를 두고 싶다는 이야기는 무슨 뜻일까?

위의 그림처럼 input을 입력하고 버튼(Set Focus)을 클릭하게 되면 input창에 보이는 저 동그란 부분이 사라지게 된다. 우리는 버튼을 눌렀어도 저 부분이 사라지지 않길 원하는 것이다.

그렇다면 어떻게 해야할까?
js 방법으로 접근하자면, document.querySelector(‘input’).focus()
를 두는 방법이 있다.
하지만 우리는 react안에서 react가 일할 수 있도록 우리는 데이터만 전달하고 react가 그 데이터를 그려주는 역할을 하도록 맡기고 싶다. (그것이 우리의 react사용 목적이니깐 말이다!)

따라서, 원래 하던 접근 방식인 document.querySelector를 쓰지 않고 리액트가 제공하는 DOM에 직접 접근할 수 있는 방법인 ref를 써보자.
값을 입력할때마다 foucus를 쓰고 싶다면 input에 ref(reference)를 쓰고 함수를 넣어준다.
방법은 이해하는게 아니고 외우고 익숙해지는 것이니 어느곳에 해당 사항이 들어가고, 함수에 인자는 어디와 같아야 하는지 잘 살펴보자. 그래야 응용이 가능하니까!

return에 ref를 사용하고 input이라는 변수는 render전에 한번 그냥 선언 (input;)해준다.
그리고 만약 input이 아니라 hello로 해준다면, 위에 선언도 hello;로 같게 해줘야 한다.
그리고 사용하는 이벤트에 this.input.focus();를 써주면 끝!

또한 추가적으로 보통 함수를 쓸경우 어디에 위치시켜야 하느냐에 대해 설명하겠다.
프로젝트를 할때 보통 함수는 render위에서 만들었었는데 그 이유는 만약 return 아래에 만들게되면 setState가 실행될때마다 render가 반복되어 일어나게되고 그렇게 되면 복잡한 함수인경우 계속 render가 실행될 때마다 함수가 새로 만들어지게 되’는 낭비’를 하게 되는 것 이다.
따라서 함수들을 밖으로 빼준다.

사용법을 더 익히기 위해서 다른 예제를 살펴보자.

잠깐! 💁🏼 !
만약 component내에 ref와 setState를 쓰지 않는다면, functional component를 사용하면 훨씬 간결해진다.
이 부분은 hooks를 다룰 다음 포스팅에서 자세히 더 이야기해보겠다 😉

const Gugudan = () => {
return <div>Hello, functional Component! </div> }