어제 오늘 내일

1. 들어가며: 어떤 문제를 해결하는가React 컴포넌트를 만들다 보면 props나 state 값에 따라 className을 다르게 줘야 하는 경우가 정말 많습니다. 처음에는 템플릿 리터럴이나 삼항 연산자로 충분해 보이지만, 조건이 두세 개만 넘어가도 코드가 금방 지저분해집니다.// 조건이 늘어날수록 읽기 힘들어지는 예function Button({ variant, disabled, fullWidth }) { return ( 버튼 )}문자열 연결 사이에 공백을 빠뜨리거나, 조건이 false일 때 빈 문자열을 제대로 처리하는지 신경 쓰다 보면 정작 스타일 로직보다 문자열 조립에 더 많은 신경을 쓰게 됩니다. clsx는 바로 이 문제를 해결하기 위한, 아주 작지만 실용적인 유틸리티..

1. 들어가며: 어떤 문제를 해결하는가Tailwind CSS로 컴포넌트를 만들다 보면 이런 상황을 자주 마주칩니다.function Box({ className }) { return 내용}// 사용하는 쪽에서 padding을 다르게 주고 싶어서이렇게 문자열을 단순히 이어 붙이면 최종 className은 p-4 bg-white rounded-lg p-8이 됩니다. 문제는 CSS에서 p-4와 p-8이 같은 우선순위를 가진 클래스라서, 어떤 게 이길지는 CSS가 실제로 로드되는 순서에 달려있다는 점입니다. Tailwind가 빌드 시 클래스를 어떤 순서로 정렬하느냐에 따라 p-4가 이길 수도, p-8이 이길 수도 있어서 예측이 어렵고 버그로 이어지기 쉽습니다.tailwind-merge는 바로 이 문제, 즉 같은..

1. 들어가며Tailwind CSS란 무엇인가Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합해서 스타일을 만드는 utility-first CSS 프레임워크입니다. Bootstrap처럼 완성된 컴포넌트(버튼, 카드 등)를 제공하는 대신, flex, p-4, text-center, bg-blue-500 같은 작은 단위의 클래스를 조합해서 원하는 디자인을 직접 만들어가는 방식이에요. 버튼별도의 CSS 파일을 오가지 않고 마크업 안에서 스타일을 완결할 수 있다는 게 가장 큰 특징입니다.왜 React와 함께 많이 쓰이는가React는 컴포넌트 단위로 UI를 쪼개서 개발합니다. 이때 CSS도 컴포넌트 단위로 캡슐화되어야 관리가 편한데, Tailwind는 클래스 자체가 컴포넌트의 스타일 명세서 역할을 하..

useState를 쓰다 보면 상태가 점점 복잡해지는 순간이 옵니다. 상태 값이 여러 개로 늘어나고, 상태를 바꾸는 로직이 컴포넌트 곳곳에 흩어지기 시작하죠. 이럴 때 상태 관리를 한곳으로 모아 체계적으로 다룰 수 있게 해주는 것이 바로 useReducer Hook입니다. 이 글에서는 useReducer가 무엇인지, useState와 어떻게 다른지, 언제 쓰면 좋은지 알아보겠습니다.useReducer란?useReducer는 상태 업데이트 로직을 컴포넌트 바깥으로 분리해서 관리할 수 있게 해주는 Hook입니다. Redux를 써본 적이 있다면 익숙할 텐데, 사실 useReducer는 Redux의 핵심 개념을 React 내장 기능으로 가져온 것입니다.핵심 등장인물은 세 가지입니다.state: 현재 상태 값dis..

이전 글에서 "useCallback은 useMemo로 함수를 감싼 것과 같다"고 잠깐 언급했었죠. 이번 글에서는 그 이야기를 이어서 useCallback을 자세히 다뤄보겠습니다. useCallback은 함수를 메모이제이션하는 Hook으로, React.memo와 함께 쓰일 때 진가를 발휘합니다. 이 글에서는 useCallback이 왜 필요한지, 언제 써야 하는지 예제와 함께 알아보겠습니다.문제의 시작: 함수는 매번 새로 만들어진다먼저 자바스크립트의 기본 성질부터 짚고 가야 합니다. 함수도 객체이기 때문에, 컴포넌트가 렌더링될 때마다 함수는 매번 새로 생성됩니다.function Parent() { // 이 handleClick 함수는 Parent가 렌더링될 때마다 새로 만들어짐 // 내용은 똑같지만, 자..