리액트 Ref에 대해 알아보자

Ref?

• ref는 변경이 가능한 변수이며, 값이 변할 때 렌더링이 되지 않습니다

• ref는 주로 dom에 접근해서, 컴포넌트 전체 랜더링과 관련없는 작업을 할 때 유용합니다

• 부모컴포넌트에서 자식컴포넌트로 ref를 내려줄때는 forwardRef를 사용합니다.

• ref는 사실 일반 객체입니다. ref를 찍어보면 다음과 같이 나옵니다.

• useRef는 리렌더링 하지 않습니다. 컴포넌트의 속성만 조회&수정합니다.

]

Ref와 컴포넌트 리랜더링

React에서 State는 많이 사용하고 , 중요한 개념입니다. useRef를 사용했을 때 이득이 되는 점은, 무분별한 컴포넌트 리랜더링을 방지한다입니다.

Ref를 출력해보면 current프로퍼티를 갖는 객체가 나옵니다. 리액트에서 이 객체를 통해 DOM의 직접적인 접근을 가능하게 합니다.

이제 Ref를 사용해봅시다.

위와 같은 코드가 있다고 해봅시다. 이 코드는 input이 바뀔떄마다, 리랜더링이 발생하고, 글자를 입력할떄마다, 상당히 많이 랜더링이 발생합니다.

이제 ref로 과도한 리랜더링을 방지해보겠습니다.

같은 문자열을 입력해도 리랜더링이 굉장히 적어진 것을 볼 수 있었습니다.

그럼 리액트에서 DOM API 쓰면 안되나요?

리액트에서도 id,class등의 DOM API를 사용 가능합니다. 하지만 사용이 권장되지
는 않습니다.

컴포넌트가 여러 개가 생성된 경우

이떄, id나 class로 특정해서 원하는 DOM요소를 갖고 오기 쉽지 않습니다. 예를
들어, 같은 컴포넌트를 여러번 사용한다고 생각해 봅시다. HTML에서 id는 유일해야
하는데, 이 경우에는 유일한 id가 여러번 반복해서 생기므로, 바람직하지 않는 접근
입니다.

fowardRef에 대해 알아보자

위에 작성해놓은, fowardRef에 대해서 알아보겠습니다.
다른 컴포넌트에 ref Props를 넘겨서, 그 컴포넌트에 있는 HTML요소에 접근하게 합니다.

부모컴포넌트로부터 하위컴포넌트로 ref를 전달가능하고, 이렇게 전달받은 ref를
HTML요소의 속성으로 넘겨주어서, 함수 컴포넌트에서 ref을 통한 제어가 가능합니다.

코드를 통해 알아보겠습니다.

1. 자식 컴포넌트(CustomInput)을 forwardRef으로 감싼다. 두번째 인자인 ref를 참조하려는 HTML요소에 할당한다.

2. 부모 컴포넌트(CustomField)에서 참조를 위한 useRef를 만든다.

3. 참조를 위한 ref값(요기에서는 inputRef)를 자식 컴포넌트의 props로 할당해준다.