본문 바로가기

Client/React

[React] forwardRef

forwardRef와 함수를 component 형으로 빼기

서버 언어들의 class 처럼 상속 등을 통해 사용할 함수들을 캡슐화 하고 싶었다.

react 문법 자체가 class형에서 함수형으로 전환되고, 보편적으로 사용되는 추세이다 보니 함수형 component라는 틀 내에서 해결하려 했는데, class 내에서는 jotai를 사용하지 못하다 보니 (hook 특성 상) 원하는 처리를 하려 하면 parameter로 대상 atom 데이터를 전부 넘겨줘야 하는 상황이 발생.

그렇게 헤메다가 발견한게 fowardRef였는데, 결과적으로는 내가 원하던 작업은 아니었고. 희망을 가지고 하다가 내가 아무것도 몰라서 헛되게 희망을 가졌었던 것을 깨닫고, 원리라도 정리해두려 한다.

내가 원했던 것은, 자식 컴포넌트 내의 함수를 활용하고 싶었던 것인데 (정확히 말하자면 컴포넌트가 아닌 atom이나 state를 사용할 수 있는 util을 원했다) 실제로 fowardRef는 자식 컴포넌트(custom component) 내에 존재하는 컴포넌트 객체를 handleing 하고자 할 때 사용하는 것 이었음.