React - todo프로젝트

git bash 선택 -> yarn add sass classnames react-icons 입력
package.json 클릭해서 설치 됬는지 확인

Sass(Syntactically Awesome Style Sheets)
문법적으로 매우 멋진 스타일시트
는 css전처리기로 복잡한 작업을 쉽게 할 수 있도록 해주고 스타일코드의 재활용성을 높여 줄뿐만 아니라 코드의 가독성을 높여서 유지보수를 더욱 쉽게 해준다.
classnames는 나중에 조건부 스타일링을 좀 더 편하게 하기 위해설치.
react-icons는 svg형태로 이뤄져서 리액트에서 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리.

• .prettierrc 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

• App.css 내용변경

body {
  margin: 0;
  padding: 0;
  background: #e9ecef;
}

• App.js 내용변경
  
• src에 components 폴더 만들기 -> TodoTemplate.js와 TodoTemplate.scss만들기

TodoTemplate 생성

• 결과

TodoInsert 생성

• 아이콘 이미지 찾기
  https://react-icons.github.io/react-icons/
• 결과

TodoListItem 생성하기

TodoList 생성하기

• 할 일 항목이 세개인 이유
  

-------여기까지 디자인------------

내용 작성

• App.js 수정
  
• TodoListItem.js 수정
  
• App.js 수정
  
• 여기까지의 결과
  

취소버튼 기능 활성화

• App.js 수정
  
• TodoListItem.js 수정
  
• 결과
  1,2,3 추가
  
  -버튼 눌러서 2,3 삭제
  

체크박스 기능 활성화

• App.js 수정
  
• TodoList.js 수정
  
• TodoListItem.js 수정
  

느려지는 원인 분석

• 리렌더링이 일어남.

1. 자신이 전달받은 props가 변경 될 때
2. 자신의 state가 바뀔 때
3. 부모의 컴포넌트가 리렌더링 될 때
4. forceUpdate 함수가 실행 될 때

• 지금 상황을 분석해 보면 '할일1' 항목을 체크할 경우 App 컴포넌트의 state가 변경되면서 App 컴포넌트가 리렌더링 된다. 부모 컴포넌트가 리렌더링 되었으니 TodoList 컴포넌트가 리렌더링되고 그 안의 2499개의 TodoListItem컴포넌트들도 리렌더링 된다.
• '할일 1' 항목은 리렌더링 되어야 하는것이 맞지만, 2부터 2500까지는 리렌더링을 안해도 되는 상황인데 모두 리렌더링이 되고 있으므로 느린것

React.memo를 사용하여 컴포넌트 성능 최적화

• 컴포넌트에서 리렌더링을 방지할 때는 클래스형 컴포넌트의 shouldComponentUpdate라는 사이클을 사용하면 된느데 함수 컴포넌트에서는 사이클을 사용할 수 없으므로 React.memo라는 함수를 사용한다.
  이는, 컴포넌트의 props가 바뀌지 않았다면 리렌더링 하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화 해줄 수 있다.
• todos 배열이 업데이트 되면 onRemove, onToggle 함수도 새롭게 바뀌기 때문에 React.memo를 사용하는 것만으로는 컴포넌트 최적화가 되지 않는다.
  onRemove와 onToggle 함수는 배열 상태를 업데이트 하는 과정에서 최신 상태의 todos를 참조하기 때문에 todos 배열이 바뀔때마다 함수가 새로 만들어진다.
• 이렇게 함수가 계속 만들어지는 상황을 방지하는 방법이 두가지가 있다.
  1) useState의 함수형 업데이트 기능을 사용하는것.
  2) useReducer를 사용하는 방법

const [number, setNumber] = useState(0);
// prevNumbers는 현재 number 값을 가리킨다.
const onIncrease = useCallback(
() => setNumber(prevNumber => prevNumber + 1),
[],	//함수형 업데이트
);

함수형 업데이트를 적용하여 수정

• App.js 수정
  
• TodoListItem.js
  
• 체크를 했을때 성능 변화 확인 (chrome react developer tool을 이용한)
  

useReducer를 적용하여 수정

reducer: 상태를 다양하게 처리할 수 있다.
dispatch: 액션객체를 담아 reducer한테 전달
액션객체 형태는 type:''; 예)type:'INCREMENT';

• App.js 수정
  
• TodoListItem.js 수정
  
• useReducer로 수정했을때 성능 변화 확인
  

react-virtualized를 사용한 렌더링 최적화

• react-virtualized library 설치 방법
  
• 맨처음 렌더링 될때 2500개 컴포넌트 중 2491 컴포넌트는 스크롤하기 전에는 보이지 않음에도 불구하고 렌더링 이 이루어진다 -> 비효율적
• react-virtualized를 사용하면 리스트 컴포넌트에서 스크롤되기 전에 보이지 않는 컴포넌트는 렌더링하지 않고 크기만 차지 하게끔 할 수 있고 만약 스크롤되면 해당 스크롤 위치에서 보여줘야 할 컴포넌트를 자연스럽게 렌더링 시켜 낭비되는 자원을 아낄 수 있다.
• List컴포넌트를 사용하여 TodoList컴포넌트의 성능을 최적화 시키겠다
  List 컴포넌트를 사용할 때는 해당 리스트의 전체 크기와 각 항목의 높이, 각 항목을 렌더링할때 사용해야 하는 함수, 배열을 props로 넣어줘야 한다. 그러면 이 컴포넌트가 전달받은 props를 사용하여 자동으로 최적화 해준다.
• App.js 수정
  
• TodoListItem.js 수정
  
• TodoList.js 수정
  
• TodoListItem.scss 수정
  
• 성능 변화 확인