재안 IT 공부 일기장

타입스크립트로 리액트 프로젝트를 하던 중,와 리스트를 간단히 map 돌려서 컴포넌트로 반환하는 로직 여러 군대에서 발견되어혹시 번들링할 때 map 그대로 들어가나? 생각을 했다. 아래와 같은 구조를 통해 중복되는 부분을 추상화 했다. 일단 타입 정의 먼저,export interface ItemProps { id: number | string;}export type IteratingItemProps = { items: T[]; component: ElementType;};export type IteratingLayoutProps = IteratingItemProps & { container: ElementType;};export type ItemsIteratorProps = IteratingLayo..

최근에 React Compiler가 생겼다고 해서 관심을 갖고 있었다.React Compiler에 대해 간략하게 설명하자면, 그동안 불필요한 리렌더링을 방지하려면 useMemo와 useCallback을 통해컴포넌트의 props를 관리 했어야 하는데React Compiler는 위의 조취를 자동으로 지원한다고 한다. 😲 그러다가 유튜브 알고리즘으로 React Conf 2024 Day1이 떴다. 새로나올 React 19의 기능에 대해 설명하는 conference라서 영상에선 React 19에 나오게될 기능들에 대해 설명한다.궁금해서 봤고, 보면서 간단하게 정리를 하려고 한다. https://www.youtube.com/watch?v=T8TZQ6k4SLE 영상이 워낙 길어서 조금씩 나눠서 글을 수정하며 정리하..

Custom Hooks 1 아래와 같이 리액트 hook에 로직들을 추가해서 만든 함수가 커스텀 hook이다. 다른 함수처럼 reusing logic이 핵심이고 간단한 커스텀 hook 예시는 아래와 같다. 함수 이름에 use를 붙여야지 리액트가 해당 함수가 hook임을 인지해 내부에서 리액트 hooks가 사용 가능하게 된다. 아니면 안돌아간다. 파일이름은 상관 없다. 또한, 해당 hook이 hook 사용 규칙을 위반했을 때 경고가 뜬다. Hook 사용 규칙 1. 반복문, 조건문, 내부함수에서 호출하지 말 것 2. React 컴포넌트 내부에서만 호출할 것 커스텀 hook의 사용은 함수처럼 다른 컴포넌트에서 그냥 가져다 쓰면 된다. 이때 커스텀 hook에서 state를 생성한다고해서 해당 훅을 사용하는 모든 ..

React.memostate 변경으로 인해 부모 컴포넌트가 재실행 될경우 해당 컴포넌트의 모든 하위 컴포넌트가 DOM 변경과 관련없이 재실행된다. (console.log로 확인 가능)이때 하위 컴포넌트들의 필요없는재실행을 막기위해 React.memo를 사용할 수 있다. 아래와 같이 export할 때 감싸주면 된다.  React.memo는 함수형 컴포넌트에서만 사용할 수 있고해당 컴포넌트에게 넘어오는 props를 확인해 props의 값 변경이 없다면 ( === 사용 )ReactDOM은 해당 컴포넌트를 재실행 하지 않는다. 이처럼 React.memo는 최적화를 위해 사용하는데 남용하면 오히려 비용이 더 많이 들게된다.이는 App 컴포넌트가 변경될 때마다 해당 컴포넌트 기존 props와 새로운 props의 값..