스토리북을 사용 시의 장점
스토리북은 UI 컴포넌트나 페이지단 개발을 위한 도구로 UI를 테스트, 엣지 케이스 확인에 효과적이며 문서화하여 관리할 수 있는 환경을 제공해줍니다. 개발자와 디자이너가 함께 협업하기에 최적화된 형태입니다.
useEffect와 useLayoutEffect의 차이
가장 큰 차이점은 브라우저가 화면을 그리기 전후로 동작한다는 점입니다.
useEffect의 경우는 브라우저가 화면을 그린 후 비동기적으로 실행됩니다. 그렇기 때문에 DOM에 영향을 주는 코드가 있을 경우 화면이 나중에 업데이트되어 보이거나 깜빡이는 현상이 발생합니다.
반면 useLayoutEffect는 화면을 그리기 전에 실행되어 이러한 문제 없이 사용하기에 효과적입니다.
리액트 18버전에서는 useInsertionEffect라는 개념도 추가되었습니다.
이는 DOM의 변화가 일어나기 전에 동작하는 effect로 위 두 개념보다 먼저 동작합니다. 주로 css in js를 사용하거나 구현할때 렌더링 도중에 style 태그가 추가되는 경우 문제를 해결하기 위해 등장하였습니다.
리코일 관련
리코일의 atoms와 selector 개념에 대해서 설명해주세요
atom은 컴포넌트가 구독할 수 있는 상태의 단위입니다. 값이 업데이트 되면 구독하던 컴포넌트들은 리렌더링됩니다. atom함수를 사용해 키와 Default 값을 작성하여 생성할 수 있습니다. useRecoilState, useRecoilValue, useSetRecoilState로 활용이 가능합니다.
selector는 atoms나 다른 selectors를 입력으로 받는 순수 함수입니다. atoms나 selectors가 업데이트되면 selector 함수도 다시 만들어지게 됩니다. 키값과 Get에 실행될 함수를 작성하고 useRecoilValue에 키값을 작성하여 함수가 실행된 값을 사용할 수 있게 해줍니다.
리코일이 해결한 context의 문제점은 무엇인가요?
컨텍스트는 프로바이더로 감싸진 하위 트리 중 한쪽 트리가 해당 컨텍스트 값을 사용하지 않아도 리렌더링이 발생하는 문제점이 있었습니다. 하지만 리코일은 최적화를 통해 이를 해결하였고 불필요한 리렌더링을 줄일 수 있습니다.
리액트쿼리 관련
다른 서버 상태 관리 라이브러리에서 불편했던 점
기존 개발자들은 redux, asyncronous middleware인 redux-thunk, redux-saga를 주로 사용했습니다. redux를 활용한 방법은 상당히 긴 보일러 플레이트를 작성해야했고 로딩, 성공, 실패 상태를 규격화되어 있지 않습니다. 또한 지속적인 데이터 최신화, 서버 통신 후 업데이트를 직접 진행해줘야했습니다.