FE/React (9) 썸네일형 리스트형 React 컴포넌트 생명주기 (Lifecycle) React는 컴포넌트 기반 UI 라이브러리이며, 컴포넌트는 생명주기(Lifecycle)를 갖는다. 이 생명주기는 컴포넌트가 생성되고, 업데이트되며, 제거되는 일련의 과정을 의미한다.컴포넌트 생명주기 요약마운트(Mount): 컴포넌트가 생성되어 가상 DOM을 거쳐 실제 DOM에 추가되는 시점업데이트(Update): props 또는 state가 변경되어 다시 렌더링되는 시점언마운트(Unmount): 컴포넌트가 가상 DOM과 실제 DOM 양쪽에서 제거되는 시점 1. 마운트 (Mount)React가 컴포넌트를 처음 렌더링할 때 실행되는 흐름:Lazy initializer (게으른 초기화) – useState(() => ...): 마운트 시 1회만 실행됨Render – 컴포넌트 함수 실행 → JSX 반환 → 가상.. Tailwind CSS vs Styled Components 이번 글에서는 Tailwind CSS와 Styled Components를 사용하면서 느낀 장단점을 정리해본다.1️⃣ CSS 렌더링 방식 차이방식Tailwind CSSStyled Components스타일 적용 방식정적 CSS 파일 (빌드 타임 적용)런타임에 JavaScript가 스타일 생성브라우저 성능 영향미리 컴파일된 CSS를 사용하여 빠름실행 중 스타일을 생성해야 하므로 성능 저하 발생🔹 Tailwind CSS: 빌드 시 필요한 클래스만 포함하여 최적화된 CSS 파일을 생성(PurgeCSS 적용). 덕분에 실제 배포 환경에서는 매우 작은 CSS 파일이 만들어져 페이지 로딩 속도가 빨라진다.🔹 Styled Components: JavaScript 실행 후 스타일을 생성하고, DOM에 스타일 태그를 주.. useState가 의도대로 동작을 하지 않는다. 기존 코드다음은 showTradeList 함수가 currentPage 상태를 기반으로 API 요청을 보내는 코드const showTradeList = async () => { if (loading || currentPage > allPageCount) { return; } setLoading(true); const formData = new FormData(); formData.append("page_num", currentPage.toString()); await apiService.post( "/posts/search_second_hand/", formData, ).then(res => { if (res.data.code === 200) { .. React useRef vs useState 이전에 react-hook-form의 input 입력에서는 ref를 사용하는 것을 확인했다. 그렇다면 라이브러리에서도 ref를 사용하는데, useState보다 ref가 더 좋은 방법일까?useRef와 useState의 차이React 공식 문서에서는 ref를 "컴포넌트가 일부 정보를 기억하고 싶지만, 해당 정보가 렌더링 로직에 영향을 미치지 않는 경우" 사용하는 것이 적절하다고 설명한다. 주로 포커스 제어, 값 가져오기, DOM 요소 조작 등에 사용된다고도 적혀있다.반면, useState는 컴포넌트의 상태를 저장하고, 값이 변경될 때 리렌더링을 발생시키는 역할을 한다.코드 예제: useRef와 useState 비교import { useState, useRef } from 'react';export defa.. react-hook-form, register 렌더링 분석 Recoil 메모리 누수 확인을 하려고, 성능 확인 라이브러리 이것 저것을 확인해보다가 React Dev tools를 사용하게 되었다.Dev tools를 사용하면서 메모리 누수 보단 오히려 렌더링 관점의 확인을 더 할 수 있었다. 예를 들어, 컴포넌트의 리렌더링 빈도와 원인을 시각적으로 파악할 수 있었다. 내가 발견한 상황은,input의 값을 useState-onChange로 변경하면, 글자 하나 변경당 useState를 갖는 컴포넌트가 리렌더 되는 것을 확인했다.하지만 react-hook-form에서는 register가 적용된 input의 값이 변경되어도, 컴포넌트가 리렌더 되지 않았다. [ 여기서 'register가 적용된 input'은 react-hook-form에서 제공하는 함수로 관리되는 입력 .. Recoil 메모리 누수 확인하기 이전 글에서 Recoil을 선택한 이유와 장점에 대해 설명했다. 마지막에는 Recoil의 메모리 누수 문제점에 대해 언급하며, 내 프로젝트에서도 이 문제가 발생하고 있는지 파악해보겠다고 했다. 결론적으로, 현재 진행 중인 외주 프로젝트에서는 메모리 누수가 발생하지 않았다.[ 확실히 알게 된 건, atom만 쓴다면 메모리 누수 문제는 없다. ]메모리 누수가 일어나고 있다고 가정하고, atom의 메모리 사용 상태를 지속적으로 점검했지만, 기존에 사용하던 atom들에서 문제가 발견되지 않았다. [ = 사용되지 않으면서도 메모리에 남아 있는 atom은 없었다. ]상당히 뻘짓을 많이 했다. 메모리 누수가 일어난다고 해서, 없는 누수를 찾으려고 크롬 개발자 도구 메모리 탭 기능들을 몇일이나 봤다. 이해를 돕기 위해.. Recoil 이전까지 로그인 상태와 같은 여러 컴포넌트에서 필요한 state를 사용하기 위해, 여러 컴포넌트를 거쳐서 작업을 했었다.전역적으로 사용될 state가 많아 질수록, 컴포넌트의 props 값도 많아져 코드 가독성도 떨어지고 작업량이 늘어났다.이러한 문제를 해결할 수 있는 여러가지 도구 중 [ Recoil, ContextApi, Redux, ... ], Recoil을 우선 사용해보기로 결정했다.여기저기 글에서는 Redux가 러닝커브가 높다고 하여, 다른 것부터 사용해보고 이해력이 생겼을 때 더 고민해보기로 했다.ContextApi는 성능에 악영향을 주는 문제가 있다고 한다.Recoil은 React를 개발한 Facebook이 개발한 전역 상태 관리 도구이기도 하고 사용법도 간단하며, ContextApi의 성능.. npm vs yarn 라이브러리를 다운로드하려고 하다 보니, npm install 라이브러리 / yarn add 라이브러리 등 다양한 방법이 있었다.그냥 명령어를 받아 적으면 문제가 발생할 수도 있을까? 하는 호기심으로 여러 정보를 찾아보았다.여러가지 패키지 매니저를 사용하는 것은 아닌 것을 알 수 있었다. 골라야만 했다. 우선, pnpm은 우선순위에서 제외했다.패키지 설치 속도는 상대적으로 빠르지만, npm이나 yarn에 비해 생태계가 작다는 점이 걱정이었다.(웹 개발 경험이 많지 않아서 문제 발생 시 빠르게 해결 방법을 찾는 것이 중요하다고 판단했기 때문에, 좀 더 널리 사용되고 정보가 많은 도구를 선택하는 것이 좋겠다고 생각했다.)결론은 yarn을 사용 중이다.하지만 알아본 김에 아래에 비교해서 정리해두려고 한다.특징.. 이전 1 2 다음
