리팩토링2 [Mudig] 불필요한 리렌더링 방지로 성능 최적화 하는 방법 IntroReact 애플리케이션의 성능을 최적화하는 데 중요한 포인트로 리렌더링이 과도하게 발생하면, 앱의 반응성이 저하될 수 있다는 것을 고려하는 것이다. 실제로 리렌더링에 대한 부분에 리팩토링을 진행하면서 Light House 검사를 통해 성능이 개선되는 것을 확인했다. 함수 컴포넌트와 클래스 컴포넌트 모두 불필요한 리렌더링을 방지할 수 있는 방법이 있으며, 각각의 접근 방식이 조금 다르다. 프로젝트에서는 함수형 컴포넌트로 구현했지만 공부하는 의미로 함수 컴포넌트와 클래스 컴포넌트 각각을 정리해 보았다. 함수 컴포넌트의 불필요한 리렌더링 방지React.memo: 컴포넌트를 감싸주면, props의 변화가 없다면 리렌더링을 방지하여 성능을 최적화할 수 있다.const MyComponent = React... 2024. 3. 19. [Mudig] 리팩토링 중 마주친 Recoil Hook 무엇이 좋을까? 이 코드는 유저의 정보를 불러오고 갱신하기 위한 코드이다. const [userInfo, setUserInfo] = useRecoilState(userInfoAtom); 하지만 내가 보고있는 코드는 회원가입 유저의 데이터를 저장하는 페이지였다. 그래서 고민이 되었던 것은 유저의 정보를 저장한 것이 없는 신규 유저라면 불러올 정보가 없이 그냥 저장만 하면 되지 않을까 였다. 그리고 그렇게 떠올린 생각을 어떻게 코드에 적용시킬지 고민해보았다. useRecoilState, useRecoilValue, 그리고 useSetRecoilState는 Recoil 상태 관리 라이브러리에서 React 컴포넌트 내에서 상태를 사용하기 위한 훅(hooks)이고 이 페이지에서는 그 3가지를 다 사용하고 있었다. 그래서 이들 .. 2024. 3. 1. 이전 1 다음
