React 18에서 새롭게 등장한 hooks React 18이 나온 지도 시간이 꽤 지났습니다. 이제는 어느 정도 안정화 단계에 접어들었다고 판단되어서 새로운 프로젝트를 시작하면서 도입하기로 결정했는데요, React 18에서 새롭게 등장한 hooks의 기능이 꽤나 강력합니다. 한 번 정리해두면 좋을 것 같아서 정리해보았습니다. 우선 이번에 등장한 hooks는 총 5개입니다. 그중에 2개는 라이브러리를 위해 제공되는 것이고, 3개는 어플리케이션 단에서 사용할 수 있는 것이에요. Library hooks 해당 hooks는 라이브러리를 위해 제공되는 hooks로, 일반적인 Application 단에서는 사용할 필요가 없어서 자세히 알아보지는 않았습니다. 그냥 이런 게 있다더라 정도만 이해하시고 상세한 설명은 ..
팀장님: 루크 씨, 저희 제품 config Dialog를 좀 수정해야 할 것 같네요. 이틀 드릴게요. 루크: ..네? 문제의 발단 회사에서 업무를 하던 도중 위와 같은 요구사항이 들어왔습니다. 상세한 내용은 회사 보안상 서술하기 좀 어렵지만, 간단하게 각색해서 그려보면 아래와 같아요. 기존에는 캐릭터의 이름만 변경하도록 되어있던 아주 단순한 구조의 Dialog 컴포넌트가 이제는 Favorite도 추가/수정하도록 변경된 겁니다. 심지어 Favorite은 몇 개든지 들어가야 하는 상황이고요. 캐릭터는 약 500개가 넘고, API는 한 번에 모든 캐릭터의 이름을 불러오도록 되어있습니다. 그리고 저기 들어가는 Favorite 컴포넌트는 다른 곳에서도 동일하게 사용되어야 했기 때문에, 저는 캐릭터 이름을 변경하는..
React로 개발깨나 하시는 분들은 hooks를 거의 반드시라고 해도 좋을 정도로 대부분 사용하고 계실 것 같습니다. 대표적으로는 useState, useEffect, useRef 등에서 부터 custom하게 만든 hooks까지 많은 hook이 있는데요, 그 중에서 useImperativeHandle이라는 hook을 사용하는 경우는 그다지 많은 것 같지 않습니다. 보통은 '이런 훅도 있었어?' 라는 반응을 보이는 경우가 많더라구요. 하지만, 이 hook을 사용하면, 부모가 자식의 상태에 대해서 아무 것도 알지 못해도, 자식의 데이터를 손쉽게 가져다 사용할 수가 있게 됩니다. 마치 클래스형 component에서 자식의 method를 가져다 사용하던 것처럼요! // Parent.jsx cons..
