forwardRef vs useRef

forwardRef를 알려면 먼저 useRef에 대해 할아야 한다.
1) ref값이 변하여도 컴포넌트를 리렌더링 하지 않는다.
2) 컴포턴드가 리렌더링를 해도 ref 값은 변하지 않고 유저가 직접 변경해야 한다.
3) ref는 HTML DOM element를 직접 조종할수있다

1) ref 값이 변경해도 컴포넌트는 리렌더링 되지 않는다
위에 코드를 돌려본다면, 라인6 콘솔이 처음에만 프린트 되고, 버튼을 클릭해도 카운터 컴포넌트가 리렌더링 되지 않는것을 알수있다. 그리고 라인18에 텍스트도 Clicked 0 times ! 로 넘버가 0에서 부터 업데이트 되지 않는것을 볼수있다. 그 이유는 컴포넌트가 ref값이 변경되어도 컴포넌트를 리렌더링 하지 않기 때문이다.

2) 컴포넌트가 리렌더링을 하여도 ref값은 초기화 되지 않고 이전 렌더링의 값을 유지한다
위에 코드는 버튼 2개를 만들어 첫번째 버튼은 ref를 두번째 버튼은 스테이트를 사용하여 버튼이 클릭될때마다 값을 1씩 증가한다. 첫번째 버튼을 3번정도 클릭하고 두번째 버튼을 클릭해서 라인18 콘솔을 보면 Updating state 1 times! while ref is 3 프린트된걸 볼수있다. ref의 값은 컴포넌트가 리렌더링 되어도 값이 변하지 않고 유저가 직접 변경할수 있는것을 볼수있다. 스테이트라면 직접 변경하지 못하지 못한다. 예 위에 코드에서 counter = counter + 1 을 하여 변경하지 못한다.

따라서 ref의 값이나 행동은 스테이트와 달리 컴포넌트와 연결되어있지 않다.

3) ref는 HTML DOM element를 직접 조종할수있다
위 코드는 Form 컴포넌트가 렌더링을 끝나면 브라우저 포커스가 input element에 있는것을 볼수있다. 리액트는 이런 DOM element 조종을 허용하지 않지만 특수한 케이스를 위해 ref사용시 유저가 직접 조종할수 있는 방법도 제공하고 있는것이다.

그럼 forwardRef는 언제 쓰는걸까?

forwardRef는 ref를 자식 컴포넌트에 제공할때 사용한다. 왜냐하면 자식 컴포넌트의 HTML DOM에 접근할수 없기 때문이다

Form 컴포넌트는 버튼과 Input 컴포넌트를 자식으로 리턴한다. 버튼이 클릭되면, Input컴포턴트에 포커스가 맞쳐지는 것이다. 이때 Form component는 Input component의 HTML DOM 에 접근하여 포커스를 맞추는 방법이 없다. 이리 하여, ref는 부모인 Form component에서 생성하여, DOM을 접근하고 싶은 자식 컴포넌트인 Input에 넣어준다. Input은 forwardRef함수로 인하여 props과 또하나의 인수를 받는다 이것이 부모 컴포턴트에서 생성되고 패스된 ref(부모에선 inputRef로 생성 하여 자식에게 ref로 패스해줌)이다. 그리고 패스된 ref를 html dom element인 <input/> 에 넣어주어 dom을 직접 조작할수 있게 하였다.