Intro 이번 글은 프로젝트 리팩토링 중 리렌더링 이슈에 대한 고민을 적은 글입니다. 해결하기 위한 가설과 시도만 있고 정확히 왜 발생했는지에 대한 결론은 없습니다. 추측만 존재합니다... 내용과 작성자가 다소 애송이처럼 보이시더라도 너그럽게 봐주시면 감사하겠습니다. 혹시나 내용에 대한 피드백이 있다면 댓글을 부탁드리겠습니다! 무슨 문제였나요? 장소 컴포넌트의 버튼을 눌러서 장소를 추가시키는 상황입니다. 상단의 일정 목록 컴포넌트는 데이터가 추가되니까 배열에 변화가 있어 리렌더링이 되는 것이라고 생각했습니다. 그에 반해 하단의 장소 목록 컴포넌트는 데이터가 동일합니다. 그래서 리렌더링이 왜 발생하는지 궁금했습니다. 사실 저 상태에서는 리렌더링이 되는 것이 맞습니다. 장소를 추가할 때마다 새롭게 추가된 ..
서론 프로젝트를 시작하고 개발을 진행하며 어떻게 초기 로딩 속도를 줄일 수 있을까... 계속 고민했었습니다. 가장 먼저 적용해본 것은 React에서 제공해주는 Suspense 컴포넌트와 lazy 메서드를 활용한 코드 분할입니다. 사실 프로젝트에 적용하고 결과를 낸 것은 좀 됐지만... 정확하게 정량적인 숫자가 궁금해서 측정을 한 뒤 지금 기록을 남기게 되었습니다. 성능 측정 결과 (개발 환경) 빠른 3G 환경에서는 26.47초에서 13.84초 정도로 약 50% 가까이 로딩 속도를 줄일 수 있었습니다. 제한없음 환경에서는 약 783밀리초에서 약 632밀리초로 약 20% 가까이 로딩 속도를 줄일 수 있었습니다.
🥯 애피타이저 처음 리액트 공식문서에서 useId라는 훅을 보았을 때 리액트에서 uuid를 대체하는 훅이 만들어진건가! 라는 생각으로 공부해보게 되었습니다. 하지만 공부해보니 uuid랑은 상관 없는 훅이었습니다. 이제 useId에 대해서 알아보겠습니다. 🍖 메인 const id = useId(); useId 훅은 매개변수는 사용하지 않습니다. 고유 ID 문자열을 반환합니다. useId는 컴포넌트 최상단 혹은 훅에서만 호출이 가능합니다. 리스트의 Key로 사용하면 안됩니다. useId 사용해보기 import { useId } from 'react'; const Input = ({labelText}) => { return ( {labelText} ) } export default function Form()..
🥯 애피타이저 RTK Query란? RTK Query는 웹 애플리케이션에서 데이터를 가져오는 상황을 간단하게 하여 data fetching과 cashing 로직을 직접 작성할 필요가 없도록 하는 강력한 data fetching, cashing 툴입니다. RTK Query는 Redux Toolkit를 설치하면 내장되어 있기 때문에 따로 설치를 하지 않아도 선택하여 사용할 수 있습니다. RTK Query를 왜 사용하나요? API 호출 및 데이터 관리와 관련한 boilerplate 코드를 대부분 처리가 가능하므로 더 적은 코드를 작성할 수 있습니다. 자체적으로 캐싱을 처리하고 불필요한 요청을 줄여서 애플리케이션의 성능을 향상합니다. 또한 백그라운드에서 백엔드 데이터를 프리로드하여 애플리케이션 로딩 속도를 빠르..
🥯 애피타이저 Redux란? Redux는 애플리케이션의 상태를 전역으로 관리하는 데 사용되는 오픈소스 JavaScript 라이브러리입니다. React와 함께 사용되기도 하지만, 다른 라이브러리나 프레임워크와도 사용할 수 있습니다. Redux를 사용하는 이유 하나의 Store를 이용하기 때문에 애플리케이션의 상태를 쉽게 추적하고 변경할 수 있고, Props Drilling을 방지하여 손쉬운 상태 전달과 업데이트가 가능하여 코드의 유지 보수성을 높이고 효율성을 극대화할 수 있습니다. 또한 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 처리할 수 있습니다. Redux의 세 가지 원칙 Single source of truth 하나의 중앙 집중화된 Store에서 데이터를 관리합니다. State is rea..
🥯 애피타이저 안녕하세요. 이번 글에서는 useMemo를 예제와 함께 소개해보겠습니다. 끝까지 읽어주실것이라 믿고 미리 감사드립니다. 🍖 메인 useMemo가 뭐예요? useMemo는 React에서 컴포넌트의 성능을 최적화하는 데 사용되는 Hook입니다. 함수의 결과를 메모이제이션하여 비용이 많이 드는 계산을 최적화하는데 사용됩니다. 함수를 메모하는 useCallback과는 달리, useMemo는 함수의 결과 값을 메모합니다. const memo = useMemo(calculateValue, dependencies); calculateValue useMemo의 첫 번째 인수로 들어가는 calculateValue는 캐시 하려는 값을 계산하는 함수입니다. 이 함수는 순수 함수여야 하며, 인수를 받지 않아야 ..
🥯 애피타이저 안녕하세요. useReducer에 대해 공부하는 김에 TodoList를 만들어보게 되었읍니다. 매우 간단하고 디자인이라곤 1도 찾아볼 수 없으니 감안하고 봐주세요. 혹여나 코드에 대해 피드백이 있으시다면 댓글로 알려주세요. 그렇다면 제가 무한 감사를 드릴 것입니다. 🍖 메인 TodoList의 얼굴 해야 할 일을 써넣을 input 태그와 등록 버튼을 담은 form, TodoItem 컴포넌트, TodoItem들을 담을 TodoList 컴포넌트, 이렇게 3개의 컴포넌트로 구성된 간단한 앱입니다. reducer // reducer 함수 const reducer = (state, action) => { switch (action.type) { case "INIT": return [...action...
🥯 애피타이저 안녕하세요. 이번 글은 useReducer를 간단하게 알아보겠읍니다. 피드백할 부분이 있다면 댓글로 알려주세요. 그럼 무한 감사를 드립니다. 🍖 메인 간단 소개 useReducer는 React의 훅(Hook) 중 하나로, 컴포넌트의 상태를 관리하기 위해 사용됩니다. useReducer는 Redux와 비슷한 개념으로 동작하지만, Redux보다 더 간단하고 가볍게 사용할 수 있습니다. 문법 useReducer는 세 개의 인자를 받을 수 있습니다. const [state, dispatch] = useReducer(reducer, initialArg, init); 첫 번째 인자로 reducer 함수이고, 두 번째 인자로 initialArg(초기 상태), 세 번째 인자는 초기 상태를 반환해야 하는 ..
