프로젝트 들어가면 얼마나 더 힘들까... 12장. immer를 사용하여 더 쉽게 불변성 유지하기 이놈의 불변성이 자꾸만 우리를 괴롭힌다! React의 특징과도 같은 불변성 유지. 우리는 상태 업데이트의 효율을 위해 이를 반드시 지켜줘야 함을 배웠다. 지금까지는 전개 연산자( ... )와 배열의 내장 함수(concat/filter)를 통해 배열 혹은 객체를 간단하게 복사해 새로운 값을 덮어 씌웠다. 그러나 객체의 구조가 엄청나게 깊어지면..? 이를 업데이트하는 게 굉장히 힘들어진다! 만약 이런 어마 무시한 객체를 수정해야 한다고 생각하면... 기존에 있던 값들은 전개 연산자를 이용해 몽땅 복사해줘야만 한다! object 속 somewhere 속 deep 속 array에 5를 추가하고 싶다면 이런 식으로....

여기는 어디... 나는 누구... 11장. 컴포넌트 성능 최적화 지난번 열심히 만들었던 Todo List! 지음은 사용하는데 전혀 불편함이 없지만... 만약 추가할 데이터가 무수히 많아지면? 체감할 수 있을 정도로 지연이 발생하고 만다. 이를 방지하기 위해 컴포넌트 성능 최적화에 대해 알아볼 예정. 11-1) 많은 데이터 렌더링 하기 랙을 경험할 수 있을 정도로 많은 데이터를 렌더링해 보자! App.js 기존 App 컴포넌트에 createBulkTodos 함수를 추가! 요 녀석의 return값이 usesState의 초깃값에 해당되게 된다! (만약 useState(createBulkTodos())라고 적으면? App이 렌더링 될 때마다 createBulkTodos가 호출되고 만다!) 엄청난 스크롤의 향연...

2021.03.14 - [Frontend/React] - 리액트를 다루는 기술 _ 10장 리액트를 다루는 기술 _ 10장 어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 23life.tistory.com 이어지는 글! 10-3) 기능 구현하기 1. App에서 todos 상태 사용하기 나중에 추가할 일정 항목들은 모두 App 컴포넌트에서 관리! App.js 우선 todos라는 상태를 정의(useState 사용)하고, 이를 TodoLiust의 props로 전달해줬다! 이때 todos 배열 속 객체에는 각 항목의 고유 id, 내용, 완료 여부..

어찌저찌 10장까지 도착! 10장. 일정 관리 웹 애플리케이션 만들기 지난번 JS 만으로 만들었던 To-Do App! 이번에는 React로 도전해보자. 10-1) 프로젝트 준비하기 새로운 앱을 만들어주자! 우리의 친구 Sass도 설치! index.css 프로젝트의 글로벌 스타일 파일이 들어 있는 index.css를 수정! 배경을 회색으로 변경해주자. 10-2) UI 구성하기 총 4개의 컴포넌트를 만들 예정! 1. TodoTemplate : 일정 관리 부분을 보여주는 컴포넌트. 2. TodoInsert ; 새로운 항목 입력하고 추가하는 컴포넌트. 3. TodoLisItem : 각 할 일 항목에 대한 정보 보여주는 컴포넌트. 4. TodoList : 여러 개의 할 일을 보여주는 컴포넌트. 이들을 src/co..

폭풍 같던 Hooks를 지나.... 오늘도 뚠뚠뚠... 9장. 컴포넌트 스타일링 아무리 디자인에 무심한 편이라 해도... 지금껏 만든 컴포넌트들은 눈 뜨고 봐줄 수준도 못된다! 그나마 좀 괜찮은 디자인을 위해 → 컴포넌트 스타일링 방법을 배워볼 예정. 오늘 해볼 방식은 총 4가지! - 일반 CSS : 컴포넌트 스타일링의 가장 기본적인 방식. - Sass : 확장된 CSS 문법을 사용해 CSS 코드를 더욱 쉽게 작성할 수 있도록 도움. - CSS Module : 스타일을 작성 시 CSS 클래스가 다른 CSS 클래스 이름과 절대 충돌하지 않도록 고유 이름을 자동 생성. - styled-components : 스타일을 JS 파일에 내장 → 스타일 작성과 동시에 해당 스타일이 적용된 컴포넌트를 만듦. 오늘도 c..

머리가 핑핑. 7장 컴포넌트의 라이프사이클 메서드는 클래스형 컴포넌트에만 사용된다! 따라서 패스... 그만큼 8장을 더 주의 깊게 봐야지. 8장. Hooks ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org Hooks는 React v16.8에 새로 도입된 기능으로, 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 돕는다! 앞서 맛을 봤던 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하며, 공식 문서에서도 클래스형 컴포넌트보다 함수형 컴포넌트 & Hooks 사용을 권장하는 중! 실습 흐름은... Reac..

끙차끙차... 6장. 컴포넌트 반복 웹 애플리케이션을 만들다 보면, 반복되는 내용을 보여주는 순간이 종종 생긴다. 이때마다 복사 붙여넣기를 사용하는 건... 코드 양도 늘어나고, 비효율적이며, 관리가 제대로 될 리도 없다! 따라서 반복적인 내용을 효율적으로 보여주고 관리하는 법을 익혀볼 예정. 6-1) JS의 map() 함수 얼마 전 배웠던 map() 함수! → 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후, 새로운 배열을 return 한다. 1. 문법 arr.map(callback, [thisArg]) 요 녀석의 파라미터는 다음과 같다! - callback : 새로운 배열이 요소를 생성하는 함수 → currentValue : 현재 처리하고 있는 요소 → index ..

끙끙끙... 5장. ref: DOM에 이름 달기 DOM에 이름을 달라...고 하면 id와 class를 떠올리기 마련! 현 React 파일에도 id가 root라는 div가 존재하며, getElementById를 이용해 id가 root인 요소에 컴포넌트를 렌더링 하란 코드가 존재한다. 이렇게 HTML에서 id를 이용해 DOM에 이름을 다는 것처럼, React 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다! → 이것이 바로 ref(reference)! 근디... 그냥 id를 사용하면 안 되는감? 더보기 React 컴포넌트 안에서도 id를 사용할 수는 있다! 하지만 같은 컴포넌트를 여러 번 사용할 경우... 중복 id가 생기게 되니(나도 실제 그랬고) 잘못된 사용을 한 셈! ref는 전역적으로 작동하지 않..