🔍 Control Props 패턴이란?이전 글에서 Compound Component 패턴에 대해 알아봤다.컴파운드 컴포넌트 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이었다. Control Props 패턴은 컴포넌트가 자체 상태를 가질 수도 있고, 부모가 상태를 제어할 수도 있게 만드는 패턴이다.input, select, modal, toggle 등 상태를 외부에서 완전히 제어할 수 있게 해야 하는 컴포넌트에서 사용된다. 🧩 예제 코드이전 글에서 활용한 예제 코드를 수정하여 실습해 보자.Toggle.tsximport { createContext, useContext, useState, ReactNode } from 'react';type ToggleContextType ..

🔍 Compound Component 패턴이란?Compound Component(컴파운드 컴포넌트) 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이다.부모가 Context를 제공하고, 자식 컴포넌트들이 props 없이 그 상태를 자유롭게 사용할 수 있다.이 패턴은 Select, Accordion, Tabs, Modal Step Form과 같은 UI를 구성할 때 자주 사용된다.Toggle 예제를 통해 이 패턴을 이해하고, Context의 역할을 알아보자. 🔍 Context란?Context는 여러 컴포넌트들이 데이터를 공유할 수 있도록 도와주는 기능이다.React에서는 일반적으로 부모 컴포넌트에서 자식으로 데이터를 props를 통해 넘긴다.하지만 컴포넌트 깊이가 깊어질수록 이..

리스트가 길어질수록 모든 항목을 한 번에 렌더링하면 성능 문제가 발생한다.특히 1,000개 이상의 데이터를 렌더링할 때 브라우저가 느려지고 사용자 경험이 저하된다.이를 해결하는 기술이 Virtual Scroll(가상 스크롤)이다. 🔎 가상 스크롤(Virtual Scroll)이란?가상 스크롤(Virtual Scroll)은 긴 리스트나 테이블에서 화면에 보이는 항목만 렌더링하고 나머지 항목은 렌더링하지 않는 기법이다.사용자가 스크롤할 때마다 보여줄 항목만 동적으로 추가한다.렌더링 비용과 메모리 사용량을 크게 줄일 수 있다.항목 수가 많아도 초기 렌더링 속도를 빠르게 유지하고 스크롤 성능을 높이는 것이다.💡 예: 카카오톡, 인스타그램, 유튜브 피드 → 수천~수만 개 항목이 있지만 느려지지 않는다. 🧩 ..

부모와 자식 컴포넌트 간의 렌더링 최적화와 계산 최적화가 어떻게 작동하는지 실험해보려고 한다.부모 컴포넌트가 리렌더링될 때 자식 컴포넌트가 리렌더링 되는지 확인하고 useMemo와 React.memo가 각각 최적화에 어떻게 작동하는지 알아보자. 🧩 예제 코드ParentWithMemoinput과 count 상태를 관리input 값으로 무거운 계산 실행계산 결과(calculatedValue)를 자식 컴포넌트에 넘긴다import { useMemo, useState } from 'react';import MemoizedChild from './MemoizedChild';const heavyCalculation = (num: number) => { console.log('💥 무거운 계산 실행'); let ..

React를 사용하다 보면 컴포넌트가 리렌더링될 때마다 불필요하게 무거운 계산이 반복 실행되어 앱 성능이 저하되는 경우가 많다.이 문제를 해결하기 위한 최적화 기법 중 하나가 useMemo이다.useMemo와 일반 계산을 비교하는 예제를 통해 언제 useMemo가 필요한지 알아보자. 🧩 예제 코드import { useMemo, useState } from 'react';const heavyCalculation = (num: number) => { console.log('💥 무거운 계산 실행'); let result = 0; for (let i = 0; i { const [count, setCount] = useState(0); const [input, setInput] = useState..

컴포넌트에서 자식에게 함수를 props로 넘길 때, 그 함수가 일반 함수인지 useCallback으로 감싼 함수인지에 따라 자식 컴포넌트의 렌더링 여부가 달라진다. 🎯 실험 목표 부모 컴포넌트에서 자식에게 함수를 전달할 때, 일반 함수를 전달했을 때와 useCallback으로 메모이제이션한 함수를 전달했을 때를 비교하고자 예제 코드를 준비했다.어떤 경우에 자식 컴포넌트가 불필요하게 렌더링되는지 확인해 보자. 🧩 예제 코드ChildRaw: 일반 함수를 props로 받는 자식ChildMemo: useCallback 함수를 props로 받는 자식 👉 두 자식 모두 React.memo로 감싸져 있음import { memo, useCallback, useState } from 'react';const Chi..

🔨 마운트 (mount)컴포넌트가 처음 화면에 나타나는 시점JSX로 만든 컴포넌트가 실제 DOM에 "붙는" 순간초기화 작업(데이터 불러오기, 이벤트 리스너 등록 등)을 주로 이 시점에 처리useEffect(() => { ... }, [])의 본문이 실행되는 타이밍 🧩 예시{isVisible && }isVisible가 true가 되는 순간 → MyComponent가 마운트됨 🧹 언마운트 (unmount)컴포넌트가 화면에서 사라지는 시점React가 필요 없어진 컴포넌트를 DOM에서 제거하는 시점useEffect의 cleanup 함수가 실행되는 타이밍 (타이머 제거, 이벤트 해제 등)useEffec의 return 함수가 이 시점에 실행됩 🧩 예시{isVisible && }isVisible가 false..

서브넷팅이란 하나의 큰 네트워크를 여러 개의 작은 네트워크(서브넷)로 나누는 작업이다.네트워크를 효율적으로 관리하고, IP 자원을 절약하기 위해 사용한다. 서브넷팅 계산은 호스트 범위, 네트워크 주소, 브로드캐스트 주소, CIDR, 호스트 수 등을 구하게 된다.정석적인 계산법은 처음 보면 머리가 아프다..진짜 쉽게 계산하는 법을 알게 되어서 글로 정리해 본다. [1] 네트워크 주소, 브로드캐스트 주소, 유효 호스트 범위네트워크 주소: IP가 속한 서브넷의 시작 주소브로드캐스트 주소: 서브넷 안에 있는 모든 호스트에게 한 번에 데이터를 보내기 위한 마지막 IP 주소유효 호스트 범위: 유효하게 쓸 수 있는 IP 주소 범위 (네트워크 주소 +1 ~ 브로드캐스트 주소 -1) 🧮 계산법255.255.255.25..