도리 도리

이전 글: React 18 Transition 이전 글에서 트랜지션을 활용하여 UX를 개선하는 예시를 살펴보았습니다. 리액트에서 제공했던 기본 예시는 상태관리로 useState하나만 사용했지만, 실제 어플리케이션의 경우 대부분 외부 상태 관리 도구를 사용하게 됩니다. 여기서 Transition 적용에 어려움이 발생합니다. 이 포스팅에서는 외부 상태 관리 도구와 Transition을 함께 사용하려 할 때에 발생하는 문제점과 해결방안에 대해 공유하려합니다. 외부 상태 관리자의 도입 배경 React에서는 상태관리를 위해 기본적으로 useState, useContext 등을 제공합니다. 하지만 어플리케이션의 크기가 커지고 복잡도가 높아지게되면서 상태 관리를 위해 외부 스토어를 사용하는 경우가 많습니다. 예를 들..

React 18의 새로운 기능: Transition으로 사용자 경험 향상시키기 React 18은 다양한 새로운 기능과 개선 사항을 도입하면서, 특히 'Transition'이라는 개념을 통해 사용자 인터페이스의 반응성을 크게 향상시켰습니다. 이 기능은 React 애플리케이션의 상호작용을 더욱 부드럽고 자연스럽게 만들어, 사용자 경험을 개선하는 데 중점을 두고 있습니다. Transition Transition은 React 18에서 도입된 개념으로, "긴급하지 않은 상태 업데이트"입니다. 이를 통해 React는 중요한 업데이트에 우선순위를 두고, 사용자와의 상호작용을 방해하지 않으면서 백그라운드에서 상태 업데이트를 수행할 수 있습니다. 왜 Transition이 필요한가? Transition의 필요성: Reac..

요즘 유행하는 ChatGPT로 리액트 간단한 리액트 컴포넌트를 작성해보았다. ChatGPT를 써 본 소감은 계속 ChatGPT와 티키타카를 해나가야 괜찮은 결과가 나온다는 것이다. 내가 해본 예시는 아래와 같다. (영어는 생각나는대로 했기 때문에 많이 틀렸을테지만 양해 바람) 1. 대화 시작 및 첫 스펙 제시 리액트 + 타입스크립트를 사용하여 인풋필드와 서밋 버튼이 있는 컴포넌트 작성 요청. 제출 목록은 인풋 아래에 있고, 제출 버튼을 누르면 목록이 업데이트 되어야함. Q. Create an React Typescript code. It should contain an input field and a submit button. when you click submit, the submitted list i..