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