React (20) 썸네일형 리스트형 [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를 비교하므로 몇가지 주의할 점이 있다.배열의 인덱스가 순차일 경우: .. [NextJS] 서버 컴포넌트와 클라이언트 컴포넌트 NextJS 13버전부터는 서버 컴포넌트와 클라이언트 컴포넌트 두 가지 개념을 통해 렌더링 방식을 규정했다.일단 기본적으로 서버 컴포넌트와 클라이언트 컴포넌트가 무엇인지 이해해보자.server component서버 컴포넌트는 서버에서만 실행되고 렌더링 되는 React의 컴포넌트이다.여기서 말하는 서버 는 애플리케이션이 실행되는 NodeJS 등의 런타임 환경을 의미한다. 서버 컴포넌트는 애플리케이션의 일부 UI를 서버에서 처리하고 완성된 HTML을 브라우저에 전달해준다. 이 방식 덕분에 브라우저에서는 별도의 자바스크립트 실행 없이 즉시 화면을 볼 수 있으며, 서버 측에서 데이터 패칭 및 비즈니스 로직이 모두 처리된 상태의 최종 결과물만 전송된다는 점이 특징이다. 이를 통해 다음과 같은 장점이 있다:번들 크.. [React] Zustand 지난 Recoil에 이어 React의 전역 상태 관리 도구 중 하나인 Zustand에 대해서 알아보자. https://memo-code.tistory.com/68 [React] Recoil지난 Context-API에 이어, props drilling을 해결하기 위한 React의 전역 상태 관리 도구 중 하나인 Recoil에 대해서 알아보자. [https://memo-code.tistory.com/67 [React] Context-APIReact를 사용하다보면, 값을 전역적으memo-code.tistory.com Zustand? Zustand는 전역 상태 관리를 돕는 React의 라이브러리이다. Zustand는 낮은 러닝커브를 가지고 있기에 간단하게 이해와 적용이 가능하고, 가볍다는 장점이 있기 때문에.. [React] Tailwind CSS Tailwind CSSTailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다.기존의 css 스타일링 방식과 달리, 미리 정의된 작은 클래스들을 조합하여서 스타일할 수 있다는 점이 특징이다.이 특징만으로 Tailwind를 사용하게되면, 빠른 개발 속도와 일관된 디자인이라는 결과를 얻을 수 있다. Install & Settingnpm install -D tailwindcss@3.4.17 postcss autoprefixernpx tailwindcss init 설치 후 생성되는 tailwind.config.js 파일을 다음과 같이 수정해준다.// tailwind.config.jsexport default { content: [ "./index.html", "./src/**/*.. [React] Recoil 지난 Context-API에 이어, props drilling을 해결하기 위한 React의 전역 상태 관리 도구 중 하나인 Recoil에 대해서 알아보자. [https://memo-code.tistory.com/67 [React] Context-APIReact를 사용하다보면, 값을 전역적으로 관리하여야 할 때가 많다. 예를 들어, 테마나 언어 설정 등의 서비스 전반에서 공통적으로 사용되는 데이터 들이 그렇다.부모 자식 간의 관계가 존재하는memo-code.tistory.com Recoil?Recoil은 전역 상태 관리를 돕는 React의 라이브러리이다.Context와 달리 비동기 처리와 코드의 분리도가 높고, 하위 컴포넌트가 모두 리랜더링 되지 않는다는 장점이 있다. Recoil은 기본적으로 Atom과.. [React] Context-API React를 사용하다보면, 값을 전역적으로 관리하여야 할 때가 많다. 예를 들어, 테마나 언어 설정 등의 서비스 전반에서 공통적으로 사용되는 데이터 들이 그렇다.부모 자식 간의 관계가 존재하는 컴포넌트 구조의 리액트 특성 상, 어떤 경우에는 이러한 값이 무의미하게 전달을 위해 거쳐가야하는 컴포넌트도 있을 수 있다. 이러한 상황을 props drilling이라고 하고, 리액트에서는 해결법으로 Context API와 같은 전역 상태 관리 방식을 제안한다. props drilling?전역 상태 관리가 생겨난 배경을 이해하기 위해 props drilling에 대해 간단히 짚어보자.리액트에서는 컴포넌트를 생성하고 이를 이용하여 어플리케이션을 구조적으로 설계하기 때문에, 상태나 값, 함수 등을 자식 컴포넌트에 전달.. [React] React Router 페이지 접근 권한 페이지마다 인증이 필요한 경우, 권한이 필요한 경우 등의 구분이 필요하다. 이를 쉽게 해결해주기 위한 방법이 리액트에서 라우팅을 해줄때 페이지별로 접근 권한을 설정해주는 방법이다. 이 방법을 쉽게 요약하면,권한이 필요한 페이지를 요청하면 → Context등을 이용하여 로그인 인증 정보를 전달받는다 → 전달받은 데이터가 조건에 부합하면 하위 페이지를 랜더링 해준다.의 순으로 진행된다. 일단 평범한 라우터 구성 파일의 일부이다.import React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Login from '.pages/Login';import Home from '.pages/Home';impo.. [React] useContext useContext는 상위 컴포넌트에서 어떠한 데이터를 하위 컴포넌트로 전달하기 위해서 전역 변수 등의 데이터로 사용할 수 있도록 해주는 훅이다.Redux와 유사한 기능을 하는데, 차이점은 상태 관리의 복잡도에 있다.Redux는 복잡하고 거대한 상태를 관리하는데에 용이한 반면, useContext, 즉 Context API는 간단한 데이터(로그인 인증 등)를 상태로 관리한다. 간단히 사용법을 알아보자면,import React, { createContext, useState, useEffect } from 'react';// Context 생성const AuthContext = createContext();const AuthProvider = ({ children }) => { const [isAuth.. 이전 1 2 다음
