⚠️리액트 19버전부터 적용됨.목적보일러 플레이트 코드 감소아키텍처 간소화배경react 19이전에는 ref를 클래스 컴포넌트와 DOM 요소에서만 사용할 수 있었음.따라서, 함수형 컴포넌트에서는 ref를 받을수 없어서, forwardRef로 명시적으로 ref를 자식이나 DOM 노드에 전달했음.비교기존import React, { forwardRef } from 'react'; const MyButton = forwardRef((props, ref) => ( {props.children} )); // 사용 예시const App = () => { const buttonRef = React.useRef(); return Click Me;};변경 후const MyButton = ({ ref, ...p..

CRA는 리액트 프로젝트를 빠르게 세팅하도록 도와주지만, 어떠한 동작을 통해 프로젝트를 세팅하는지는 알 수가 없습니다. 그래서 CRA없이 손수 세팅하는 연습을 해보았습니다. 진행 순서 npm 패키지 생성 패키지/모듈 설치 Babel 설정 WebPack 설정 npm-scripts 설정 (Package.json) React 코드 작성 (HTML, JS) develop 서버로 렌더링 npm 패키지 생성 프로젝트 디렉토리 생성 후, 해당 경로에서 npm 패키지를 생성합니다. (package.json) mkdir [project-name] cd [project-name] npm init -y패키지/모듈 설치 필요한 패키지/모듈을 설치합니다. 이때, 일반 패키지와 개발용 패키지를 나누어 설치합니다. npm i re..

useMemo? 이전에 연산된 값을 기억해놓았다가 재사용하는 Hook. useMemo 사용법 useMemo(() => { 실행할 함수 문장 }, [의존성 배열]); 이때, 의존성 배열은 변화를 감지할 변수들의 목록 예제로 알아보기 예제 코드 import React, { ChangeEvent, useMemo, useState } from 'react'; /** * 부모 컴포넌트의 값을 내려받아 UI에 뿌려주는 자식 컴포넌트 * @param propName 부모로부터 받은 이름 * @param propAge 부모로부터 받은 나이 */ function ChildrenComponent({ propName, propAge }: { propName: string; propAge: number }) { const g..

react-router-dom v6 설정하기 설치 → 명령어 실행 react-router-dom : v6.14.2 @types/react-router-dom : v5.3.3 npm i react-router-dom @types/react-router-dom AppRouter.tsx 생성 및 코드 작성 프로젝트 src 폴더 내에 AppRouter.tsx 생성 import Navigation from 'components/layout/Navigation'; // 원하는 경로에 네비게이션 컴포넌트 만들어서 import import HomePage from 'pages/Home/HomePage'; // 원하는 경로에 페이지 컴포넌트 만들어서 import import React from 'react'; impor..