Front-End: Web/React.js (17) 썸네일형 리스트형 [React] 엘리먼트 리스트에 key가 왜 필요해? key 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 attribute. **React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다.** 자식에 대한 재귀적 처리 React는 기본적으로 기존 트리와 이후 트리의 자식들을 동시에 보고, 차이점이 있으면 DOM을 변경한다. 예로 들어서 자식의 끝에 엘리먼트를 추가하면 변경은 잘 작동한다. first second first second third React는 두 트리에서 first 가 일치하는 것을 확인하고, second가 일치하는 것을 확인한다. 그리고 마지막을 third를 트리에 추가한다. 문제점 하지만 위와 같이 단순히 리스트 맨 아래에 추가하면 괜찮지만, 리스트 맨 앞에 엘리먼트를 추가하는 경우에는 성능이 좋지 않다. 예를 들면 .. [코딩애플] 성능개선 3: useTransition, useDeferredValue automatic batching 기능 state 변경 함수가 쭉 작성되어 있다 하자. state1변경() state2변경() state3변경() state가 변경될 때마다 재렌더링이 일어난다고 했으니 재렌더링이 3번 일어날까? 아니다. 맨 마지막인 state3변경()에서만 재렌더링이 1회 일어난다. 이걸 batching이라 한다. 뭉쳐서 실행되기 때문이다. 예외도 있다. 리액트 17버전인 경우, ajax, setTimeout과 같은 비동기 함수 내부에서 위 코드를 작성했다고 하자. 그럼 batching이 일어나지 않고 각각 재렌더링이 일어나서 총 3번의 재렌더링이 일어난다. 하지만 리액트 18버전부터는 state가 변경되는 코드가 어디에 있던지 batching이 잘 일어나게 되었다. 그래서 비동기 함수.. [코딩애플] 성능개선 2: 재렌더링 막는 memo, useMemo memo 자식 컴포넌트의 재렌더링 막으려면 memo 버튼을 누르면 count가 +1씩 되는 버튼을 생성하자. 🕹️Cart.js import { useState } from 'react'; function Child(){ return 자식임 } function Cart(){ const [count, setCount] = useState(0); return( setCount(count+1)}>+ ) } 이제 버튼을 누를 때마다 Cart 컴포넌트가 재렌더링이 된다. Cart 컴포넌트가 재렌더링되므로 와 같은 자식 컴포넌트들도 전부 재렌더링이 된다. 재런데링되는지 콘솔로 확인해보자. function Child(){ console.log('재렌더링됨') return 자식임 } 버튼을 누를 때마다 콘솔이 찍힌다. .. [코딩애플] 성능개선 1: 개발자 도구 & lazy import 개발자 도구 react developer tools 코드를 작성했는데 props 보냈는데 왜 출력 안됨? 왜 이미지 안 나옴? 이런 에러가 발생할 때마다 코드를 확인해도 좋지만 개발자 도구를 이용하자. Component: 컴포넌트 구조 파악 가능 개발자 도구에는 Element 탭이 있다. **Element** : html/css 검사 가능 근데 이걸로 불만족스럽다. 왜냐하면 컴포넌트로 만든 것들도 일반 html로 변환해서 보여주기 때문이다. 그래서 컴포넌트 구조를 미리 보고 싶다! 하면 크롬 웹 스토어에서 '**react developer tools**'를 설치하자. 설치하고 개발자 도구의 **Components** 탭에 들어가면 우리 사이트를 컴포넌트를 구조화해서 보여준다.  다음과 같은 것들을 고려하여 코드를 짤 수도 있겠지만 만약 이게 귀찮다! 하면 react-query 라이브러리를 이용하자. react-query를 사용하면 위의 것들을 쉽게 구현할 수 있다. 어디에 사용할까? 하지만 항상 유용한 건 아니다. 실시간 SNS라던지, 코인 거래소처럼 **실시간으로 데이터를 계속 가져와야하는 사이트에 쓰면 굿**이다. 대부분 사이트들은 실시간 데이터를 가져올 필요는 없으므로 알아서 판단하고 필요에 따라 라이브러리를 사용하자. 설치하기 다음 명.. [코딩애플] Redux 사용해서 쉽게 state 관리하기! Redux 사용 이유 컴포넌트 간 state 공유가 편해진다 -> props 전달할 필요가 없다. Q. 장바구니 state가 App, Detail, Cart 컴포넌트에 필요하다면 어디에 만들어야할까? A. 최상단 컴포넌트에. 그런데 props를 일일히 전달해주기 귀찮다. Redux를 사용하면 컴포넌트들이 props 없이 state를 공유할 수 있다. redux를 설치하고 store.js 파일을 생성해서 그 안에 모든 state를 보관할 수 있고, 모든 state를 어느 컴포넌트에서든 가져다 쓸 수 있다. 사이즈가 큰 프로젝트는 Redux가 필수이므로, 리액트 구인 시 대부분 Redux를 요구하니 알아두자! Redux Toolkit 설치 설치 전 주의사항 package.json에서 'react'와 'rea.. [제로초] ReactJS Chpater 1. 리액트 시작하기 1. 리액트를 왜 쓰는가 React의 미래 현재 한국에선 React.js가 Vue.js보단 대세! 앞으로 10년 정도는 더 사용될 것 React 사용하는 이유 Single Page Application(SPA) 전통적인 웹은 Multiple Page Application(MPA). 문서같은 페이지(공식문서)는 React를 사용할 필요없이 MPA로 만들면 됨. 이전에는 JQuery, JSP로 백엔드 개발자가 프론트엔드를 함께 개발했는데, 현재는 프론트에 다양한 기능들이 추가되면서 프론트엔드 개발자가 추가되었음. 지메일 ➡️ 첫 웹 애플리케이션. 웹 사이트가 아니라 하나의 애플리케이션이라는 느낌. 웹에서 사이트 뿐만 아니라 다양한 애플리케이션(워드, 파워포인트, ... 등 사용 가능)이 나옴 전통적인 웹보다.. memo, useMemo, useCallback, useRef memo : PureComponent와 비슷. props 값이 변경될 때만 실행됨 => 매번 실행/생성되지 않고, 캐시에 저장하고 이를 사용함 useRef : 일반 값을 기억함 useMemo : 복잡한 함수의 결과값을 기억함 useCalback : 함수를 기억함 하지만 너무 기억을 잘하기 때문에 까먹어야하는 경우가 있을 수 있음. 그럴 때 안에서 쓴 state를 [두번째 인자] 안에 작성해줌. (다시 새로 실행되도록 작성) 그렇게 안하면, 첫 번째로 실행된 값을 평생 기억하게 됨 (+) 반복문에서 주로 최적화 사용 (+) 전체가 리렌더링되어도 초록색까진 괜찮음. 근데 전체가 빨간색으로 뜨면 최적화 필요함 이전 1 2 3 다음
