프론트엔드 (54) 썸네일형 리스트형 JavaScript Sec05_12 컴포넌트 트리에 데이터 공급(Context API) 부모에서 자식으로만 데이터를 전달하는 단방향 데이터 흐름을 지키는 React의 특성 때문에 props drilling이 일어난다.props 이름 바꾸기도 어렵고 코드 작성과 수정에 악영향을 끼친다. Context API React에서 문맥 관련 코드를 쉽게 작성할 수 있도록 돕는 API Context 생성 const MyContext = React.createContext(defaultValue); Context Provider를 통한 데이터 공급 {/* 이 context안에 위치할 자식 컴포넌트들*/} JavaScript Sec05_11 복잡한 상태 변화 로직 분리 (useReducer) 상태 변화 함수들은 컴포넌트 내에만 존재해야 했음 ⇒ 컴포넌트의 코드가 길어지면 오류가 생길 수 있음 ⇒ useReducer를 이용햐여 상태 변화 로직 컴포넌트 바깥으로 분리하자 useReducer useState를 대체할 수 있는, react의 상태 관리를 돕는 React의 Hooks useState를 사용하듯 배열을 반환한다. 0번째 인덱스 : state 1번째 인덱스 : dispatch (상태를 변화시키는 액션을 발생시키는 함수) dispatch함수를 호출하면서 type이라는 프로퍼티가 있는 객체를 전달해야 한다. (이 객체를 action 객체라고 한다.) useReducer의 첫 번째 파라미터 : reducer라는 함수 (reducer는 dispatch가 상태 변화를 일으키면 그 일어난 상태 변화.. 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() .. 이전 1 2 3 4 ··· 7 다음
