Today 요약
- 리액트 강의
1. What I Learned?
리액트 강의
Link와 useNavigate의 차이
Link 컴포넌트는 a태그와는 다르게 새로고침을 하지 않고 브라우저의 주소만을 변경해줍니다. 이것과 같이 리액트 라우터를 사용하게 되면 경로가 이동되면서 경로에 맞는 새로운 컴포넌트를 렌더링하게 됩니다.
useNavigate는 경로도 이동하며, replace 옵션으로 브라우저의 히스토리에 대한 설정도 추가적으로 할 수 있습니다. replace가 false면 뒤로가기 앞으로 가기 할 때 직전에 방문했던 페이지로 이동이 가능합니다. 반면에 replace가 true면 현재 페이지의 이력을 교체하기 때문에 뒤로 가기 버튼 클릭시 이전 페이지로 돌아가지 않습니다.
평소에 아무런 생각없이 그냥 무조건 useNavigate로 주소 이동을 처리했었습니다. 하지만 단순하게 주소이동만을 처리하는 경우라면 Link태그를 고려해봐야겠습니다. useNavigate 훅을 호출하는 것에 비해 코드가 간결해지기 때문입니다.
그리고 주소 이동은 무조건 useNavigate라는 생각을 버려야 Link 뿐만 아니라 NavLink의 사용도 적절하게 고려해볼 수 있을 거라 생각합니다.
tailwind의 @apply
강의를 보다가 tailwind의 @apply라는 걸 보게 되었습니다. 강의에서는 body와 #root에 적용할 스타일링을 index.css에서 정의했습니다. 그리고 궁금해서 추가적으로 찾아봤습니다. 일단 블로그에 사람들이 작성해놓은 것들을 먼저 읽어봤고, 그 다음에 공식문서를 봤습니다. 그리고 나서 최종적으로 GPT와 몇 번 질문을 주고 받았습니다.
그렇게 내가 이해한 @apply에 대해 기록해보려고 합니다.
@apply는 가장 큰 이점은 똑같은 tailwind 코드를 반복할 필요 없다는 점입니다. 한 번 클래스를 정의해놓고 원하는 곳에서 해당 클래스를 호출하는 것으로 스타일링이 가능합니다. 그렇다면 이런 생각을 할 수 있습니다. 그럼 tailwind의 단점 중에 html이나 jsx의 코드가 길어지는 부분이 있습니다. 그렇다면 너무 길어지는 곳은 @apply로 전부 정의해서 사용하면 되는 거 아닌가?라는 생각을 해볼 수 있습니다. 실제로 input요소가 5개만 되도, 그 모든 곳에 공통적인 스타일링을 한다면 코드가 중복되고 길어지게 됩니다.
하지만 tailwind의 장점 중에 하나로 purge라는 기능이 있습니다. purge는 실제 스타일링을 한 코드가 작성되어 있어도 실제 사용되지 되는지를 분석합니다. 이때 분석해서 사용되지 않으면 최종 빌드에서 제거가 됩니다. 이는 최종 번들링의 사이즈를 감소시킬 수 있기 때문에 아주 유용한 기능입니다.
그런데 이런 purge 기능은 @apply로 적용한 코드에는 동작하지 않습니다. 그렇기 때문에 반드시 필요한 곳에서만 사용해야 합니다.
