dev.daisy

처음에는 단순히 값을 저장하는 용도로만 생각했지만, useState가 선언적(Declarative) UI 업데이트를 위한 도구라면, useRef는 명령형(Imperative) 작업을 위한 도구라는 것을 제대로 공부하게 되었습니다. useRef에 저장된 값은 컴포넌트가 수십 번 리렌더링되어도 초기화되지 않고 유지되지만, 값이 변경되어도 useState처럼 불필요한 리렌더링을 유발하지 않는 덕분에 타이머 ID, API 응답 캐싱, 또는 이전 상태(Previous State) 값을 추적하는 등 UI와 무관하게 데이터의 지속성이 필요한 경우에 useRef가 성능 최적화의 핵심적인 방법이 된다는 것을 배웠습니다. 덕분에 useRef가 React의 선언적 모델을 보완하고 클린 코드를 작성하는 데 필수적인 Hook임..

리액트를 배우면서 당연하게 함수형 컴포넌트를 접했지만, 클래스형 컴포넌트의 복잡성과 유지보수 문제를 해결하기 위해 함수형 컴포넌트가 탄생했다는 배경을 이해하게 되어 의미 있는 시간이었습니다. 단순히 기술을 사용하는 것을 넘어, '왜 이 기술이 필요했는가?'에 대한 근본적인 질문에 답을 찾은 것 같아 매우 좋았습니다. 특히, this 바인딩 문제나 복잡한 생명주기 메서드 같은 클래스형 컴포넌트의 단점들을 함수형 컴포넌트가 Hooks라는 간결한 도구로 해결했다는 점이 가장 인상 깊었습니다.1. 함수형 컴포넌트란? (Function Component)함수형 컴포넌트는 이름 그대로 자바스크립트 함수로 작성하는 리액트 컴포넌트입니다. props를 인자로 받아 JSX를 반환하는 구조로, Hooks를 통해 상태(st..

처음에는 Hooks를 그저 함수형 컴포넌트에서 useState와 useEffect를 쓸 수 있게 해주는 '도구' 정도로만 생각했습니다. 하지만 이번에 Hooks가 클래스 컴포넌트의 근본적인 문제점을 해결하기 위해 탄생했다는 것을 알고 React를 바라보는 시각이 바뀌었습니다.Hooks를 통해 얻은 가장 큰 깨달음은 컴포넌트의 역할 분리입니다. 과거에는 하나의 컴포넌트 안에 UI, 상태, 그리고 부수 효과(side effects) 로직이 모두 섞여 있었지만, 이제는 UI는 컴포넌트에, 상태 로직은 커스텀 훅에 분리하여 훨씬 깔끔하고 읽기 쉬운 코드를 작성할 수 있게 되었습니다.이번 학습을 통해, 단순히 기능을 구현하는 것을 넘어 코드의 구조와 재사용성까지 고민하는 것이 얼마나 중요한지 깨달았습니다. 이제는..

React를 처음 공부할 때 Virtual DOM을 그 자체로 독립된 개념처럼 생각했고, React 엘리먼트는 단순히 JSX 문법이 변환된 결과물 정도로만 생각했습니다. 하지만 두 개념이 사실은 하나의 시스템을 구성하는 퍼즐 조각이라는 것을 깨닫고 막연했던 개념에서 명확한 원리로 이해할 수 있었습니다.서로 따로 놀던 두 개념이 하나의 유기적인 시스템으로 연결되는 것을 이해하고 React의 동작 원리가 보이기 시작했습니다. 앞으로 코드를 짤 때 단순히 결과물만을 생각하는 것이 아니라, 그 뒤에 숨겨진 구조와 효율성까지 고려하는 개발자가 되어야하겠다고 다짐하는 계기가 되었습니다 :) React는 Virtual DOM을 통해 효율적으로 UI를 업데이트합니다. 이 가상적인 개념은 실제 DOM을 직접 조작하는 것..

실제 프로젝트를 진행하면서 기능 구현 자체보다 렌더링 구조와 성능 최적화가 훨씬 중요하다는 점을 체감했습니다. 특히 React 렌더링 파이프라인을 이해하면서, 렌더링은 컴포넌트 호출을 통한 계산, 커밋은 실제 DOM 변경이라는 분리가 얼마나 중요한지 알게 되었습니다.처음에는 “React가 알아서 최적화해주겠지”라는 믿음이 있었지만, 불필요한 렌더링이 누적되면서 계산 비용, 메모리 사용량, 페인트 비용으로 이어지는 것을 직접 경험했습니다. 렌더링과 커밋을 구분해 생각하니, 상태 관리와 리렌더링 전략을 더 체계적으로 설계할 수 있었고 성능 문제를 사전에 예측하고 개선할 수 있다는 점이 유익했습니다.이번 경험을 통해, 단순히 동작하는 코드를 만드는 것을 넘어 내부 동작 원리를 이해하고 주도적으로 관리하는 개발..