React useState로 상태 관리 완전 정복
리액트(React)를 활용해 동적인 웹 애플리케이션을 만들 때 가장 처음 마주하는 벽이 있습니다. 바로 사용자의 클릭이나 입력에 따라 화면이 실시간으로 변하게 만드는 일입니다. 자바스크립트에서는 변수의 값을 바꾸고 화면의 DOM을 직접 수정했지만, 리...
전체 글
useEffect 동작 원리와 의존성 배열 이해하기
리액트(React)로 웹 서비스를 개발할 때 가장 자주 마주치며, 동시에 초보 개발자를 가장 많이 혼란에 빠뜨리는 개념 중 하나가 바로 useEffect입니다. 화면이 그려지는 과정과 상관없이 외부 데이터를 가져오거나 브라우저 타이머를 설정하는 등, ...
React 기초 프로젝트: Todo List 완전 구현
React Todo List의 구조와 상태(State) 설계하기 웹 개발 공부를 시작할 때 누구나 한 번은 거쳐 가는 고전적인 프로젝트가 있습니다. 바로 투두 리스트(Todo List) 만들기입니다. 단순해 보이지만 React Todo List 는 컴...
React 개발자를 위한 TypeScript 기초
리액트(React)를 사용해 컴포넌트를 설계하다 보면, 어느 순간 "이 Props에는 어떤 값이 들어와야 하더라?" 하는 의문이 생기곤 합니다. 자바스크립트는 매우 유연하지만, 이 유연함이 때로는 런타임 에러라는 부메랑이 되어 돌아옵...
TSX로 React 다시 배우기: Props 타입 정의 패턴
리액트(React)를 사용해 컴포넌트를 만들 때, 컴포넌트 간에 데이터를 전달하는 'Props'는 핵심적인 역할을 합니다. 과거 자바스크립트 환경에서는 이 Props에 어떤 값이 들어오는지 명확히 알기 어려워 런타임 에러를 마주하는 일이...
커스텀 훅과 제네릭으로 재사용 가능한 로직 만들기
웹 애플리케이션을 개발하다 보면 여러 컴포넌트에서 동일한 로직이 반복되는 상황을 자주 마주한다. 예를 들어 데이터를 불러오거나, 폼 입력값을 관리하거나, 화면 크기를 감지하는 기능들은 서비스 곳곳에서 쓰이기 마련이다. 이때 매번 같은 코드를 복사해서 ...