본문 바로가기

REF2

공식문서로 forwardRef와 useImperativeHandle 알아보기 1. forwardRef는?이제 forwardRef로 들어가보자. forwardRef는 자식 컴포넌트가 부모 컴포넌트에 DOM 노드를 노출할 때 사용한다. 나 같은 경우는 Atomic 패턴을 이용해 컴포넌트를 나누면서 부모 컴포넌트가 자식 컴포넌트 DOM 노드의 값을 가져가 사용할 일이 많다보니 자연스럽게 사용하게 되었다.forwardRef를 사용하면 컴포넌트가 ref를 사용하여 부모 컴포넌트에 DOM 노드를 노출할 수 있습니다. forwardRef는 JSX에서 렌더링할 수 있는 React 컴포넌트를 반환합니다. 일반 함수로 정의된 React 컴포넌트와 달리, forwardRef가 반환하는 컴포넌트는 ref prop을 받을 수도 있습니다. 컴포넌트의 DOM 노드는 비공개가 기본이지만, forwardRef.. 2023. 11. 7.
공식문서로 ref 알아보기 1. Why?원래 다른 글부터 쓰다가 이걸 설명해야 할 것 같아서 이 글을 먼저 작성한다.이 남자는 블로그 글을 컴포넌트처럼 나눠드립니다.공식문서의 흐름을 따라서 ref로 값 참조하기, ref로 DOM 조작하기를 설명하고 그 다음 forwardRef를 볼 예정이다. 다만 아직 공식문서가 번역이 이뤄지지 않았기에 정재남님이 번역한 React 공식문서 비공식 번역판을 참고해서 글을 작성하겠다.2. ref로 값 참조하기4년간 철학 수업을 들으면서 느낀건 언제나 개념을 정의하는게 가장 중요하다는 것이다. ref의 개념부터 정의해보자.ref는 reference를 의미하며, 한국말로는 참고, 참조를 뜻한다. 최신 공식문서에는 다음과 같이 적혀있다.When you want a component to “remember.. 2023. 11. 1.