Hook을 사용한 함수형 리액트에서는 useState와 값을 전달하는 함수로 상태 변수들을 관리했다. useState는 반드시 컴포넌트 내부에 선언되어 있어야 하고, 하나의 상태 변수에 대해 여러개의 함수를 정의해서 연산한다. 단순한 구조라면 useState가 간단하지만, state와 관련된 부분을 재 사용해야하거나, 하나의 상태 변수에 관여하는 연산이 많아질 경우 코드의 가독성이 떨어지게 된다. 이를 위해 useReducer를 사용한다. useReducer는 하나의 상태 변수에 관여하는 함수들을 하나로 묶고, 다른 컴포넌트에서도 재 사용 할 수 있도록 해준다. 또, 상태 변수의 관리는 controller에 해당하는 부분이므로 별도의 파일에 useReducer를 정의해서 사용한다면 MVC 형태로도 구축 ..

문제 설명 민호는 다단계 조직을 이용하여 칫솔을 판매하고 있습니다. 판매원이 칫솔을 판매하면 그 이익이 피라미드 조직을 타고 조금씩 분배되는 형태의 판매망입니다. 어느정도 판매가 이루어진 후, 조직을 운영하던 민호는 조직 내 누가 얼마만큼의 이득을 가져갔는지가 궁금해졌습니다. 예를 들어, 민호가 운영하고 있는 다단계 칫솔 판매 조직이 아래 그림과 같다고 합시다. 민호는 center이며, 파란색 네모는 여덟 명의 판매원을 표시한 것입니다. 각각은 자신을 조직에 참여시킨 추천인에 연결되어 피라미드 식의 구조를 이루고 있습니다. 조직의 이익 분배 규칙은 간단합니다. 모든 판매원은 칫솔의 판매에 의하여 발생하는 이익에서 10% 를 계산하여 자신을 조직에 참여시킨 추천인에게 배분하고 나머지는 자신이 가집니다. 모..

이미지의 바깥 선을 따라 그림자를 넣고자 할 때, BoxShadow로는 이미지의 바깥선이 아닌 위젯에 그림자를 생성한다. 의도한대로 디자인하기 위해 패키지화 된 아래의 코드를 삽입해보자. 아래의 코드는 본래 패키지이지만 단순한 코드이므로 패키지로 추가하지 않고 코드로 빼서 사용하자. simple_shadow | Flutter Package A customizable shadow for any widget pub.dev library image_shadow; import 'dart:ui'; import 'package:flutter/material.dart'; class ImageShadow extends StatelessWidget { final Widget child; final double opaci..

useMemo를 사용해 렌더링에 따라 불필요한 함수가 재호출 되지 않도록 했고, useCallback을 사용해 렌더링에 따라 불빌요하게 함수가 재정의되지 않도록 했다. 이번에는 불필요한 렌더링을 막아보자. React.memo //선언 방법1 const ListContainer = React.memo(({ element, active, onRemove, onEdited }) => { ... } //선언 방법2 export default React.memo(ListContainer); 컴포넌트를 React.memo()로 감싸는 것만으로도 불필요한 렌더링을 막을 수 있다. 부모 컴포넌트에서 setState가 발생하면 자식 컴포넌트들이 모두 렌더링 되는데, 이때 props가 변경되지 않았다면 렌더링 하지 않는다..

useMemo useMemorize를 줄여 useMemo라고 한다. useMemo는 useEffect가 특정 변수 값이 변경되면 호출되듯 특정 변수 값이 변경되어야만 렌더링이 되게끔 하는 Hook이다. setState가 발생하면 해당 컴포넌트와 하위 컴포넌트가 모두 리렌더링된다. 이 때, 연산을 거쳐 값을 출력하는 경우 값이 바뀌지 않더라도 연산이 리렌더링 마다 발생하게 된다. 불필요한 연산이 발생하는 것이다. 이를 위해 useMemo를 사용해, 함수의 불필요한 호출을 막는다. 단, 렌더링이 이루어지지 않는 것은 아니다. 이는 컴포넌트 최적화가 필요한 부분이다. const userCount = () => { console.log("갱신"); return userList.length; }; return( ..