어제 오늘 내일

1. 들어가며: 어떤 문제를 해결하는가React에서 서버 데이터를 가져오는 가장 흔한 방법은 useEffect와 useState를 조합하는 것입니다.function TodoList() { const [todos, setTodos] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { setLoading(true) fetch('/api/todos') .then((res) => res.json()) .then((data) => setTodos(data)) .catch((err) => setError(err)..

1. 들어가며: 어떤 문제를 해결하는가React에서 여러 컴포넌트가 같은 상태를 공유해야 할 때, 가장 먼저 마주치는 선택지는 useState를 최상위 컴포넌트로 끌어올리고 props로 내려주는 방식입니다. 하지만 컴포넌트 트리가 깊어지면 중간 컴포넌트들이 사용하지도 않는 props를 계속 전달만 하는 props drilling 문제가 생깁니다.Context API로 이 문제를 해결할 수도 있지만, Context는 값이 하나라도 바뀌면 그 Context를 구독하는 모든 컴포넌트가 리렌더링된다는 한계가 있습니다. Redux는 이런 문제를 정교하게 해결하지만, 그 대가로 action, reducer, dispatch 같은 보일러플레이트 코드가 많이 필요합니다.Zustand는 이 사이 어딘가에 있는 선택지입니..

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가 렌더링될 때마다 새로 만들어짐 // 내용은 똑같지만, 자..

React를 처음 배울 때 가장 먼저 마주치는 낯선 문법이 바로 JSX입니다. 자바스크립트 안에 HTML 같은 코드가 섞여 있는 모습을 보고 당황하기 쉽죠. 이 글에서는 JSX가 무엇인지, 어떤 규칙을 지켜야 하는지 기초부터 차근차근 알아보겠습니다.JSX란?JSX는 JavaScript XML의 줄임말로, 자바스크립트 안에서 HTML과 비슷한 문법으로 UI를 표현할 수 있게 해주는 문법 확장입니다.// 이것이 바로 JSXconst element = 안녕하세요, React!;한 줄로 정리하면, JSX는 "자바스크립트 코드 안에 마크업을 자연스럽게 작성하는 방법"입니다. 브라우저는 JSX를 직접 이해하지 못하기 때문에, Babel 같은 도구가 JSX를 일반 자바스크립트로 변환해줍니다.// 우리가 작성하는 JS..

React 애플리케이션이 커지다 보면 렌더링 성능이 신경 쓰이기 시작합니다. 특히 무거운 계산이 매 렌더링마다 반복되면 앱이 느려질 수 있죠. 이럴 때 사용하는 것이 바로 useMemo Hook입니다. 이 글에서는 useMemo가 무엇인지, 언제 쓰고 언제 쓰지 말아야 하는지 예제와 함께 알아보겠습니다.메모이제이션이란?useMemo를 이해하려면 먼저 메모이제이션(Memoization) 개념을 알아야 합니다. 메모이제이션은 이미 계산한 결과를 저장해 두었다가, 같은 입력이 들어오면 다시 계산하지 않고 저장된 값을 재사용하는 최적화 기법입니다.쉽게 말해, "한 번 계산한 건 기억해뒀다가 그대로 꺼내 쓰자"는 아이디어입니다.문제 상황: 매 렌더링마다 반복되는 무거운 계산먼저 useMemo가 없을 때 어떤 문제..

React로 애플리케이션을 개발하다 보면 여러 컴포넌트가 같은 데이터를 필요로 하는 상황을 자주 마주치게 됩니다. 이럴 때 사용하는 것이 바로 Context API입니다. 이 글에서는 Context API가 왜 필요한지, 어떻게 사용하는지, 그리고 언제 사용해야 하는지 알아보겠습니다.Props Drilling 문제React는 기본적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달합니다. 하지만 컴포넌트 트리가 깊어지면 문제가 생깁니다.function App() { const user = { name: "홍길동", theme: "dark" }; // App에서 만든 user 데이터를 Layout에 props로 전달 return ;}function Layout({ user }) {..