리액트 라우터는 클라이언트 사이드에서의 라우팅을 간단하게 구현하도록 도와준다. >// 라이브러리 설치 $ yarn add react-router-dom 1. 라우터 적용 프로젝트 index.js파일에서 react-router-dom의 BrowseRouter 컴포넌트를 사용해서 렌더링 하고자 하는 APP 컴포넌트를 감싸면 된다. 해당 컴포넌트는 페이지를 새로고침 하지 않으면서 주소를 변경한다. 2. Route 컴포넌트로 주소 설정 (1) 규칙 Route 컴포넌트를 이용하면, url 경로에 따라 다른 컴포넌트를 보여줄 수 있다. 주소에 대응하는 컴포넌트를 설정하는 방법은 아래와 같다. > 만약 홈의 주소를 '/'로 설정하고 프로필의 주소를 '/profile'로 설정한다면 '/'이 겹치기 때문에 프로필 페이지에서 홈의 내용도 보일 것이다. 따라서 홈의 주소 규칙에 exact = {true}를 추가해줘야 한다. 여기서는 예시로 Home 페이지와 A

컴포넌트에서 상태를 업데이트 할때는 불변성을 유지하면서 상태를 업데이트 하는것이 중요하다. 불변성이 지켜지지 않으면 객체 내부의 값이 바껴도 감지를 못하기 때문이다. >// immer 설치 $ yarn add immer 여태까지는 기존의 값을 유지하면서 원하는 값을 새로 지정하지 위해 전개 연산자(...)를 사용했는데 사용하기에 좀 번거롭다. 또한 전개 연산자를 사용해서 객체나 배열 내부의 값을 복사하면 얕은 복사를 하기 때문에 내부의 값을 완전히 새로 복사하는것이 아니다! 배열이나 객체의 구조가 복잡할때 코드가 복잡해지고 작성하는것이 번거운데, 이러한 번거로운을 해결해주는 것이 immer 라이브러리다. 1. produce 함수 immer 라이브러리의 produce 함수는 두가지 인자를 받는다. 첫번째 파라미터는 수정하고 싶은 상태, 두번째 파라미터는 업데이트 함수이다. 두번째 파라미터로 업데이트 함수를 전달할 경우, 전달하는 업데이트 함수에서 원하는 값을 변경

10장에서 만들었던 To-do App에서 데이터가 많아지면 애플리케이션이 느려질 것이다. App.js파일을 좀 수정해서 많은 데이터를 렌더링 해보자! 1. 많은 데이터 렌더링 (1) useState의 기본값을 함수로 #createBulkTodos는 반복문을 통해 많은 데이터를 추가하는 함수이다. useState의 기본값을 createBulkTodos()로 지정하면, 리렌더링 될때마다 createBulkTodos함수가 실행되지만 괄호 없이 createBulkTodos로 지정하면, 처음 렌더링 될때만 createBulkTodos 함수가 실행된다. 2. 느려지는 원인 분석 컴포넌트가 리렌더링 되는 경우는 아래와 같다. 전달받은 props가 바뀔 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 forceUpdate 함수가 실행될 때 따라서 컴포넌트가 불필요하게 리렌더링 되는걸 방지해야 한다. 3. 컴포

컴포넌트 선언방식은 클래스형 컴포넌트와 함수형 컴포넌트가 있다. rcc + enter -> 클래스형 컴포넌트 작성 코드 생성 rsc + enter -> 함수형 컴포넌트 작성 코드 생성 1. 클래스형 컴포넌트 render 함수가 무조건 있어야 한다. 2. 함수형 컴포넌트 함수를 작성할때 두 가지 방법이 있다. 두 가지 방법은 아예 동일한것이 아니므로 주의! function 키워드 사용 자신이 종속된 객체를 this로 가리킨다. 화살표 함수 사용 자신이 종속된 인스턴스를 가리킨다. 함수를 매개변수로 전달할때 유용 3. props 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 컴포넌트를 불러서 사용하는 부모 컴포넌트에서 설정할 수 있다. (1) 비구조화 할당 문법 구조 분해 문법이라고도 불린다. 함수의 파라미터 부분에도 사용할 수 있다. (2) propTypes props의 타입을 지정할

1. 코드 이해하기 (1) 번들러 import 구문은 원래 브라우저에는 없던 기능인데, 브라우저가 아닌 환경에서 js를 실행할 수 있도록 node.js에서 지원해주는 기능이다. 이러한 기능을 브라우저에서도 사용할 수 있게 번들러를 사용하는데, 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을 생성해준다. 이 책의 프로젝트에서는 src/index.js로 필요한 파일들을 다 불러서 번들링한다. 리액트 프로젝트에서 번들러로 주로 웹팩을 사용한다. svg, css 파일을 불러오는 것은 웹팩의 로더라는 기능이 담당하는 것이다. 웹팩의 로더 같은 것도 원래 직접 설치해야 하는데, create react-app 명령어가 알아서 해줬기 때문에 따로 설정할 필요가 없다. (2) 함수형 컴포넌트 ![](https://images.velog.io/images/jooyeon/post/718a1e0c-d355-4599-aa1

1. 리액트 이해 컴포넌트는 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. (1) 초기 렌더링 render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 더불어, 뷰가 어떻게 생겼고 어떻게 작동하는지 객체를 반환하는 함수이다. render() 함수를 통해 초기 렌더링을 다루는데, 이때 두 가지 절차를 따른다. 문자열 형태의 HTML 코드를 생성 특정 DOM에 해당내용을 주입 (2) Re렌더링 (조화과정) 뷰에 수정사항이 생겼을 때 조화과정을 거친다. 컴포넌트는 데이터를 업데이트 했을 때 새로운 데이터를 가지고 render()함수를 다시 호출한다. render()함수의 반환값을 바로 DOM에 적용하는 것이 아니라, 이전 render()함수가 만든 컴포넌트 정보와 현재 render() 함수가 만든 컴포넌트 정보를 비교하여 둘의 차이만 업데이트 하는 것이다. 2. 리액트 특징 (1) Dom DOM이