useState에 대하여 저번 포스트에서 reRendering에 대해서 다뤘었다. https://ww8007-learn.tistory.com/21 왜 내 컴포넌트는 reRendering이 될까? 이번 포스트에서는 React Component의 reRendering에 대해서 다뤄보려고 합니다. 리렌더링은 안 좋은 거다. useCallback이나 useMemo를 사용해서 최적화를 해야 한다 등 여러 가지 말들이 정말 많은 주제이죠. ww8007-learn.tistory.com reRendering에 대한 내용을 작성하면서 디버깅을 진행하던 도중 문득 나는 React에 대해서 제대로 알고 있는 것이 맞을까? 라는 의문이 들어서 공식 문서를 기반으로 hook 들과 동작 원리에 대해서 이해하고 이를 직접 구현해보..

이번 포스트에서는 React Component의 reRendering에 대해서 다뤄보려고 합니다. 리렌더링은 안 좋은 거다. useCallback이나 useMemo를 사용해서 최적화를 해야 한다 등 여러 가지 말들이 정말 많은 주제이죠. 하지만 내 컴포넌트가 정말 합당하게 reRendering이 되고 있는지는 고민해봐야 할 문제입니다. (요번에 호되게 당했기 때문…) 그럼 한 번 알아볼까요? 왜 reRendering이 되는 걸까? 예시는 주차신청 에플리케이션이며 신청 로직의 경우 step 별로 이루어지기 때문에 Toss의 컨퍼런스 내용의 Funnel 패턴을 이용하여 구현하였습니다. (Funnel 패턴이 무엇인지 궁금하신 분들은 아래 링크를 참고해 주세요) 또한 유저에 대한 상태관리는 전역적으로 사용됨을 ..

1. 무한 스크롤 이란? 흔히 저희가 웹 서핑을 하다 보면 수많은 글 들이 세로로 끝이 없이 나열되어 있는 것을 보실 수 있습니다. 그렇다면 이들은 어떻게 구성되는 걸까요? 1. 한 번에 모든 게시물을 불러온다. 2. 10 ~ 15개씩 끊어서 부른다. 단순하게 생각해 봐도 게시물의 개수가 500개 이상이 된다면 한 번에 모든 데이터를 단일 통신으로 받아오는 데는 latency와 서버에 부하가 될 수 있겠죠? 요번에는 FE 관점에서 무한 스크롤을 적용할 수 있는 방법에 대해서 알아보려고 합니다. 2. 어떤 식으로 구성할까? 무한 스크롤을 적용하는 방법은 생각보다? 간단합니다. 다음과 같은 방식으로 스크롤을 쭉 내리다가 초록색이 보였을 때 다음 아이템들을 불러올 수 있는 API를 call 하면 됩니다. 물론..

스토리북 상태 변경 이번 팀 프로젝트를 하면서 미루고 미루던 공통 UI 컴포넌트들을 스토리북을 통해 제공을 하기로 마음을 먹었습니다. 단순하게 컴포넌트에 대한 UI 적인 스토리북을 만드는 것은 정말 많은 곳에서 찾아볼 수 있는데 Controls를 통해 제공하는 상태값을 통해 화면을 핸들링할 수 있는 요소에 대한 예제는 정말 없는 것 같아서 이번 기회를 통해 정리를 해두려고 합니다 😃 1. 컴포넌트 준비하기 일단 요번 예제에서 사용될 컴포넌트 입니다. 토글 형식으로 ON, OFF 상태를 바꿀 수 있는데요 아래의 코드를 보고 어떤 UI를 가지는지 혹시 예상이 가시나요? interface Props { offText: string; onText: string; isToggle: boolean; setToggl..

스켈레톤 UI에 대하여 우리가 흔히 웹사이트나 앱들을 이용하면 서버에서 필요한 응답을 받아오기 까지 시간이 걸리기 때문에 본문 내용 대신 애니메이션이 포함된 로딩되는 화면을 바라볼 때가 많습니다. 지나가며 본 글로 사용자는 3초 이상 빈 화면을 바라보게 되면 페이지를 이탈하게 된다는데 어찌 보면 저도 "이거 왜 이래" 하면서 껐다 켜는 경우가 많은 것 같네요🧐 이를 개선하는 과정에서 SSR, SSG, ISR 같이 여러 노력이 있었지만 결국 클라이언트에서 비동기 데이터가 필요한 시점에서는 이를 해결할 무언가가 필요한 거죠. 로딩 상태를 표현하는 법 우리가 흔히 봐왔었던 로딩 표시는 어떤 것들이 있을까요? 1. 로딩 스피너 2. 프로그래스 바 3. 스켈레톤 UI 그럼 WHY 스켈레톤? 일단 제 마음에 들었습..

최적화 관련 HOOKS React를 공부하보면 가장 궁금하고 신기하다고 느끼던게 Hook 이였다. 공부를 하면서 배웠던 점들을 정리 해보려고 한다. 최적화는 왜 필요한데? 🤔 최적화를 생각한다면 정보를 캐싱해서 사용하는 것을 일반적으로 생각할 수 있다. React 에서는 특히 페이지 새로고침(reRender) 에 대해서 최적화에 대해 예민하게 생각해야 하는 것이 사실 물론 간단한 페이지의 경우 이를 신경쓰지 않아도 문제가 없는 경우가 많다. 그래도 공부를 하려면 제대로 해야 한다는 생각이 큰 건 사실이다. 간단하게 예를 들어보자 title의 경우 렌더링 시 계속 새로 생성이 된다는 점이 문제가 되는 점 - → 이는 App이 함수(fucntion) 형태이고 - → title의 값이 지역 변수(local v..