클라이밍하는 개발자

React 개발을 하다 보면 함수형 컴포넌트라는 이름 때문에 객체지향 개념과는 거리가 멀다고 생각하기 쉽습니다. 하지만 컴포넌트를 설계하고 조립하는 과정에서 객체지향의 철학을 적용하면, 요구사항이 시시각각 변하는 프론트엔드 환경에서도 흔들리지 않는 견고한 코드를 만들 수 있습니다. 1. 객체지향의 3대장: 역할, 책임, 협력객체지향을 아주 쉽게 이해하기 위해 동네 카페를 상상해 보겠습니다. 카페가 원활하게 돌아가려면 손님, 키오스크, 바리스타라는 세 명의 등장인물이 필요합니다.역할: 특정 상황에서 객체가 맡은 임무입니다. (손님, 키오스크, 바리스타)책임: 역할을 다하기 위해 해야 하는 행동입니다. (커피 주문하기, 주문 접수하기, 커피 제조하기)협력: 서로 메시지를 주고받으며 카페라는 시스템을 굴러가게..

Recharts를 쓰다 보면 이런 에러를 본 적 있을 겁니다:The width(-1) and height(-1) of chart should be greater than 0...처음엔 단순히 CSS 문제 같아 보이지만, 사실은 타이밍 이슈에서 비롯된 오류입니다. 이번 글에서는 이 문제의 원인과 해결 과정을 코드와 함께 정리해보겠습니다.1. 수정 전: 라이브러리 자동 측정 방식 (에러 발생)기존에는 Recharts에서 제공하는 ResponsiveContainer에 모든 걸 맡겼습니다.// ❌ 수정 전: 타이밍 이슈로 width/height가 -1이 됨 {/* 차트 내용 */} 문제점ResponsiveContainer는 렌더링되자마자 부모 의 크기..

🔑 React에서 index를 key로 쓰면 안 되는 이유🤔 key가 왜 필요한 거죠?React는 마치 학급 출석부를 관리하는 선생님 같아요! 👩‍🏫 학생들이 자리를 바꿔 앉으면, 선생님은 "누가 누구인지" 구분해야 하잖아요?React도 똑같아요. 리스트가 변경될 때마다 "어떤 요소가 어떤 요소인지" 추적해야 해서 key를 사용해요!😱 index를 key로 쓰면 생기는 문제들1. 🎭 신원 혼동 사건학급에서 번호순으로 앉아있다가, 1번 학생이 전학을 간다고 상상해보세요변경 전1번: 김철수 ✏️ (연필로 그림 그리는 중)2번: 이영희 📝 (일기 쓰는 중)3번: 박민수 🎮 (게임 생각하는 중)1번이 전학 간 후1번: 이영희 📝 (아직 일기 쓰는 중인데...)2번: 박민수 🎮 (게임 생각하는 ..

🚨 useState를 조건문에서 쓰면 안 되는 이유 (React Hooks 규칙)🤔 왜 이런 규칙이 있을까?React의 useState는 마치 은행 창구 번호표 시스템과 같아요! 📋은행에 가면 번호표를 뽑잖아요? 1번, 2번, 3번... 순서대로 말이죠. React도 마찬가지로 컴포넌트 안에서 useState를 호출할 때마다 내부적으로 "1번 state, 2번 state, 3번 state..." 이런 식으로 순서를 기억해둬요.🎭 조건문 안에서 useState를 쓰면 벌어지는 일만약 조건문 안에서 useState를 쓴다면?첫 번째 렌더링 🎬조건이 true → useState 호출됨 → React: "아, 1번 state네!"두 번째 렌더링 🎬조건이 false → useState 호출 안됨 → R..

🏗️ React만으로는 왜 힘들까?집을 짓는다고 생각해보세요 🏠순수 React는 벽돌과 시멘트만 주는 거예요. 집을 지으려면 기초 공사부터 전기, 수도까지 모든 걸 직접 해야 하죠. 반면 Next.js는 이미 기본 인프라가 갖춰진 아파트 같은 느낌이에요!React로 프로젝트 시작할 때 😵웹팩 설정 → "bundle이 뭐야...?"라우터 설치 → "React Router vs Reach Router?"SEO 최적화 → "메타태그를 어디에...?"성능 최적화 → "코드 스플리팅이 뭐지?"✨ Next.js가 해결해주는 것들1️⃣ 파일 기반 라우팅: 폴더 = 페이지카페 메뉴판 만들기로 비유하면 ☕pages/menu.js → /menu 페이지 자동 생성pages/about/team.js → /about/te..

리액트의 props와 state에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. props는 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다.function ChildComponent(props) { props.name = "New Name"; // 오류 발생 가능 return {props.name};}이를 통해 컴포넌트 간의 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다. state는 컴포넌트 내부에서 관리되는 데이터입니다. state는 동적으로 변경될 수 있으며, 컴포넌트의 렌더링에 영향을 미칩니다. state를 변경하면 컴포넌트는 다시 렌더링되며, UI가 업데이트됩니다. state는 주로..

useRef가 뭔가요? 🤔useRef는 React의 훅 중 하나로, 값을 저장하는 상자 같은 역할을 해요!하지만 useState와는 다르게 값이 바뀌어도 컴포넌트가 다시 렌더링되지 않아요 🎪마치 메모장과 화이트보드의 차이라고 생각하면 돼요useState = 화이트보드 📋: 내용이 바뀌면 모든 사람이 봐야 함 (리렌더링)useRef = 개인 메모장 📝: 내용이 바뀌어도 다른 사람은 몰라도 됨 (리렌더링 없음) useRef 사용 시나리오 2가지 🎭1. DOM 요소에 접근할 때 👆실생활 예시: 로그인 페이지에서 아이디 입력창에 자동으로 커서가 깜빡이게 하고 싶을 때!const LoginPage = () => { const inputRef = useRef(null); useEffect(() => ..

React에서 로딩 상태 관리하기: useEffect vs Suspense 비교 🚀useEffect로 로딩 상태 관리하기 ⚙️전통적인 방식으로, 컴포넌트가 마운트된 후 데이터를 가져오고 로딩 상태를 수동으로 관리합니다.function DataCenter({ id }) { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { setIsLoading(true); try { const response =..

리액트 동시성 모드란? 🤔리액트 동시성 모드는 마치 여러 손님이 동시에 주문하는 카페에서 바리스타가 긴급한 주문(중요 UI 작업)을 먼저 처리하는 것과 같습니다! 🏃‍♂️💨이전 리액트는 단일 스택 구조로 작업했어요. 즉, 한 번 렌더링을 시작하면 모든 작업을 끝까지 완료해야만 했습니다. 마치 하나의 커피를 완성할 때까지 다른 모든 주문을 기다리게 하는 것과 같죠. ☕️⏳하지만 동시성 모드에서는작업을 중간에 멈출 수 있음 ⏸️더 중요한 작업이 들어오면 우선순위 변경 가능 🔄사용자 경험을 방해하지 않고 백그라운드에서 작업 처리 🔍 동시성 모드의 핵심 기능들 🛠️1. startTransition 🚦특정 상태 업데이트를 '덜 중요한 작업'으로 표시할 수 있습니다.import { startTransi..

Zustand: 간단하고 강력한 상태 관리 라이브러리 🐻Zustand는 React에서 사용하기 쉬운 상태 관리 라이브러리입니다. Redux의 복잡성 없이 단순하면서도 강력한 기능을 제공합니다.1. create 함수 (콜백 set, get) 🛠️Zustand의 핵심은 create 함수로, 상태와 그 상태를 변경하는 액션을 정의합니다.import { create } from 'zustand';interface BearState { bears: number; increasePopulation: () => void;}const useBearStore = create((set, get) => ({ bears: 0, increasePopulation: () => set({ bears: get().bear..