Suspense? ErrorBoundary? 사실 React18에서 완전히 새롭게 도입된 기능은 아닙니다. Suspense와 ErrorBoundary 모두 React16.6에서 처음 등장한 개념이에요. 하지만 그동안은 experimental(실험적) 기능이었고 React18에서 정식 기능으로 편입되었다고 보는 것이 맞습니다. Suspense 기존에는 lazy loading을 지원하기 위해서 주로 사용되어 왔습니다. 하지만 이제는 컴포넌트가 API 호출을 하는 동안 fallback으로 보여줄 내용을 지정해줄 수 있게 되었어요! 🎉 사용법은 아래와 같습니다. import { Suspense } from 'react' {/* ... */} ErrorBoundary 이 친구는 UI에서 발생한 에러..
팀장님: 루크 씨, 저희 제품 config Dialog를 좀 수정해야 할 것 같네요. 이틀 드릴게요. 루크: ..네? 문제의 발단 회사에서 업무를 하던 도중 위와 같은 요구사항이 들어왔습니다. 상세한 내용은 회사 보안상 서술하기 좀 어렵지만, 간단하게 각색해서 그려보면 아래와 같아요. 기존에는 캐릭터의 이름만 변경하도록 되어있던 아주 단순한 구조의 Dialog 컴포넌트가 이제는 Favorite도 추가/수정하도록 변경된 겁니다. 심지어 Favorite은 몇 개든지 들어가야 하는 상황이고요. 캐릭터는 약 500개가 넘고, API는 한 번에 모든 캐릭터의 이름을 불러오도록 되어있습니다. 그리고 저기 들어가는 Favorite 컴포넌트는 다른 곳에서도 동일하게 사용되어야 했기 때문에, 저는 캐릭터 이름을 변경하는..
React로 개발깨나 하시는 분들은 hooks를 거의 반드시라고 해도 좋을 정도로 대부분 사용하고 계실 것 같습니다. 대표적으로는 useState, useEffect, useRef 등에서 부터 custom하게 만든 hooks까지 많은 hook이 있는데요, 그 중에서 useImperativeHandle이라는 hook을 사용하는 경우는 그다지 많은 것 같지 않습니다. 보통은 '이런 훅도 있었어?' 라는 반응을 보이는 경우가 많더라구요. 하지만, 이 hook을 사용하면, 부모가 자식의 상태에 대해서 아무 것도 알지 못해도, 자식의 데이터를 손쉽게 가져다 사용할 수가 있게 됩니다. 마치 클래스형 component에서 자식의 method를 가져다 사용하던 것처럼요! // Parent.jsx cons..
발단 최근, 회사 프로젝트에 유닛 테스트를 도입하기로 했습니다. 기존에는 Cypress를 이용한 E2E 테스트만을 통해 데일리 빌드를 수행하고 있었는데요, Cypress가 유닛 테스트의 영역까지 차지하고 있는 게 좀 어색하게 느껴졌기 때문이에요. 컴포넌트가 다른 환경에 의존하지 않고 그 자체만으로 제대로 동작하는지는 유닛 테스트를 통해 확인되어야 한다고 생각하거든요. 테스트 방법론이야 여러가지가 있겠지만, E2E는 유저의 입장에서 전체적인 어플리케이션의 Flow를 테스트하는 것이라고 봅니다. 그에 비해 유닛 테스트는 별개의 컴포넌트의 무결성을 체크하는 것이라고 보면 될 것 같아요. 각종 Validation checking이나 그에 따른 UI 상태의 변화 같은 것들이죠. 기존에는 Jest를 이용한 테스트가..
Introduction 일반적으로 Javascript에서 DOM에 직접 접근할 때는 document.getElementById등을 통해서 접근하고는 합니다. 하지만 React에서는 ref라는 것을 사용해서 접근하는데요, ref란 무엇이고, 기존의 방법과는 무엇이 다른지, 어떻게 사용하면 되는지 알아보겠습니다. What is ref? 우선 ref란, reference의 줄임말입니다. 노드나 컴포넌트에 ref 값을 만들어서 해당 요소의 값을 얻어오거나 해당 요소를 제어하는 데 사용되죠. React팀에서는 아래와 같은 경우에 ref를 사용할 것을 권장하고 있습니다. 내용을 보시면 알 수 있겠지만 React에서 만들고 통제하는 요소(제어 컴포넌트; Controlled Component)가 아닌 경우를 통제하고자..
2020년 10월 20일 React는 v17을 release했습니다. 8월 10일에 RC(Release Candidate)를 발표한지 두 달 만에 정식 버전의 출시네요. 글을 쓰는 지금은 2021년 5월입니다. 이렇게 늦게 글이 올라오는 이유는, 블로그 이전하면서 예전 글을 퍼오는 작업을 게을리했기 때문이에요. 현재는 v17.0.2까지 release되었습니다. 2017년 9월 26일에 v16이 release된 이후 3년 만에 이루어진 Major Update인 만큼, 변경사항이 상당히 많습니다. 아래 이미지는 github의 Change log 입니다. 그러나 이러한 Change log만으로는 언뜻 눈에 들어오지 않기 때문에, React team은 변경사항에 관해 React Blog에 정리해서 적어두었습니다..
