개발을 먼저 진행했던 컴포넌트들에 디자인 시스템이 새롭게 도입되면서 이전보다 구체적인 요구사항들이 생겨났다.요구사항은 다음과 같다. 1. 최대 글자 수를 제한할 수 있어야 하며, 이를 넘길 때는 아예 타이핑을 막고, 아래에 유효성 위반 메시지를 띄워야 한다.2. 각종 유효성 패턴에 대해 위반 시 관련된 에러 메시지를 띄워야 한다. Input 컴포넌트를 만들고 다듬은 과정은 다음과 같다. 1. 가장 기본적으로 작동하는 Input을 만들자. 우선 사용자가 입력할 때마다 value가 정상적으로 바뀌어야 한다.이를 통해 최종적으로 입력한 값을 개발자가 읽을 수 있어야 한다.가장 단순하게 useState를 통해 input 태그에 전달할 value와 change 이벤트 핸들러에 setState함수를 전달한다.use..

지난 포스팅에서 useTransition 훅 사용기에 대해 다루어보았다. React의 useTransition으로 UI block 현상 해결하기네일 웹 쇼핑몰을 개발하면서, 보다 좋은 사용자 환경을 위해 쓸 수 있는 훅을 발견했다.useTransition 훅으로, 이전에 React 공식문서를 둘러보다가 관심있게 봤던 훅인데,마침 제품 상세 페이지에서minheedg.tistory.comuseTransition 훅은 UI를 막지 않고 새로운 state 업데이트를 우선적으로 가능하게 한다.즉, 현재 렌더링 작업보다 우선순위가 높은 렌더링 작업이 발생하면(useTransition 훅이 반환하는 startTransition 함수 내에서 상태 업데이트가 발생하면) 기존 렌더링은 폐기하고 새로운 state 업데이트로..