FE/React14 4. immer를 사용하여 더 쉽게 불변성 유지하기 이전 포스팅에서 어떻게 컴포넌트를 최적화 하는지에 대해 배웠습니다. 불변성을 유지하면서 상태를 업데이트 하는 것이 정말 중요했죠. 복잡한 상황에서는 값 하나를 업데이트하기 위해 엄청나게 긴 코드가 필요합니다. 일일이 전개연산자를 써주기에도 참 불편하고 가독성도 떨어집니다. 불변성을 더 편리하게 유지하게 해주는 도구가 immer라고 했고, 이제 immer에 대해 자세히 다뤄볼 예정입니다. 4. 1 immer 설치와 사용법 4. 1. 1 준비 새로운 리액트 프로젝트를 만들고, immer를 설치합시다. $ yarn add immer 4. 1. 2 immer를 사용하지 않고 불변성 유지 일단 immer를 안쓰고 불변성을 유지해볼게요. App.js를 다음과 같이 고쳐봅시다. import { useRef, useC.. 2023. 7. 28. 3. 컴포넌트 성능 최적화 우리는 이제 컴포넌트의 성능을 최적화 하는 방법을 알아볼 것입니다. 실습은 다음과 같은 순서로 진행됩니다. 많은 데이터 렌더링 크롬 개발자 도구를 통한 성능 모니터링 React.memo를 통한 컴포넌트 리렌더링 성능 최적화 onToggle, onRemove가 새로워지는 현상 방지 react-virtualized를 사용한 렌더링 최적화 3. 1 많은 데이터 렌더링 이전 실습 내용의 App.js를 다음과 같이 수정해봅시다. function createBulkTodos() { const array = []; for (let i = 0; i { ... }; export default React.memo(TodoListItem); 이제 TodoListItem 컴포넌트는 todo, onRemove, onToggle.. 2023. 7. 26. 2. 실전 프로젝트: TodoList 웹앱 개발하기 이제는 실제로 TodoList를 만들어보겠습니다. 프로젝트 준비, UI구성, 기능 구현의 순으로 개발을 진행할게요. 2.1 프로젝트 준비 todo-app 이라는 이름의 프로젝트를 만들겠습니다. $ npx create-react-app todo-app 이라고 터미널에 입력하면 todo-app 이라는 디렉토리가 생기고, 그 아래에 리액트 프로젝트가 생기는 것 정도는 이제 아실거라고 생각합니다. 스타일링은 Sass를 사용할 것이므로, 다음과 같이 입력하여 Sass도 설치합니다. $ yarn add sass classnames react-icons Prettier를 사용하여 코드 스타일을 정리해보자구요. 최상위 디렉토리에 .prettierrc 파일을 생성하고 다음과 같이 작성합니다. { "singleQuote".. 2023. 7. 19. 1. Hooks React를 공부할 때면 Hook이라는 말이 꼭 나오곤 한다. '아 이런게 존재하는구나~' 정도만 알고 있다가 드디어 공부하게 되었다. 멋사 과제를 진행하면서 useState()라는 것을 사용한 적 있는데, 이것이 Hook의 한 종류라고 한다. 나도 모르는 새 Hook을 쓰고있었다니! 아무튼 이 포스팅에서는 Hook에 대해 알아볼 것이다. useState는 함수 컴포넌트 내에서 상태 관리를 할 수 있게 해주고, useEffect는 렌더링 직후 작업을 설정합니다. 이런식으로, 기존의 함수 컴포넌트에서 할 수 없던 일들을 하게 해줘요. React 내장 Hooks를 배우고 이후에는 커스텀 Hooks를 만들어 보겠습니다. 1.1 useState 함수 컴포넌트 내에서 가변적인 상태를 지닐 수 있게 해줍니다. St.. 2023. 7. 12. 이전 1 2 3 4 다음
