분류 전체보기

React에서 hook을 통해 결합도 줄이기

1. 서론 개발을 하면서 제일 많이 하는 일은 기능 추가일 것이다. 물론 백지상태에서 새로운 프로젝트만을 개발하는 개발자들도 있겠지만, 기존의 프로젝트에 기능을 추가하거나 기존의 서비스를 더 발전시키는, 기능을 추가하는, 개발자가 더 많을 것이라고 생각한다.  대부분의 개발자들은 새로운 프로젝트, 백지상태에서 개발하는 것을 더욱 선호할 것 같다. 왜냐하면 기존의 코드들, 레거시 코드와 라이브러리 의존성 등이 기능 추가에 방해가 되는 경우가 많기 때문이다. 특히 나는 두 달전 Node.js contribute를 할 적에 window 환경의 reserved namespace 관련 버그 수정을 하는데 기존의 테스트 코드, 다른 코드들이 그 잘못된 동작이 정상적인 동작이라고 가정하고 짜여진 코드가 많아 brea..

TypeScript: type과 Interface의 차이

서론 TypeScript에서 type과 interface는 모두 타입을 정의하는 방식이지만, 각자 고유한 특징과 장단점을 가지고 있다. 이번 글에서는 type과 interface의 공통점과 차이점을 정리하고, 마지막에는 언제 type을 써야하고 언제 Interface를 쓰는게 적절한지에 대해 써보고자 한다.1. 공통점1.1 특정 필드 제외 (Omit) 기능 type과 interface 모두 Omit 기능을 활용하여 특정 필드를 제외한 새로운 타입을 정의할 수 있다. 이 기능은 보안 등 이유로 일부 속성만 노출하고 싶을 때 유용하다. 다만, type을 사용한 경우 문법이 더 깔끔해지는 장점이 있다.interface User { name: string; age: number; email: string;..

React Custom Hook에 대하여

React Hook이란? React Hook은 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능이다. 기존 클래스형 컴포넌트의 복잡성을 줄이고, 함수형 컴포넌트의 재사용성과 가독성을 높여준다. 대표적인 Hook으로는 useState, useEffect, useContext 등이 있으며, 사용자 정의 Hook(Custom Hook)을 통해 비즈니스 로직을 보다 깔끔하게 관리할 수 있다.Hook을 사용하는 이유 Hook을 사용하는 주요 이유는 비즈니스 로직의 분리, 관심사 분리, 캡슐화, 그리고 로컬 상태 관리 등 여러 측면에서의 이점 때문이다. 1. 비즈니스 로직의 분리 Hook을 사용하면 비즈니스 로직을 컴포넌트 외부로 분리하여 재사용 가능한 코드로 만들 수 있다. 이를 통해 중..

React에서 virtual dom을 쓰는 이유

Virtual DOM이란 React는 UI 라이브러리로, 화면을 구성하는 방식에서 명령형이 아닌 선언형 방식을 채택했다. 선언형 방식은 개발자가 어떻게 화면을 업데이트할지 일일이 신경 쓰지 않고, 무엇을 그릴지를 선언하는 데 집중한다. 여기서 중요한 역할을 하는 것이 바로 Virtual DOM(Virtual Document Object Model, VDOM)이다. VDOM은 실제 DOM을 추상화하여 메모리에 저장하는 복사본으로, 리액트가 최적화된 상태 업데이트를 수행할 수 있도록 돕는다. 이 글에서 말하는 vdom은 이하로 react의 vdom만을 가르킨다. VDOM을 사용하는 이유: 선언적 UI와 멱등성 리액트가 VDOM을 도입한 주된 이유는 선언적 UI와 멱등성(idempotency) 때문이다. 명령..

React 19의 새로운 기능들

React 19는 성능과 개발자 경험을 개선하기 위한 여러 새로운 기능을 도입했다. 이번 업데이트에서는 서버와 클라이언트 간의 통합을 강화하고, 코드 최적화 및 사용자 경험 향상에 중점을 두었다. 이번 글에서는 React 19에서 도입된 주요 기능과 그 사용법에 대해 설명한다.1. 서버 컴포넌트와 클라이언트 컴포넌트의 통합 React 19에서 가장 큰 변화 중 하나는 서버와 클라이언트 컴포넌트 간의 통합이다. 이제 서버에서 처리한 데이터를 클라이언트가 받아 바로 랜더링할 수 있어, 단일 작업을 서버와 클라이언트가 나눠서 실행함으로써  UX가 끊기지 않고 자연스럽게 이어질 수 있다. export default async function ServerComponent() { // 서버에서 API 호출을 통해..

컴포넌트 구성은 훌룡합니다 그런데

이 글은 Tktodo의 블로그를 번역한 글입니다.원문 링크: https://tkdodo.eu/blog/component-composition-is-great-btwPhoto by Glen Carrie  제가 처음 리액트를 배웠을 때, 리액트의 모든 장점들에 대해 들었습니다: 가상돔은 매우 빠르고, 단방향 데이터 흐름은 예측 가능하며, JSX는 자바스크립트에 마크업을 넣는 흥미로운 방법입니다. 하지만 리액트의 가장 큰 장점은 시간이 지나면서야 제대로 이해하게 되었습니다: 바로 컴포넌트를 다른 컴포넌트에 함께 구성할 수 있는 능력입니다. 이를 항상 익숙하게 사용했다면 이것이 장점이라는 것을 쉽게 놓칠 수 있습니다. 믿거나 말거나, 약 10년 전만 해도 컴포넌트의 로직, 스타일, 마크업을 하나의 컴포넌트로 묶..

Frontend에서의 Bundler

번들러는 여러 개의 자바스크립트 파일을 하나로 합쳐주는 도구이다. 개발자들이 코드를 나누어 작성할 때, 여러 파일로 나누어도 결국 실행 환경에서는 단일 파일로 실행해야 하는데, 이때 여러 파일을 묶어 하나의 파일로 만들어주는 역할을 한다. 예를 들어, 브라우저와 리액트 네이티브와 같은 환경에서는 여러 파일을 동시에 처리할 수 없기 때문에 하나의 파일로 번들링하여 실행해야 한다.번들러의 역할 번들러의 주요 역할은 세 가지로 나뉜다: 레졸루션(Resolution), 로드(Load), 옵티마이제이션(Optimization)이다. 각각의 역할을 하나씩 살펴보자.Resolution레졸루션은 파일 간의 참조를 올바르게 해석하는 과정이다. 자바스크립트 코드에서 import나 require를 사용할 때, 해당 경로에 ..

React Native에서 Routing: React Navigation 사용법

리액트 네이티브는 네이티브 앱처럼 화면을 전환하고, 상태를 관리하기 위해 강력한 네비게이션 라이브러리가 필요하다. React Navigation은 이러한 요구를 충족시키는 가장 많이 사용되는 라이브러리 중 하나이다. 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 지원하며, 복잡한 앱 구조에서도 간단하고 효율적으로 화면 이동을 처리할 수 있다. 이 글에서는 react-navigation의 주요 기능과 사용 방법을 살펴보자.React Navigation React Navigation은 리액트 네이티브에서 스크린 간의 전환과 상태 관리를 효율적으로 처리하기 위한 라이브러리이다. 이 라이브러리를 사용하면 여러 화면 사이에서 쉽게 이동할 수 있고, 스택 네비게이션, 탭 네비게이션, 드로어 네비게이션 등 다양한..