프로젝트에서 게시판 목록을 불러오는 기능을 구현하면서 무한 스크롤(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..

CSS(Cascading Style Sheets)는 웹 페이지의 디자인을 담당하는 중요한 기술입니다.웹 페이지의 요소들을 어떻게 스타일링할 것인지를 정의할 때, 선택자(Selector)를 사용하여 특정 HTML 요소를 선택하고 스타일을 적용합니다. 이 포스트에서는 CSS 선택자에 대해 자세히 알아보겠습니다.1. CSS 선택자란 무엇인가?선택자는 CSS에서 스타일을 적용할 요소를 지정하는 역할을 합니다. 선택자를 통해 HTML 문서 내에서 어떤 요소에 스타일을 적용할지를 정의합니다.CSS 기본 구조선택자 { 스타일속성: 스타일값;}선택자: 스타일을 적용할 HTML 요소를 지정합니다.스타일속성: 적용할 스타일 속성 (예: color, font-size, margin 등)스타일값: 속성에 적용할 값 (예: ..