Frontend/React & Next.js3 공식문서로 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. 전역 상태 관리 라이브러리들(Redux, Recoil, jotai, zustand...) 작년에 멋쟁이 사자처럼을 하면서 Front에 입문했는데, 그 때 나를 가장 고통에 빠트린게 바로 Redux였다. html, css와 함께 즐겁게 배우다가 Js와 React를 거치면서 점점 어려워지더니 Redux라는 '전역 상태 관리 라이브러리'의 등장은 정말...물론 꽤 예전 이야기라, 새싹톤과 StarGate에서는 각각 Redux와 Recoil을 사용했고, 이번 프로젝트에서는 Jotai를 사용하고 있다. 이렇게 여러가지 라이브러리를 사용하면서 각자의 장단점에 대해서 알게 되었고 이에 대해서 글을 적어보려고 한다. 우선 Flux 패턴의 대표주자인 Redux와 Atomic 상태 관리의 대표 Recoil을 비교해보고(Proxy의 대표주자인 Mobx는 안써봐서 다음 기회에...), Redux에서 영감을 받은 .. 2023. 9. 13. 이전 1 다음
