Multi Developer SuHo

보호되어 있는 글입니다.

이번에는 리액트에서 메모이제이션 기법중 사용하는 useCallback 훅에 대해 살펴보도록 하겠습니다. 📑목차1. useCallback1-1. useCallback이란?1-2. useCallback 문법1-3. useCallback 사용 예시1-4. useCallback 사용해야하는 이유1-5. useCallback VS useMemo 비교1-6. useCallback 사용하지 않아도 되는 경우서론저번 글에서는 메모이제이션의 개념과 함께 React.memo, useMemo 훅을 살펴보며 컴포넌트 렌더링 성능을 최적화하는 방법을 알아보았습니다. 이번 글에서는 연장선인 함수의 불필요한 재생성을 방지하고 자식 컴포넌트의 리렌더링을 최소화할 수 있는 useCallback 훅에 대해 정리해보겠습니다. 본론1. ..

리액트에서 메모이제이션과 메모이제이션으로 사용되는 훅중 useMemo와 고차컴포넌트에 대해 알아보도록 하겠습니다. 📑목차1. 메모이제이션1-1. 메모이제이션이란?1-2. 왜 메모이제이션이 필요한가?1-3. 렌더링과 불필요 리렌더 개념 정리2. memo2-1. memo 란?2-2. memo 문법3. useMemo3-1. useMemo란?3-2. useMemo 문법3-3. useMemo를 언제사용할까?4. React.memo VS useMemo4-1. 이 둘의 차이점5. HOC5-1. HOC란?5-2. HOC 특징서론현대 React 애플리케이션에서 퍼포먼스 최적화의 핵심은 “불필요한 리렌더를 얼마나 줄이느냐”에 달려 있습니다. 이 글은 그 출발점인 메모이제이션의 개념을 정리하고, React가 얕은 비교와..

안녕하세요~ 저번에는 Redux로 상태관리를 했었습니다. 이번에는 Zustand라는 React 생태계에서 사용하는 상태 관리 라이브러리 입니다. Zustand가 무엇이고 이런 라이브러리를 어떻게 사용하는지 간략하게 살펴보도록 하겠습니다. 목차1. Zustand1-1. Zustand 란?1-2. Redux 등 다른 상태 라이브러리와 차이점2. 왜 Zustnad를 사용할까?2-1. 주요 장점2-2. 가벼운 러닝커브3. 설치 및 기본 사용방법3-1. npm 기준 설치 방법3-2. 간단한 카운터 예제4. Zustand의 핵심 개념4-1. Store 생성4-2. Selector 및 구독서론React로 프로젝트를 하다 보면, 컴포넌트 간 상태 공유가 점점 복잡해지는 순간이 옵니다. 이럴 때 많은 개발자들이 Redu..

Tailwind CSS에 대해 알아보도록 하겠습니다. 기존에는 styled-components 라이브러리로 스타일 구성을 작성했지만, 이번에는 Tailwind CSS가 무엇이고, 왜 사용하는지, 사용방법을 알아보는 과정을 설명드리겠습니다. 목차1. Tailwind CSS1-1. Tailwind CSS란?1-2. Utility-first 접근 방식이란?1-3. Tailwind CSS를 왜 사용할까?1-4. Tailwind CSS의 장단점1-5. Tailwind CSS 설치 방법1-6. 기본 문법과 사용 방법1-7. 반응형 디자인과 Variants 서론 현대 웹 개발에서 디자인과 스타일링은 빠른 제작 속도와 일관성을 동시에 요구합니다. 하지만 기존의 CSS나 CSS 프레임워크는 커스터마이징의 한계, 불필요한..

Next.js 에서 동적 라우팅과 중첩 라우팅에 대해 설명하도록 하겠습니다. 동적 라우팅과 중첩 라우팅이 무엇이고, 이 둘의 차이점과 어떻게 라우팅 처리를 해야하는지 살펴보도록 하겠습니다. 목차1. Next.js 라우팅 시스템 이해하기1-1. app/ 디렉토리 기반 라우팅의 기본 개념1-2. 폴더 구조가 URL 구조를 결정한다는 원리1-3. 정적 라우팅과 파일 이름 기반의 자동 라우팅 방식2. 동적 라우팅 2-1. 동적 라우팅이란?2-2. 사용 방법2-3. 활용 예시3. 중첩 라우팅3-1. 중첩 라우팅이란?3-2. 사용 방법3-3. 활용 예시서론Next.js는 React 기반의 프레임워크 중에서도 가장 빠르고 직관적인 라우팅 시스템을 제공하는데요, 특히 Next.js 13 버전이후, App Router..

Next.js 를 사용하기전 렌더링 구조를 이해해야 사용할 수 있습니다. 서버 컴포넌트와 클라이언트 컴포넌트, 프리렌더링이 무엇이고, 하이드레이션에 대한 개념을 학습해보도록 하겠습니다.목차1. Next.js 13이후 렌더링 방식 개요1-1. 서버 컴포넌트란?1-2. 서버 컴포넌트 용도1-3. 클라이언트 컴포넌트란?1-4. 클라이언트 컴포넌트 용도1-5. 서버와 클라이언트 컴포넌트의 조합2. 프리렌더링(Pre-rendering)2-1. 프리렌더링이란?2-2. 프리렌더링 동작 방식3. 하이드레이션(Hydration)3-1. 하이드레이션이란?3-2. 하이드레이션 흐름서론Next.js는 React 기반의 강력한 프레임워크로, 꾸준히 발전해오고 있습니다. 특히 Next.js 13버전부터 도입된 App Router..