개발/리액트 29 [리액트] React.memo를 이용해 성능 최적화를 해보자 React.memo가 필요한가? 어느 때와 같이 기획문서를 보고( 실은 기획자가 없어서 뇌리에 스치는 게 기획) 컴포넌트를 만들고 있었습니다. 이번엔 차트와 관련된 컴포넌트를 구현하고 있어서, Plotly 라이브러리를 활용해 미리 만들어놨던 컴포넌트에 테스트를 붙이고 구현하고 푸시를 했습니다. 문제 인식 | 성능이 구려 푸시를 하면 일단 기분이 좋기 때문에 완성된 모습을 뿌듯하게 쳐다보고 있는데 자꾸 버벅이는 느낌이 들어 바로 파고들어가 봅니다. 콘솔 창을 열고 확인을 해보니 같은 요청이 여러번 날아가는 것을 확인했습니다. 데브툴로 봐도 같은 prop임을 확인했습니다. 같은 요청 & 같은 데이터 --> 여러번 랜더링 -> 잘못된 구조 --> 최적화라는 뇌피셜 로직이 수행되었고 바로 어떤 컴포넌트인지 확인.. 2022. 1. 3. [리액트] RIW 프로젝트 - scroll animated number widget RIW 프로젝트란? React Interactive Widget 이란 오픈소스 프로젝트이며, 그냥 제가 개발하면서 동적인 컴포넌트들 구현해서 오픈스소화 시킬 목적으로 합니다. Scroll animated number widget 란? 금융관련된 프로젝트를 하면서 좋은 래퍼런스를 찾곤 했는데, 그 중에 로빈후드의 홈페이지를 보고 이쁘다고 한 화면이 있습니다. 바로 위아래로 스크롤하든 변하는 숫자들입니다. 동적으로 변하는게 멋져서 저도 이걸 구현해봐야겠다고 생각했습니다. 첫번째 아이디어는 "진짜 스크롤을 이용해보기" 입니다. [리액트] 부드럽게 이동하는 숫자 컴포넌트를 구현하는 방법(feat.타입스크립트) 사이드 프로젝트를 진행하면서 다른 웹페이지를 많이 보고 공부하고 있습니다. 그러던 와중에 로빈후드의 주.. 2021. 12. 16. [리액트] React-query 도입과 Suspense, Error Boundary를 적용해보자 들어가며 리액트를 하나보면 필연적으로 흰화면에 loading...를 띄우는 경험을 해보셨을 것이라 생각합니다. 그리고 주로 데이터가 없는 경우 if 문으로 분기처리를 하게 됩니다. 위의 방식이 나쁜것은 아닌데 하나의 컴포넌트에 return 문이 여러개가 되는 상황이 발생합니다. 아니면 삼항연산자로 분기처리를 하던가요. 그래서 조금더 리액트스러운 방법을 생각했고 Suspense와 Error Boundary를 통해 개선했습니다. 이번 글에서는 이 경험을 다뤄보도록 할게요. React-query는 왜 도입했는가? 뜬금없이 loading... 처리 얘기를 하다가 갑자기 React-query가 왜 나오냐? 하실수도 있습니다. 하지만 생각하보면 당연히 데이터패칭과 관계될수밖에 없는 것이 주로 loading을 보여줘.. 2021. 12. 15. [리액트] 리액트 컴포넌트의 변천사, 역사에 대하여 이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다. 제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다. 또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다. 쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다. 첫 번째. 리액트 컴포.. 2021. 7. 29. 이전 1 2 3 4 5 6 7 8 다음
