[TIL/React] 2023/07/08

forwardRef

부모 컴포넌트에 ref가 있는 경우, 자식 컴포넌트를 부모 컴포넌트에서 노출하기 위해서는 forwardRef의 사용이 필요하다.

reference: https://react.dev/reference/react/forwardRef#usage

우선 'ref 값'을 전달하고자 하는 컴포넌트를, forwardRef 함수에 담아준다. 해당 컴포넌트는 props와 ref를 argument로 받는다. props와 ref를 명확히 이해하기 위해 몇가지 테스트를 진행했다.

1. 반드시 props를 'props'라는 형태로 전달해야 하는가? 구조분해할당이 적용되는가?

현재 진행 중인 프로젝트는 App.js라는 최상단 파일에서 ref를 선언하고 있고, HomePage라는 자식 컴포넌트를 부모 컴포넌트(App.js)에서 노출하기 위해 forwardRef가 적용된 상태이다.

HomePage에 props로 'a'를 전달했다. 구조분해할당이 가능하다면, HomePage에서 console을 찍으면 '123'이라는 string이 출력될 것이다. 위에 보이는 바와 같이 잘 출력되었다.

반드시 'props'라는 형태를 고수할 필요는 없고, forwardRef에서도 구조분해할당으로 props를 전달해도 된다는 사실을 알았다.

2. props와 ref의 순서를 변경해도 되는가?

argument의 순서만 변경했을 뿐인데 runtime error가 발생한 것을 확인할 수 있다. 'props'와 'ref'의 순서는 반드시 지켜줘야 함을 알았다.

3. ref라는 이름으로 props를 전달받는 것도 구조분해할당의 일환 아닌가? 그렇다면 a와 ref를 동시에 중괄호로 묶는 것도 가능한가?

역시나 runtime error가 발생한다.

정리

forwardRef는, 부모 컴포넌트에서 자식 컴포넌트를 노출해야 할 때, 부모 컴포넌트에서 선언한 ref를 자식 컴포넌트로 전달하기 위한 하나의 방식이다.

props와 ref를 argument로 받고, props는 구조분해할당의 적용이 가능하며 props와 ref를 받는 순서는 runtime에 있어 의미가 있다.

일반적으로 appbar에서는 라우팅 관련 로직을 처리하고, scrollbar는 개별 페이지에서 활용한다. scroll을 appbar에서 구현하려다보니 파일의 구조가 복잡해졌고, 그 연장선에서 ref를 중첩된 여러 파일에 전달하는 과정이 어려워진 것이다.

일반적인 파일 구조가 어떻게 구성되는지 다시금 생각해볼 수 있는 기회가 되었고, ref라는 개념 자체에 대한 이해가 깊어졌다.

회고

개념 한 가지를 더 아는 것도 중요하지만, 결국 상위 레벨에 대한 방향성을 제대로 설정하는 것이 가장 중요하다는 것을 깨닫게 된 하루였다. 문제 해결의 과정에서 초기에(=상위 레벨 구현에) 많은 고민을 하지 않아서 1도가 틀어지면, 하위 레벨에서는 그 '틀어짐'을 감당할 수 없게 된다. '코딩' 전에 '문제 해결'이고, '문제 해결' 전에 '문제 정의'이다. 잘 하자!