Redux (7) 썸네일형 리스트형 [Redux] 7. 리덕스 useSelector 최적화 🙏 이번 장의 목표 useSelector로 컴포넌트를 최적화하는 방법을 배운다. 컴포넌트 리렌더링 여부 확인하기 먼저, 컴포넌트의 리렌더링 여부를 확인하기 위해 리액트 개발자 도구를 설치한다. 👉 리액트 개발자 도구 설치하기 도구를 설치한 뒤 브라우저에서 개발자 도구를 실행하면 다음과 같이 리액트 탭이 생성된 것을 확인할 수 있다. 여기서 왼쪽에 있는 톱니바퀴 버튼을 누르면 다음과 같이 설정 창이 화면에 표시된다. 설정 창에서 Highlight updates~~~를 체크해주면~?! 컴포넌트가 리렌더링될때마다 테두리가 변경되는 것을 확인할 수 있다. 투두리스트 페이지 살펴보기 이전에 만들었던 투두리스트 페이지를 살펴보면서 컴포넌트 최적화 방법에 대해 알아보자 페이지에서 +, - 버튼을 눌러보면 할 일 목록.. [Redux] 6. 리덕스로 투두 리스트(TodoList) 구현하기 리덕스로 투두리스트를 만들어보자!! 프리젠테이셔널 컴포넌트 구현 먼저, Todos라는 프리젠테이셔널 컴포넌트를 구현해보자. components 디렉터리에 Todos.js 파일을 생성한다. Todos에는 TodoItem, TodoList, Todos 컴포넌트를 작성한다. 👉 컴포넌트를 여러개로 분리하면 컴포넌트의 리렌더링 성능을 최적화할 수 있다. components/Todos.js 먼저, 다음과 같이 import 문을 작성한다. import React, { useState } from 'react'; 1. TodoItem 컴포넌트 할 일 목록 하나를 렌더링하는 컴포넌트 할 일을 완수했다면 텍스트 가운데에 줄이 그어지고 해당 컴포넌트를 클릭했을 경우에 onToggle 함수가 호출된다. const TodoI.. [Redux] 5. 리덕스 개발자도구 적용하는 방법 리덕스 개발자 도구를 사용하게 되면 다음과 같은 장점들이 존재한다. 1. 현재 스토어의 상태를 확인할 수 있다 2. 현재까지 어떤 액션들이 디스패치 되었는지 확인할 수 있다 3. 액션에 따라 상태가 어떻게 변화됐는지 확인할 수 있다 4. 액션을 직접 디스패치 할 수 있다 이렇게 많은 장점들이 존재하기 때문에 리덕스 개발자 도구를 안 쓸 이유가 없다!! 리덕스 개발자 도구를 프로젝트에 적용하는 과정은 다음과 같다. 1. 크롬 웹 스토어에서 리덕스 개발자 도구 설치 2. 프로젝트에 redux-devtools-extension을 설치 👉 터미널창에 다음과 같이 명령어 입력 $ yarn add redux-devtools-extension 3. 기존의 index.js를 다음과 같이 수정한다. - redux-dev.. [Redux] 4. 리덕스로 카운터 구현하기 리덕스를 이용해 카운터 기능을 구현해보자. 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값이나 함수를 props로만 받아와서 사용하는 컴포넌트를 말한다. src 디렉터리에 components 디렉터리를 만들고, 그 안에 Counter.js를 생성한 뒤에 다음과 같이 코드를 작성한다. Counter.js import React from 'react'; function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) { const onChange = e => { onSetDiff(parseInt(e.target.value, 10)); }; return ( {number} + - ) } ex.. [Redux] 3. 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보자! 리덕스 모듈은 다음과 같은 항목들이 모두 들어있는 자바스크립트 파일이다. 1. 액션 타입 2. 액션 생성함수 3. 리듀서 위 항목들을 각각 다른 파일에 저장할 수도 있다. 리덕스 공식 GitHub 레퍼지토리에 등록되어있는 예제 프로젝트를 보면 아래와 같이 코드가 분리되어 있다. actions index.js reducers todos.js visibilityFilter.js index.js 구조를 보면 액션과 리듀서가 다른 파일에 정의되어 있는 것을 알 수 있다. 하지만, 코드들이 꼭 분리되어야 하는 것은 아니다. 코드들이 다른 디렉터리에, 다른 파일에 분리되어 있으면 개발할 때 꽤 불편할 수도 있다. 그래서 우리는 리듀서와 액션 관련.. [Redux] 2. 리덕스 설치 및 예제 실행 리덕스 설치하는 방법 먼저, cmd에 다음과 같은 명령어를 입력해 새로운 프로젝트를 생성한다. $ npx create-react-app practice-redux 이후 생성된 디렉터리에 redux 라이브러리를 설치한다. $ cd practice-redux $ yarn add redux 리덕스 사용해보기 practice-redux 디렉토리의 src 폴더에 exercise.js 파일을 생성한 후 해당 파일에 'Hello!'를 출력하는 console문을 작성한다. exercise.js console.log('Hello!'); 이후 index.js에서 다음과 같이 exercise 파일을 불러온다. index.js import React from 'react'; import ReactDOM from 'react-.. [Redux] 1. 리덕스의 정의 및 특징 리덕스의 정의 리액트에서 가장 많이 쓰이는 상태(state)관리 라이브러리 리덕스가 필요한 이유 리액트로 프로젝트를 진행하다 보면 무조건 state와 props를 사용하게 되는데 컴포넌트끼리 state를 전달하고 관리하기가 쉽지 않다. 만일, 컴포넌트가 (부모)App- Sample1 - Sample2(자식) 순으로 있다면 App의 state를 Sample2에서 사용하기 위해서는 다음과 같은 과정이 필요하다. 1. App의 state를 Sample1에게 props로 넘겨준다 2. Sample1의 props를 다시 Sample2에게 props로 넘겨준다 컴포넌트가 3개밖에 없을 때에도 2단계의 과정이 필요한데 프로젝트 규모가 더 커지고 컴포넌트 개수가 늘어나게 된다면 더 많은 단계가 필요해져 프로젝트가 상당.. 이전 1 다음
