Frontend Study - 1/React (3) 썸네일형 리스트형 React : memo 1) memo 원리 2) memo의 사용 3) memo props의 얕은 비교 4) memo의 두번째 인자 사용 메모는 부모로 부터 받아오는 컴포넌트의 'prop'이 바뀌지 않은 이상 컴포넌트의 리렌더링이 일어나지 않게 한다. 1) memo 원리 컴포넌트를 메모로 감싸게 되면, 해당 컴포넌트의 버전이 메모이징 된다. 부모 컴포넌트가 리렌더링 되었다고 해도 해당 컴포넌트 프롭스 값에 변경이 없다면 리렌더링 되지 않는다. memo는 Component와 arePropsEqual(optional) 두가지 인자를 갖는다. 메모로 컴포넌트를 감쌀 때 컴포넌트를 변경시키는 것은 아니다. 다만 새로운 메모이징된 컴포넌트를 리턴하게 된다. 리액트 컴포넌트는 순수한 렌더링 로직을 가져야 한다. 즉 컴포넌트의 props, .. React : useEffect에 대하여 ! 목차 1. useEffect란? 2. useEffect의 사용 3. useEffect 문제해결 1. useEffect란? useEffect(setup, dependencies?) 유즈이펙트는 외부 시스템과 컴포넌트를 동기화하는 리액트 훅이다. 리액트의 주된 목적인 UI구현을 제외한 나머지 기능들을 side effect라고 하는데 (구독, 타이머, 로깅 fetching 등) 이 때 useEffect를 사용한다. useEffect에 첫번째 인자로 전달된 setup 함수는 렌더링이 화면에 반영된 이후에 실행되게 된다. 두번째 인자로 전달된 dependency([])는 특정값이 변경될 때만 함수가 실행될 수 있게 해준다. setup 함수는 경우에 따라 cleanup 함수를 리턴할 수 있다. 컴포넌트가 처음 DO.. React : state, useState에 대하여, snapshot, batches 목차 1. React state란? state의 필요성 2. useState 1) setState * React batches state updates 2) initial state 3) 오브젝트와 배열의 업데이트 1. state란? state의 필요성 다음페이지를 눌렀을 때 기존 페이지에서 다음 페이지로 이동하기는 것, 장바구니에 담기를 클릭하였을 때 물건이 추가로 장바구니에 담기는 것과 같이 유저 상호작용 결과로 즉각적인 UI 변경이 필요한 경우가 있다. 이것들이 구현되기 위해 컴포넌트들은 우선적으로 기존의 값들을 기억해야 한다. 기존값이 1이라고 했을 때 +1을 하고 화면에 2를 보여주기 위해서는 기존값 '1'에 대한 기억이 필요하다는 것. 리액트에서는 이러한 기억이 필요한 컴포넌트 별 메모리를 가.. 이전 1 다음
