프레임워크 만들기3 Browser Router와 컴포넌트 메모이제이션 안녕하세요!'Reactify 개발기 2부 - 상태관리'에 이어, 이번에는 Browser Router, 컴포넌트 메모리제이션, 문제점 및 개선사항을 말씀드리고 나만의 프레임워크 개발기는 마무리 지으려고 합니다. Browser Router React에서 SPA(Single Page Application) 방식으로 페이지를 전환할 때, 브라우저의 URL을 동적으로 관리하고, 페이지 전체를 새로고침하지 않고도 URL에 맞는 컴포넌트를 렌더링을 하기 위해 사용합니다. 즉, 기존에는 서버에서 완성된 HTML 파일을 내려받았으나, React와 같은 라이브러리에서는 경로에 맞는 자바스크립트를 사용해 필요한 컴포넌트만 업데이트하여 빠르고 효율적인 페이지 전환을 구현합니다. 또한 a태그는 이러한 SPA 본질과는 맞.. 2025. 2. 18. Auto Batching, 전역 상태 관리 안녕하세요!'Reactify 개발기 1부 - 컴포넌트 구현'에 이어, 이번에는 상태 관리에 대해 그 과정에서 고민했던 아이디어와 직면한 문제, 그리고 이를 해결하기 위한 방안들을 공유해보려고 합니다. 상태관리컴포넌트 내에서 state관리는 React에서 사용되는 데이터 단방향 흐름을 채택했습니다. 단방향 데이터 바인딩이란 데이터가 한 방향 (부모 → 자식)으로 데이터가 전달됩니다. 자식은 부모의 데이터를 props을 통해 읽기만 할 수 있고, 수정은 부모가 제공한 콜백함수를 통해서만 수정할 수 있습니다. 저는 이러한 부분을 클래스의 private, 생성자를 통해 해결했습니다.private필드를 사용해서 부모 뿐만 아니라 다른 컴포넌트의 state변수에 접근하지 못하도록 하였고,생성자를 통해서 자식에게.. 2025. 2. 18. 태그 리터럴을 활용한 JSX 유사 컴포넌트 안녕하세요! 개인 토이 프로젝트로 타입스크립트를 활용하여 프레임워크를 개발하고, 해당 프레임워크로 간단한 웹 페이지 개발을 진행했습니다. 그 과정에서 고민했던 아이디어, 직면한 문제, 그리고 그에 대한 해결 방안 등을 공유해보려고 합니다. 컴포넌트 만들기리액트를 사용해본 분이라면 컴포넌트의 편리함을 경험하셨을 텐데요. 제 프레임워크에서도 컴포넌트 개념을 접목시켰습니다. 저는 태그드 리터럴을 사용하여 컴포넌트 기능을 구현하였습니다. 템플릿 리터럴은 ``으로 주로 문자열을 동적으로 생성할 때 사용하셨을 겁니다. const name = 'John';const greeting = `Hello, ${name}!`; 하지만 태그드 리터럴은 태그 함수에 파라미터로 템플릿 리터럴 문자열을 전달합니다. 간단한 예제로.. 2025. 2. 18. 이전 1 다음
