React Context 중첩 된 컴포넌트 검사
React Context API는 트리의 상위 부모 컴포넌트에서 하위 자식 컴포넌트로 prop을 전달해야 하는 prop 드릴링 문제를 해결하기 위해 만들어졌다. Context API가 없다면 여러 중간 컴포넌트를 통해 prop을 드릴링하거나 HoC 또는 Hook을 사용해 글로벌 스토어에서 데이터를 읽어야 한다. 그러나 Context API를 다른 용도로 사용할 수도 있다.
React Context API는 트리의 상위 부모 컴포넌트에서 하위 자식 컴포넌트로 prop을 전달해야 하는 prop 드릴링 문제를 해결하기 위해 만들어졌다. Context API가 없다면 여러 중간 컴포넌트를 통해 prop을 드릴링하거나 HoC 또는 Hook을 사용해 글로벌 스토어에서 데이터를 읽어야 한다. 그러나 Context API를 다른 용도로 사용할 수도 있다.
웹이서 크기를 조정하는 전통적인 단위는 CSS 픽셀이지만 적어도 폰트 크기에는 픽셀을 사용하지 않는 것이 좋다. 픽셀은 디자인 시안을 쉽게 CSS로 변환 할 수 있지만 절대 길이 단위 이므로 하나의 CSS픽셀이 사용자의 화면의 고정된 물리적 픽셀(모니터 및 장치 픽셀) 크기에 해당한다.
switch-case는 코드가 장황하고 반복되는 보일러 플레이트 코드가 많기 때문에 필자를 포함해 많은 개발자들의 싫어한다. 이는 동작에 문제가 있거나 어렵기 때문이 아니다. 문제는 해당 코드 블록의 읽기 위해 다른 코드 블록 읽기를 중단함으로써 스위칭 비용이 발생한다는 것이다. 간단한 switch-case 조차 20줄 정도는 쉽게 발생한다.
styled-components를 처음 사용하기 시작했을 때를 기억해 보면 마법처럼 느껴졌다. 처음엔 약간 모호했던 반은 문자열, 반은 함수로 작성되고 CSS를 우회하여 React 컴포넌트에 마크업을 하기도 했다. 이후 필자를 포함한 많은 개발자들이 styled-components를 사용하는 방법을 배웠지만 내부에서 무슨 일이 일어나고 있는지 제대로 이해하지 못했을 것이다.
토스트는 짧은 시간에 나타났다가 사라지는 알림 컴포넌트이다. 일반적으로 토스트 메세지는 사용자와 상호작용이 필요하지 않거나 중요하지 않은 메세지를 표시한다. 지도앱에서 검색 버튼을 누르면 결과가 나오기 전까지 표시 되는 "위치 검색 중"과 같은 메세지를 예로 들 수도 있다.