본문 바로가기
728x90
반응형

최적화4

[React] React.memo로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 React.memo로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. React.memo란? React.memo는 함수형 컴포넌트에서 동일한 파라미터로 생성된 함수들을 메모이제이션을 이용하여 재사용하게 도와줍니다. 예를 들어 다음과 같은 상황이 있다고 가정해보겠습니다. 이름, 나이, 주소값을 useState를 이용하여 표현하고 있고 주소를 제외한 이름, 나이를 파라미터로 받는 컴포넌트가 있습니다. 여기서 이름, 나이 값이 변경되면 해당 값을 가져다 사용하는 컴포넌트도 당연히 리 렌더링이 발생되어 수정된 화면을 보여줘야 됩니다. 하지만 주소값이 변경될 경우는 어떨까요? 주소 값이 변경되더라도 useState로 정의된 값들은 같이 리 렌더링이 발생되기 때문.. 2021. 9. 30.
[React] StyledComponents Tree Shaking 적용 안녕하세요. J4J입니다. 이번 포스팅은 styled-componets에 tree shaking을 적용하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 이전에 올렸던 글인 [React] Tree Shaking으로 최적화하기를 통해 리액트에서 webpack을 이용하여 tree shaking 하는 방법은 모두 끝났다고 생각을 했었습니다. 하지만 css사용을 위해 제가 즐겨 사용하던 styled-components에 tree shaking이 적용되지 않는 현상을 발견할 수 있었습니다. 해결방법을 알게 되어 서로서로(?) 공유하고자 글을 적게 되었습니다. StyledComponetns Tree Shaking 적용 방법 우선 tree shaking이 적용되지 않는 상황을 간단하게 보여드리겠습니다. 이전 글에 .. 2021. 9. 1.
[React] Tree Shaking으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 tree shaking으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. Tree Shaking이란? tree shaking은 나무 흔들기라는 뜻으로 소스코드에서는 명시되어 있지만 실제로 프로그램 실행에 영향을 주지 않는 코드들을 빌드 단계 때 제거하는 것을 의미합니다. tree shaking을 이용하여 프로그램 실행에 영향을 주지 않는 코드들을 제거했을 때 돌아오는 이점은 번들 파일의 크기 최적화입니다. 서비스의 규모가 커짐에 따라 프로그래밍되는 코드들도 많아지고 결국 번들 파일의 크기가 커지는 것은 당연한 상황이 됩니다. 그리고 번들 파일의 크기가 커지게 되면 브라우저가 번들 파일을 로드할 때 더 많은 시간을 소비하게 만듭니다. 이런 상황에서 tr.. 2021. 8. 31.
[React] 지연 로딩(Lazy Loading)으로 최적화하기 안녕하세요. J4J입니다. 이번 포스팅은 지연 로딩으로 최적화하는 방법에 대해 적어보는 시간을 가져보려고 합니다. 지연 로딩이란? 지연 로딩이라고 하는 것은 말 그대로 로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻입니다. 간단한 예시로 더 자세하게 말씀드리겠습니다. 예를 들어 한 페이지에 많은 양의 사진이 사용된다고 가정해보겠습니다. 요즘 만들어지는 사진들은 용량이 크기 때문에 화면을 처음 로드할 때 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있습니다. 심지어 이렇게 로드되는 많은 사진들이 한 화면에 전부 보이는 일은 드뭅니다. 그럼 만약 페이지를 로드할 때 페이지에서 사용되는 모든 사진을 한 번에 로드하는 것이 아니라 실제 화면에 보이는 사진들만 .. 2021. 8. 18.
728x90
반응형