프로그래밍/React.js

[React] React.memo란?

이것 역시 전 게시글과 마찬가지로 useMemo와 비슷하다. const MyComponent = React.memo(function MyComponent(props) { /* props를 사용하여 렌더링 */ }); 리액트 공식문서에 따르면 다음과 같다. React.memo는 Memoization(메모이제이션) 기법으로 동작하며, 고차 컴포넌트(Higher Order Component, HOC)이다. 컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing) 하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다. 즉, React는 컴포넌트를 재렌더링하지 않고 마지막으로 렌더링된 결과를 재사용한다. React.memo는 props 변화에만 영향을 ..

[React] useMemo란?

우선 우리는 이것을 왜 쓰려고 하는가?? 분명 리액트가 랜더링 또는 재랜더링 될 때 함수들이 똑같은 동작인데도 연산하여 성능을 잡아먹기 때문이다. 따라서 이러한 리액트 어플리케이션 성능을 최적화하기 위한 방법인 연산 결과 재사용을 알아볼 것이다. 먼저 이런 연산 결과 재사용하는 방법인 useMemo는 Memoization(메모이제이션) 기법을 적용하였다. 🧐 그렇다면 Memoization은 무엇인가? Memoization이란? 한 번 연산해본 결과를 기억해두고, 다시 동일한 입력이 들어오면 기억해둔 데이터를 반환하는 방법이다. 1+1 은 무엇인가? (계산중...) (계산완료) => 2 다시 한번더 1+1은 무엇인가? (전이랑 동일하네? 기억해뒀던거 바로 반환) 2 위 방식처럼 엄청 복잡하거나 성능을 잡아..

[크롬 확장프로그램]React Developer Tools 설치

리액트를 개발할 때 npm start를 하면 크롬 사이트에 띄워서 개발한 것을 보게된다. 이 때 리액트를 편하게 보기위해 크롬의 확장프로그램을 사용한다. 1. 크롬 웹스토어 접속하기 2. "React Developer Tools" 검색해서 추가하기 3. 크롬에서 확장프로그램 설정하기 4. 적용 완료 설정 - 도구 더보기 - 개발자 도구를 선택하여 위 사진의 오른쪽 부분처럼 개발자 도구를 연다. 그 후 >> 를 클릭해보면 Components가 있는데 클릭한다. 그러면 React 컴포넌트에 대한 정보가 나온다. 살펴보면 우측 상단에 내 페이지의 컴포넌트들이 보인다. 클릭하면 그 컴포넌트의 영역도 표시해주고, props와 hooks 로 무엇을 받거나 쓰는지도 표시해준다. 변경되는 부분이 있으면 실시간으로 어느..

[React]리액트에서 Redux 써보기

리액트는 많은 컴포넌트를 쓰게 됩니다. 프로젝트가 커지면 커질수록 어떤 값은 다양한 곳에서 쓰일 때가 있는데 그럴 때 Redux(리덕스)를 쓰게 됩니다. 만약 작은 프로젝트라면 단순하게 props로 내려주는게 더 편할지도 모릅니다. 따라서 큰 프로젝트라면 Redux(리덕스)와 같은 라이브러리를 사용하는 것을 추천하고, 작은 프로젝트라면 props로 바로바로 내려줘서 사용하는 것을 추천드립니다. Redux란? props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다. Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다. 그걸 모든 컴포넌트에서 사용할 수 있습니다. (도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다!!!) 이 때문에 엄청 멀리있는 컴포넌트..