react.js (2) 썸네일형 리스트형 Next.js Static Rendering(정적 렌더링)과 Dynamic Rendering(동적 렌더링) Next.js 13 이상에서는 App Router를 도입하며 정적 렌더링(Static Rendering)과 동적 렌더링(Dynamic Rendering)을 보다 유연하고 선언적으로 사용할 수 있게 되었습니다. 아래는 App Router에서 각각의 렌더링 방식을 구현하는 예시입니다.1. Static Rendering (정적 렌더링)정적 렌더링은 빌드 시점에 페이지를 생성하여 클라이언트 요청 시 미리 준비된 HTML을 제공하는 방식입니다. App Router에서 정적 렌더링은 기본 설정이며, 데이터를 가져오지 않거나 fetch를 사용하여 빌드 타임에 데이터를 가져옵니다.구현 예시async function fetchPost(id) { const res = await fetch(`https://api.exam.. React Hook Memoization(메모이제이션) useCallback/useMemo React에서는 컴포넌트의 state 또는 부모에게서 받은 props 값이 변경될 때 마다 리렌더링합니다. 그리고 리렌더링될 때마다 컴포넌트의 변수와 함수들이 매번 재생성됩니다. 때문에 반복적이고 쓸데없는 리렌더링은 성능에 영향을 줍니다. 예시로 부모에게서 props로 {a, b}를 넘겨받았다면 props.a만 변경되어도 props.b관련 함수,변수도 다시 호출하여 실행합니다. 이런 불필요한 동작을 피하고자 메모이제이션을 적용한 useCallback 와 useMemo함수를 사용합니다. useCallback uesCallback은 메모이제이션된 콜백을 반환합니다. useCallback(fn, deps)와 같이 사용합니다. fn: 메모이제이션할 콜백 함수 deps: 콜백의 의존성 배열, 콜백의 의존성 배열이.. 이전 1 다음