프로젝트에서 게시판 목록을 불러오는 기능을 구현하면서 무한 스크롤(Infinite Scroll)을 적용했습니다.처음에는 단순히 스크롤 이벤트와 데이터 요청(fetch)을 한 컴포넌트에 모두 넣었는데, 코드가 복잡해지고 유지보수가 어려워졌습니다.이번 글에서는 제가 겪은 시행착오와 개선 과정을 정리해 보았습니다.1. 초기 구현 – 컴포넌트 내부 처리처음에는 게시판 컴포넌트 안에 스크롤 이벤트와 API 호출을 모두 넣었습니다.useEffect(() => { const container = containerRef.current; if (!container) return; const handleScroll = () => { const { scrollTop, scrollHeight, clientHeigh..

React에서 사용자의 입력을 처리할 때 흔히 고민하는 문제가 있습니다. 바로 실시간으로 입력값이 바뀔 때 서버 호출을 최소화할 수 있는가 입니다. 오늘 회사에서 React 입력값 처리 방식에 대해 팀과 의견을 나누는 자리가 있었습니다.제가 예전에 적용했던 “클라이언트 필터링”과 onChange Debounce 전략에 대해 이야기하다가, 잘 모르면서 상사 분들과 동료 직원분들께 아는 척을 한 순간이 있었습니다.사실 정답이 있는 것은 아니지만 , 그때 무심코 제가 잘 모르는 Debounce에 대해 코드만 읽고 단순하게 판단하여 ..지금 생각하면 쥐구멍에라도 숨고 싶은 심정이지만… 이미 엎어진 물은 돌이킬 수 없으니 ㅠ이 글에서는 당시 제가 고민했던 문제와, 입력값 변화 시 서버 호출을 최소화하는 여러 전략..

1️⃣ useState – 상태 관리용도: input, select, checkbox 등 값을 저장하고 변경특징: 값이 바뀌면 컴포넌트 리렌더링import { useState } from "react";export default function ExampleUseState() { const [formData, setFormData] = useState({}); // 초기값 없이 빈 객체 가능 const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault..

💡 JSX(TSX)란?JSX는 JavaScript를 확장한 문법(JavaScript XML)입니다. 쉽게 말해, JavaScript 파일 안에서 HTML과 비슷한 코드를 작성할 수 있게 해주는 특별한 문법이죠. 우리가 보기엔 HTML 같지만, 사실 이 코드는 브라우저가 읽기 전에 바벨(Babel)이라는 도구를 통해 순수한 JavaScript 객체로 변환됩니다.TSX도 JSX의 문법을 따릅니다.React는 UI를 만들기 위한 라이브러리입니다.JSX는 React에서 UI를 더 쉽고 직관적으로 표현하기 위해 사용하는 문법입니다.예를 들어, 우리가 이렇게 JSX를 작성하면:const element = 안녕하세요, 리액트!;바벨은 이 코드를 아래와 같은 순수 JavaScript 코드로 바꿔줍니다.const el..