재안 IT 공부 일기장

요즘들어 writable text node가 필요한 곳이 많다.   이나 로 텍스트를 표현하다가 클릭 또는 더블 클릭을 하면 으로 바꿔준 후, blur에서 다시 이나 로 바꾸는 작업을 여러번 했는데 문득 다른 방법은 없을까? 더 쉬운 방법은 없을까? 라는 생각이 들었다.   개인적으로 상태를 최대한 줄이려고 하는데 해당 전환 작업 때문에 상태를 추가하는 것이 그닥 대키지 않고 상태 개수를 최소화 하기 위해서 이벤트 위임해 전환 상태를 관리하기에는 코드가 범용적이지 못하다.   그래서 HTML의 editable 속성을 활용해서 내가 원하는 writable text node를 만들었다. 전문적인 텍스트 에디팅 기능을 제공한다. 해당 컴포넌트는 보통의 이나 처럼 글자 추가와 삭제가 가능하며 undo (ctrl..

개요[1] 요약[2] 기능 소개[3] 코드 [1] 요약   이미지 컴포넌트는 사용중인 라이브러리꺼 쓰는게 제일 좋지만 이번에 직접 한 번 만들어 봤다. 이번에 만든 이미지 컴포넌트를 짧게 설명하자면 다음과 같다.   다양한 로딩 전략을 지원하고 성능 최적화를 위한 여러 기능들을 내장하고 있다. 또한, 모듈식 구조로 설계되어 필요에 따라 기능을 선택적으로 사용할 수 있어 번들 크기를 최소화할 수 있다.  [2] 기능 소개 1. 이미지 스타일  기본적으로 프롭스에서 fit, position, center, blur 값을 받아 실제 이미지 태그에 전달한다. 기본 값이 설정되어 있어 값을 따로 주지 않아도 기본적인 스타일이 적용된다. 추가적으로 반응형 이미지를 위한 srcSet과 sizes 속성도 프롭스로 받아..

개요[1] useTransition[2] concurrent mode[3] useTransition Details[4] reference [1] useTransition useTransitoin이란?  리액트 18에 추가된 훅으로 nonblocking 방식으로 상태(state)를 업데이트할 수 있게 해준다. nonblocking이란?  기존 리액트의 동기적 업데이트 방식에서는 상태가 업데이트되면 그에 따른 렌더링 작업이 바로 실행되는데, 해당 작업이 실행될 때, 사용자의 인터랙션이 발생하면 해당 인터렉션 처리가 지연된다. (blocking)   이때, useTransition의 startTransition을 통해 특정 상태 업데이트를 낮은 우선순위로 예약해 사용자 인터랙션을 우선 순위로 처리하게 된다. ..

개요[1] useOptimistic[2] reference [1] useOptimistic useOptimistic이란?  리액트 19 부터 지원하는 훅으로 optimistic update를 쉽게 구현할 수 있도록 해준다. 사용시 Concurrent Mode가 적용되서 nonblocking 방식으로 상태를 업데이트할 수 있다. nonblocking과 Concurrent Mode에 대해 알고 싶다면 핵심만 뽑아서 정리했으니 아래의 포스트를 참고 바란다.https://jaeano.tistory.com/entry/React-useTransition-Concurrent-Mode-%EC%89%BD%EA%B2%8C-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0 [React] useTransiti..

최근에 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의 값..