React6 [React] 렌더링 성능 개선하기 먼저, 컴포넌트가 리렌더링되는 경우는 다음과 같습니다. 컴포넌트의 state가 변경되었을 때 부모 컴포넌트에서 받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 위와 같은 특성은 필요없는 렌더링을 일으키기도 합니다. 부모 컴포넌트의 state가 바뀌면 props를 받은 자식 컴포넌트와 변경된 state를 받지 않은 자식 컴포넌트 모두 렌더링 됩니다. 이러한 불필요한 렌더링을 줄이고 성능을 높이는 방법을 설명하겠습니다. useMemo useMemo는 React에서 CPU 소모가 심한 함수들을 캐싱하기 위해 사용됩니다. useMemo를 사용하면 복잡한 계산식의 계산한 값을 재사용할 수 있습니다. 만약, 컴포넌트의 어떤 함수가 값을 리턴하는데 하나의 변화에도 많은 시간을 소요한다면, 리렌더링될 때마.. 2022. 4. 19. [Back&Stock] 피드백 반영하기 이 글은 항해99 마지막 실전 프로젝트를 끝내면서 정리하는 글입니다. 이번에는 실제 서비스를 하면서 설문조사 피드백을 받고 반영했던 경험에 대해서 작성하려고 한다. 긍정적 피드백 먼저, 설문에서 프로젝트에 대해 긍정적인 부분이라고 답해주셨던 부분은 UI 였다. 무엇보다 깔끔한 UI가 보기 편하고 필요한 요소들만 있는 것 같다는 피드백이 있었다. 긍정적 피드백은 짧게 정리하고 부족했던 부분과 어떻게 해결했는지 써보려고한다. 처음 접하는 사람에게 설명하기 설문 피드백을 보았을 때, 위의 긍정적 피드백과 상반되게 첫 접속에는 어떤 것을 해야 실험을 할 수 있는지 잘모른다고 답변이 왔다. 프로젝트의 주제가 주식의 백테스팅인 만큼 주식을 해보지 않았던 사람들, 백테스팅이 무엇인지 모르는 사람들에게 이 사이트를 사.. 2022. 4. 10. [Back&Stock] 컴포넌트는 무엇일까? 이 글은 항해99 마지막 실전 프로젝트를 끝내면서 정리하는 글입니다. 먼저, 간단하게 소감을 이야기 해보자면 끝났다는 생각보다 이제 프론트엔드에 대해 시작하는 느낌을 받는 것 같다. 프로젝트를 진행하면서 짧은 시간안에 기획부터 UI, 기능 모두 완성해야 한다는 것이 많은 부분들을 완벽하게 만들지 못하게 한 것 같다는 생각이 들었다. 아래에서는 프로젝트를 진행하면서 아쉬운 부분이나 느낀점에 대해 정리해보자 한다. 컴포넌트 중요성 컴포넌트는 내가 생각하기에 리액트의 가장 큰 장점, 특징이라고 생각한다. 레고로 비유했을때 어떠한 하나의 오브젝트를 완성하기 위한 부품과 컴포넌트는 같다고 생각한다. 그렇기 때문에 컴포넌트를 처음부터 잘 만드는 것이 하나의 프로젝트를 완성하는데 가장 기초가 되는 부분이 아닐까 싶다.. 2022. 4. 7. [React: code] 리덕스는 어떻게 사용할까? 이 글의 목적은 제가 작성한 코드를 다시 되집어 보는데 있습니다. 프로젝트를 진행하면서 리액트의 리덕스를 어떠한 순서로 사용하여 CRUD를 구현하였는지 다시 보고 정리하는 글입니다. 사용한 주요 패키지는 아래와 같고, firebase를 사용했습니다. - react-redux - redux-action - redux-thunk - immer 먼저, 리덕스를 살펴보면, 스토어 - 데이터가 저장되는 곳 구독 - 스토어에서 컴포넌트로 데이터를 보내는 행위 리듀서 - 저장된 데이터(상태)를 관리하는 곳 액션 - 컴포넌트에서 데이터를 변경하여 스토어에 전송하고 싶을 때 선언하는 객체 디스패치 - 스토어의 내장 함수 중 하나로 액션 객체를 넘겨줘 상태를 업데이트하는 것 리덕스의 흐름 1) 리덕스 스토어를 컴포넌트가 .. 2022. 3. 1. 이전 1 2 다음
