본문 바로가기

JavaScript18

[React] 리액트 성능 최적화 TODO 프론트 엔드 성능 최적화 키워드로 구글에 검색을 하게 되면 이론부터 시작하여 정말 무수히 많은 자료와 레퍼런스들이 있습니다. 웹 브라우저의 동작원리부터 시작하여 차근차근 성능 최적화가 무엇이고 왜 필요한지에 대하여 자세한 내용들이 나와져 있습니다. 개발에서는 원리를 알아야 그 행위를 하는것에 의의가 있는것이 맞다고 생각합니다. 최적화란 단순하게 생각하여 사용자에게 좀 더 빠르고 더 나은 UI/UX를 제공해주는 것이라 생각합니다. 개발 시 체크하면 좋은 내용 1. React 최적화 useMemo useCallback 가상화 list(react-window, react-virtualized) pure component 함수 memoization redux reselect lazy loading memo sh.. 2023. 1. 14.
[React] 리액트 Checkbox 상태관리 리액트에서 체크박스 기능을 구현하는 방법은 여러가지가 있습니다. 1. 라이브러리를 사용하는 방법 ex) form, state 라이브러리 https://react-hook-form.com/get-started/ Get Started Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com 2. state를 사용하는 방법 이번글에서는 state를 사용하여 구현하는 방법을 소개합니다. Array vs Set state를 사용할 경우, 일반적으로 배열을 사용하지만, Set을 사용할 경우 코드작성에 있어서 조금 더 이점을 가질수 있습니다. 실무적관점에서 이점으로 2가지 정도 있을것 같습니다. 1. 중복 방지 .. 2023. 1. 3.