전체 글 (78) 썸네일형 리스트형 [Next.js] 페이지 이동을 위한 Link와 useRouter(), 그리고 form submit 이번에 페이지 이동을 위해 useRouter() 훅을 자연스럽게 사용하다가, 문득 Vite 같은 환경에서 사용하는 useNavigate() 훅과 비슷하게 쓰고 있지는 않은지 생각하게 되었다. Link 와 같은 방식도 존재하는데 과연 useRouter()를 사용하는 방식이 최선인가에 대한 고민을 하게 되었다. 고민하게 된 이유는 다음과 같다.단순히 페이지 이동을 위한 버튼 하나 때문에 클라이언트 컴포넌트로 선언해야 하는가?클라이언트 컴포넌트로 선언함에는 DOM 조작이나 api, 혹은 react 훅을 사용한 상태 관리, 이벤트 처리 등이 근거가 되어야 하는데, 단순히 “로그인하기”와 같은 페이지 링크 버튼은 어떤 조건에도 부합하지 않음.즉, 어떤 근거도 없이 페이지 이동 = useRouter()로 착각하며.. [React] 가상화, react-virtualized 가상화란 다수의 항목을 화면에 보이는 요소만 렌더링하고 그 외에는 렌더링 하지 않는 기술이다. 예를 들어, 2500개의 리스트 항목이 있을 때, 2500개의 항목에 대해 브라우저다 전부 DOM으로 만들어 렌더링 하려면 렌더링 시간이 오래 걸리게 된다. 이를 해결하기 위해 가상화를 사용하는데, 사용자가 현재 보고 있는 화면의 영역(뷰포트)의 항목만 렌더링하고 스크롤 시에 보이는 항목만 동적으로 추가/제거한다. 설치&사용npm install react-virtualizedyarn add react-virtualized 위의 명령어를 통해 react-virtualized를 설치해준다. 기본적으로 List , Table , Grid 등의 컴포넌트가 제공된다. ( Item #{index} .. [React] 메모이제이션 / useMemo(), useCallback(), React.memo에 대하여 React의 메모이제이션은 성능 최적화를 위한 개념이다.결과나 함수 등을 캐싱하여 동일한 입력에 대해 이전 결과를 재사용하는 방식으로 특히 계산 비용이 높은 작업을 반복하지 않기 위해서 사용한다.React의 메모이제이션 도구React.memo컴포넌트 자체를 메모이제이션해 전달받는 props가 변하지 않으면 리렌더링 방지const ListComponent = ({ value }) => { return {value};}export default React.memo(ListComponent);props를 기준으로 리렌더링 여부를 결정하므로 props가 변경되지 않으면 리렌더링 되지 않음.다만, shallow comparison으로 props를 비교하므로 몇가지 주의할 점이 있다.배열의 인덱스가 순차일 경우: .. 이전 1 2 3 4 5 6 ··· 26 다음
