react
-
React Windowingreact 2021. 1. 2. 15:18
서론 이 글은 프론트엔드 개발을 한 지, 1년쯤 된 예비 개발자가 쓴 글입니다. 오류가 많을 수 있고, 오타가 있을 수 있습니다. 발견하시면 댓글로 알려주시면 감사하겠습니다. 서버에서 pagenation을 안해줘요 😢 windowing에 대해서 알게 된 것은, React 최적화를 찾아보던 도중에 처음보는 단어가 있어서 들어간 것이였다. 구글에 검색해 보았다. 많은 데이터를 list로 만들게 되면 초기 렌더링이 너무 오래 걸린다. 사용자 입장에서 매우 불편하다. 이것을 해결하기 위해서 list중에 사용자에게 보이는 부분만 rendering 시키는 기법 이 글을 읽자마자, 생각난건 내가 옛날에 진행했던 프로젝트에서 겪었던 문제다. 예전에 streamer-storage라는 프로젝트를 진행하면서 서버에서 100..
-
babel과 webpack으로 react 세팅하기react 2021. 1. 1. 15:01
🤐서론🤐 이 글은 react를 접한지 1년 겨우 넘어가는 개발자 지망생의 글로, 틀린점이나 건의할 것이 있으시면 언제든지 댓글로 알려주시면 감사하겠습니다. ✋hi custom webpack!✋ 우리가 처음 react를 접할 때, CRA(Create-React-App)으로 react 를 setting 하게 된다. 하지만, 언젠가는, custom webpack과 babel로 react를 설정해야 하는 일이 오게된다. 예를 들면 CRA가 쓰는 react 버전이나 webpack 버전이 나의 컴퓨터와 안맞는다거나..등등 그럴 때, 언젠가는 필요한 custom webpack을 알아보자 💪 webpack setting 💪 우선 프론트 엔드 개발자들이 싫어하는 것 중 하나인 webpack을 setting 해보자 그다음..
-
forwardRef, useImperativeHandlereact 2020. 12. 31. 12:09
forwardRef reference를 다른 곳으로 넘겨주기 위해서 사용하는 method const Parent = (props) => { const ref = useRef(); return } const Child = React.forwardRef((props, ref) => { return }) forwardRef의 문제점 forwardRef의 문제점은 Parent에서 ref에 무엇이 들어가던지, 무조건 그에 관련된 코드를 실행시킬 것이다. 만약에 Child에서 ref를 설정하지 않았다면? Parent에서 ref가 Null이 될테니 코드가 검증되지 않는다. 문제 해결 방법 문제를 해결하는 방법은 useImplerativeHandle을 이용하여 ref와 data를 mapping 해주는 방법이 있다. c..
-
React Higher Order Component (HOC)react 2020. 12. 30. 12:57
HOC 내가 이 HOC에 대해서 알게 된 이유는, 단지 코드의 중복을 줄일 수 없을까? 라고 생각하던 도중에 동기 중 1명이 이것에 대해 알려 주었는데, 비슷한 동작이 여러번 반복되는 컴포넌트가 있을 때, 다른 함수로 여러번 빼지 않고 한개의 컴포넌트로 묶을 수 있게 되므로, 효율적이라고 생각하였습니다. 그래서 정리하게 되었습니다. what is HOC 우선 시작하기 전에 React Docs에 있는 HOC에 대한 설명을 알려 드리겠습니다. 고차 컴포넌트 (HOC, higher-order component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 제가 생각하는 HOC도 비슷합니다. 중복되는 코드를 재사용 하기 위해서 component로 빼내는 것. 이것이 제가 생각하는 HOC 입니..