https://www.slash.page/ko/libraries/react/use-overlay/src/useOverlay.i18n useOverlay | Slash librariesuseOverlay는 Overlay를 선언적으로 다루기 위한 유틸리티입니다.www.slash.page이것은 토스에서 만든 오버레이를 선언적으로 다룰 수 있는 훅이다.useOverlay훅은 ui를 제공하지 않고 호출시점에 오버레이가 보이는(isOpen) 상태를 주입해 주고, 보이지 않게 해주는 함수를 제공하는 훅이다. 즉, useOverlay를 사용하더라도 ui는 직접 만들어야 한다. 그 ui를 모달로 할지, 바텀시트로 할지는 개발자가 결정하면 된다. 이 글은 useOverlay를 사용하는 방법을 소개하는 글이나 코드를 읽어보..
[Nextjs]트러블슈팅: 브라우저의 프로세스와 스레드, 과부하로 인한 이벤트 생략?
이 글을 리액트 코드의 성능과 브라우저에 대한 내용이다.분명히 발생해야 할 이벤트가 무시될 수도 있을까?아래와 같은 코드가 있었다const [barcode, setBarcode] = useState('');const handleBarcode = (e) => { setBarcode(e.target.value);};const handleEnter = async () => { // await post('/barcode',{barcode})};return ( ); barcode 값은 바코드리더기가 읽어낸 QR코드의 value값이다. 예를 들어 "eij1oidj012d93j980dj128d12987" 이렇게 생긴 스트링이 바코드 value값으로 읽힌다고 보면 된다.input에 포커스를 두고..
React context 성능 챙겨 잘 써보기
저는 전역상태관리 라이브러리를 별로 즐겨 사용하지는 않습니다. 그래서인지 Context를 잘 써보고 싶은 마음이 있었는데요. 리액트 Context 하면 보통 하위 자식 컴포넌트들이 전부 리랜더링 된다는 단점을 꼽습니다. 자식 컴포넌트가 전부 리랜더링 된다는 단점만 없다면.. 모든 상태를 전역에서 관리하는 전역상태 라이브러리보다 훨씬 문맥에 맞게 코딩할 수 있는 Context가 좋을 것 같습니다. Context사용에 따른 리랜더링을 방지하기 위해 모든 자식 컴포넌트에 React.memo를 사용하자는 말이 아닙니다. 바로 커스텀 프로바이더 훅을 만들어서 리랜더링을 방지하는 것입니다. 제 앱입니다. Change Theme 간단하게 이런 구조로 생긴 앱입니다. 이제부터 app 컴포넌트에서 상태를 공유하기 위해 ..
React Compound Pattern - 코드 사용자를 배려하는 패턴
목적: React Compound Pattern로 개선한 점과 느낀 점을 남긴다. 위와 같은 컴포넌트를 구현하기 위해 Select와 TextField를 감싸는 Container를 구현하고 children으로 내부에 포함하고자 하는 아이템들(Select, TextField, DatePicker 등)을 받을 수 있는 컴포넌트를 만들었습니다.const Search = () => { return ( );};export default Search; 예를 들어 위와 같이 사용하게 됩니다. AutocompleteQueryBox와 SearchKeyword라는 컴포넌트는SearchContainer안에서 Context를 받아서 완벽히 작동하도록 공들여 만든 컴포넌트입니다. 문제가 발..
React Server Component 는 무엇을 해결하기 위한 것일까?
처음 서버 컴포넌트를 처음 접했을 때는 서버사이드 랜더링, 혹은 그 비슷한 것처럼 듣고 개발을 했습니다. 그러나 React Server Component(rsc)를 적극적으로 사용하다 보니 이것이 매우 큰 패러다임의 변화임을 알게 되었습니다. 리액트를 다루는 프론트엔드 개발자는 이것에 대해 더 공부하고 자세히 알아볼 필요가 있습니다. React는 클라이언트 사이드 ui 라이브러리입니다. 모놀리틱 한 거대한 서비스를 작고 독립된 '컴포넌트'라는 조각으로 나눠서 조합을 통해 만들도록 합니다. 이 '컴포넌트'들을 모두 자바스크립트 함수입니다. jsx를 반환하는 함수죠. 브라우저에서 우리 js파일들을 다운로드하면 이 함수들을 실행해서 컴포넌트로 dom을 만들어 냅니다. React는 이런 개념으로 모놀리틱 한 거..
React에서 svg를 다루는 방법
오늘은 svg를 다루면서 불편했던 점과 이를 조금 개선한 결과입니다. 프로젝트 상황이 디자인시스템이 완벽하고 디자이너와 아이콘 네이밍 규칙이 다 정해져 있다면, 그리고 화면에 svg가 많고 성능을 고려한다면 sprite svg파일을 만들어서 use태그로 랜더링 하는 방식을 적용할 수 있을 것 같습니다. 상황에 따라 방식마다 트레이드오프가 존재하는데요, 저의 상황은 타입스크립트가 없이 js로 개발해야하고 아이콘도 수시로 추가되고 제거되며 네이밍도 이제 막 맞춰가는 단계입니다. 이런 상황에서 sprite svg 방식을 취하면 매번 sprite파일을 만들어줘야 하기 때문에 오히려 더 귀찮고 느려질 것입니다. 기존에 저는 svg를 다루기 위해 리액트 컴포넌트로 만들어서 랜더링 하는 방식을 취했습니다. 그냥 sv..