Frontend8 공식문서로 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. npm VS yarn Vs pnpm Vs yarn berry 뭘 써야 해??? 1. Why?삼성청년SW아카데미에서 첫 프로젝트인 공통 프로젝트를 시작했다. 본격적으로 개발을 하기 전에 우선 어떤 기술을 사용할지부터 결정해야 하는데, 팀원 중 Package Manager에 대한 지식이 있는 사람이 없기에 어떤 Package Manager를 사용할지 찾아보고 팀원들에게 공유하고자 한다.1. Package Manager가 뭔데,, 어디 쓰는건데,,1) 모듈? 패키지?모듈 → js에서 require라는 node.js의 도구를 사용해서 가져올 수 있는 것패키지 → 그런 모듈을 모아놓은 것2 ) Package Manager란?Package Manager가 없다면?사용하고 싶은 Package를 직접 다운로드 받아서 설치해야함의존성 처리? 그건 알아서..만약 사용하던 라이브러리가 업데이트 된다면.. 2023. 7. 7. 이전 1 2 다음
