본문 바로가기

전체 글

 (114)
JavaScript Sec05_10 최적화 완성 diaryitem을 하나씩 지우거나 새롭게 생성하는 경우 → state가 변화하여 App 컴포넌트가 리렌더 → App컴포넌트가 리렌더 되면서 onEdit함수, onRemove함수가 새롭게 생성되어 prop으로 전달됨 → React.memo로 함수를 최적화해도 prop이 바뀌므로 DiaryItem 컴포넌트가 리렌더 → 공간 낭비! ⇒ onEdit함수와 onRemove함수에 useCallback과 함수형 업데이트를 사용한다.
JavaScript Sec05_9 최적화 3 - useCallback 컴포넌트 코드가 길 때 React.memo를 이렇게도 사용할 수 있음 useCallback 일기 데이터의 상태가 변화할 때마다 App 컴포넌트가 리렌더 되고 그에 따라 자식 컴포넌트인 DiaryEditor 컴포넌트도 리렌더 된다. 이 때 DiaryEditor에 useMemo를 씌워도, 비원시타입 비교 시 얕게 비교하는 React.memo의 속성 때문에 App 컴포넌트가 리렌더 될 때마다 onCreate함수도 다시 만들어지고 그 새롭게 만들어진 onCreate 함수가 prop으로 Editor 컴포넌트에게 전달되므로 Editor 컴포넌트가 리렌더 된다. ⇒ onCreate 함수가 재생성되지 않아야만 DiaryEditor 컴포넌트를 최적화 할 수 있다! useEffect, useMemo와 비슷하게 첫번째 인자..
JavaScript Sec05_8 최적화 2 - 컴포넌트 재사용 React.memo 함수형 컴포넌트에게 업데이트 조건을 걸자 이 경우 부모 컴포넌트가 리렌더 되기 때문에 자식 컴포넌트들이 리렌더 된다. 하지만 count 상태만 변화했기 때문에 TextView는 리렌더 될 필요가 없다. 이렇게 업데이트 조건을 걸어 불필요한 컴포넌트 재사용을 막는다. React.memo React.memo는 고차 컴포넌트이다. 고차 컴포넌트 : 파라미터로 컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 재사용이 필요한 함수를 React.memo로 감싸준다. 이렇게 React.memo로 감싸면 prop으로 전달된 text가 변하지 않으면 리렌더링을 하지 않게 된다. const MyComponent = React.memo(function MyComponent(props) { /* props를..
JavaScript Sec 05_7 최적화 1 - 연산 결과 재사용 (useMemo) Memorization 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억 해 두었던 데이터를 반환 시키게 하는 방법 이 때 콘솔에는 “일기 분석 시작”이 2번 출력 된다. App 컴포넌트가 mount 될 때 한 번, API를 호출하여 받아온 데이터로 인해 data state가 변할 때 리렌더 되어 두 번 일기 수정하기 버튼을 눌러 내용을 수정하고 수정 완료 버튼을 누를 때마다 data state가 변화해 App 컴포넌트가 리렌더 되는데, 이 때 전체 일기, 기분 좋은 일기, 기분 나쁜 일기, 기분 좋은 일기 비율들은 변하지 않는데도 계속 똑같은 연산을 반복한다. (콘솔 창에 ‘일기 분석 시작’이 계속 찍히는 것을 통해 알 수 있다.) ⇒ UseMemo 를 통..
JavaScript Sec 05_6 React Developer Tools 리액트 개발 시 생산성을 높여주는 크롬의 확장도구
JavaScript Sec05_5 React에서 API 호출하기 JSONPlaceholder - Free Fake REST API (typicode.com) → Resource → content에서 데이터 가져오기 (링크 복사 jsonplaceholder.typicode.com/comments) API 호출 내장함수 fetch를 사용하여 가져오고자 하는 데이터의 주소를 인자로 넣는다. fetch가 반환하는 값은 promise 객체이며 then 함수 인자의 콜백함수는 API를 정상적으로 가져왔을 때 실행된다. res는 가져온 API 객체 그 자체이고 json()을 이용하면 json 데이터를 담은 객체 배열을 반환한다. res.slice(0,20) res에 담긴 json 형식의 객체 배열 데이터를 인덱스 0부터 19까지로 자른다. res.slice(0,20).map() ..
JavaScript Sec05_4 React에서 LifeCycle 제어하기 (useEffect) LifeCycle LifeCycle을 제어한다? 컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 어떤 작업을 수행시킬 수 있다는 것을 의미한다. (ex. 초기화 작업, ex.예외 처리 작업, ex. 메모리 정리 작업) 클래스형 react Component와 함수형 react Component 지금까지 우리가 사용한 것은 함수형 컴포넌트 오직 클래스형 컴포넌트만 lifecycle를 제어하는 메소드와 state 기능을 사용할 수 있는데, use 키워드를 이용하여 클래스형 컴포넌트만 근본적으로 갖고 있는 기능을 함수형 컴포넌트에서 낚아채서 사용할 수 있다. (React Hooks) useEffect react의 lifecycle을 제어하는 메소드를 가져올 수 있는 기능 의존성 배열이 변화하는 순간 콜백함수가..
JavaScript Sec 05_3 React에서 배열 사용하기 map 함수를 이용해 리스트를 작성하기 dummylist를 prop으로 전달하여 DiaryList 컴포넌트에서 diaryList라는 이름으로 dummylist 배열을 사용한다. map함수를 이용하여 dummylist 배열의 요소 하나 하나씩 접근한다. 이 요소는 id, author, content, emotion, date를 담고 있는 객체이다. DiaryItem 컴포넌트에 이 객체 요소를 prop으로 전달한다. DiaryItem 컴포넌트에서는 prop으로 전달받은 객체들을 비구조화 할당을 이용해 각각 키를 이름으로 하는 변수로 저장하여 사용한다. 데이터 추가하기 data는 위에서 아래 방향으로 흐르고 event는 역방향으로 흐른다. DiaryEditor와 DiaryList에서 사용할 공통의 데이터를 u..

티스토리툴바