dev-hpk 님의 블로그

최근 프로젝트에서 모달 컴포넌트를 사용하는데 많은 불편함을 느껴 React Portal을 사용하게 되었습니다. 제가 프로젝트를 진행하면서 겪은 불편함을 간단하게 정리했으니 필요하신 분들은 아래 예시를 확인해 주세요😊더보기어떤 불편함이 있었냐구요🤔아래 사진은 chrome의 개발자 도구를 통해 확인한 모달입니다. 단순히 detph가 깊어지는데 무슨 불편함이 있는지 궁금하실 수 있겠네요❗ 위 예시를 보시면 DOM의 계층 구조에 의해 모달의 z-index에 문제가 생긴 경우입니다.import styled from "styled-components";function PortalExample() { const Title = styled.h1` position: fixed; top: 0; lef..

Emotion🤔Emotion은 리액트에서 스타일을 관리하기 위한 CSS-in-JS 라이브러리로, 자바스크립트 코드 내에서 직접 CSS를 작성하고 적용할 수 있게 해 줍니다. Emotion 외에도 Styled-Components가 주로 사용됩니다. 2024 css-in-js 사용 추세 지난 2년간 npm 다운로드 기록Styled-Components 대신 Emotion을 선택한 이유🤔Emotion을 선택한 첫 번째 이유는 styled-components는 이전 미션과 프로젝트를 통해 많이 경험해봤기 때문에 새로운 라이브러리를 경험해 보고 싶어서입니다. 트렌드를 따라가는 것도 좋지만 여러 라이브러리를 사용해 보면 왜 특정 라이브러리가 많이 사용되는지 비교해 볼 수 있을 것 같습니다😊 두 번째 이유는 자주..

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다. 목차 1. 리액트의 라이프사이클 단계 2. 함수형 컴포넌트와 useEffect 3. useEffect 사용 시 주의할 점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 리액트의 라이프사이클 단계위 사진은 Class 방식의 라이프 사이클입니다.함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.1. 마운트 (Mount)정의: 컴포넌트가 생성되고 DOM에 추가되는 단계주요 메서드: componentDidMount (클래스 컴포넌트 기준)..

React 애플리케이션에서 폼 관리는 매우 빈번한 작업입니다. React State를 이용해 폼 상태를 관리하고, 유효성을 검증하며, 성능을 최적화하는 것은 번거로울 수 있습니다. React Hook Form은 이러한 작업을 간소화하고 성능을 최적화해 주는 가볍고 직관적인 폼 관리 라이브러리입니다.목차 1. React Hook Form이란? 2. React Hook Form 설치 및 기본 사용법 3. 주요 Hook과 함수 4. React Form vs React Hook Form추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. React Hook Form이란?React Hook Form은 React의 Hooks API를 기반으로 설계된 폼 관리 라이브러리입니다. HTML의 기본 폼 요소를 활..

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)를 사용하면 이와 같은 문제를 해결할 수 있습니다. 목차 1. Compound Component Pattern? 2. 주요 개념 3. 예제 및 문제점 4. Compound Component Pattern 적용 예시 5. Compound Component Pattern 사용 예시위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Compound Component Pattern?Compound Component P..

구성 요소를 재사용 가능하게 만드는 방법은 render prop 패턴을 사용하는 것입니다. render prop은 JSX 요소를 반환하는 함수입니다. 컴포넌트 자체는 render prop 외에는 아무것도 렌더링 하지 않습니다. 대신 컴포넌트는 자체 렌더링 로직을 구현하는 대신 render prop을 호출하기만 합니다. 1. Render Prop VS Children PropChildren Prop 사용Render Prop 사용 Redner Prop을 직접 사용해보니 더 의문이 생긴다. children과 구조나 결가에서 큰 차이가 없는 것 같은데, 왜 Render Prop을 사용해야 할까? 2. Render Prop과 Children Prop의 값(데이터) 처리Render Prop의 인자로 값(데이터)을 ..

throttle과 IntersectionObserver API를 활용하여 Infinity Scroll을 라이브러리 없이 구현했습니다. 직접 구현하면서 여러 모듈을 조합하여 성능을 최적화하고, 부드럽게 데이터를 로드하기 위해 상당한 고민이 필요했습니다. 특히 throttle로 스크롤 이벤트를 제어하고, IntersectionObserver로 뷰포트 내 요소가 감지될 때만 데이터를 추가 요청하도록 구성한 부분이 핵심이었습니다. 1. IntersectionObserver 적용 Infinity Scroll 구현...function ScrollComponent() { ...생략 const endRef = useRef(null); // Infinite Scroll 구현을 위한 Ref 객체 /** * 서버에..

React에서 컴포넌트가 리렌더링 될 때, 성능 최적화를 위해 때때로 계산이 많이 필요한 값이나 함수의 결과를 캐싱할 필요가 있습니다. 이때 useMemo 훅을 사용하면 불필요한 연산을 방지하여 성능을 개선할 수 있습니다.  목차 1. useMemo란? 2. useMemo 사용법 3. useMemo 의존성 배열 4. useMemo 사용 주의사항 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useMemo란? useMemo는 특정 계산의 결과를 메모이제이션하여, React가 불필요하게 해당 계산을 다시 실행하지 않도록 도와주는 훅입니다. useMemo는 컴포넌트가 리렌더링 될 때마다 실행되는 비싼 연산을 피하고자 할 때 사용됩니다. React는 해당 값이 바뀌지 않으면 이전에 계산된 값..

React는 컴포넌트 기반의 UI 라이브러리로, 각 컴포넌트가 화면에 렌더링 되고 업데이트되는 흐름을 이해하는 것이 중요합니다. 이 흐름을 React에서는 생명 주기(Lifecycle) 라고 부르며, 각 단계에서 컴포넌트가 수행하는 특정 작업들이 있습니다.  목차 1. React 생명 주기란? 2. Mounting (컴포넌트 생성) 3. Updating (컴포넌트 업데이트) 4. Unmounting (컴포넌트 제거) 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다.1. React 생명 주기란?React 생명 주기는 컴포넌트가 생성(Mounting), 업데이트(Updating), 제거(Unmounting) 되는 일련의 과정을 의미합니다. 컴포넌트는 이 세 가지 단계에서 각각의 메서드들을 호출하며, ..

React는 컴포넌트의 상태를 관리하기 위해 여러 가지 훅을 제공합니다. 그중 하나가 useReducer 훅으로, 상태를 복잡하게 업데이트할 필요가 있을 때 매우 유용한 훅입니다. useReducer는 상태를 처리하는 로직이 많거나, 여러 가지 상태를 관리해야 할 때, 특히 Redux와 같은 상태 관리 패턴과 유사한 방식으로 상태를 관리할 수 있도록 해줍니다.   목차 1. useReducer란? 2. useReducer와 useState의 차이점 3. useReducer 사용법 4. 복잡한 상태 관리에서 useReducer 사용하기 추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. useReducer란? useReducer 훅은 상태(state)와 액션(action)을 기반으로 상태를..