[TDL] 08/04 Today's-Done-List

- 드림 코딩 REACT 강의

• 디렉터리 구조에서 public은 static 한 소스들, src는 dynamic 한 소스들
• template 폴더를 생성하고 다른 폴더에 복사할 경우 cmd 명령어

/* cp -R template폴더 복제할폴더명 */
cp -R template to-do-list

• 최상단의 파일을 public의 index.html 안 div태그의 root.
  즉, dom과 연결해주는 것이 react-dom

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

• React.StrictMode를 사용하면 이름 그대로 더 엄격하게 에러 등을 체크함.
  프로젝트 안에서 StrictMode를 사용해왔어도, 배포 시에는 적용되지 않음.

---

State

• state - 컴포넌트 안에서 우리가 정의한 컴포넌트의 state 오브젝트
• props - 컴포넌트 밖에서 주어지는 데이터
  컴포넌트의 재사용을 높이기 위해서.

---

컴포넌트 내의 state 값에 의존해서 계산한 값을 setState(updated)로 설정하기보다는,
setState(prevState => newState) 이렇게 이전 state 값을 받아서 그걸로 업데이트되는 state값을 만드는 함수를 호출하는 것이 좋다.

• setState(newState)  // 새로운 state 오브젝트를 인자로 바로 받는 함수
• setState(prevState => { return newState; }) // 이전 state를 받아서 그걸로 계산해서 새로운 state를 리턴하는 함수를 인자로 받는 함수

---

리액트에서는 상태를 직접적으로 그 어떤 경우에도 절대! 수정하면 좋지 않은 이유

• setState는 비동기적으로 동작한다
  • 그래서 state를 직접 수정하면서 여러 번 상태를 업데이트할 경우, 이전 업데이트 내용이 다음 업데이트 내용으로 덮어 쓰일 수 있고, 예상치 못한 순간에 버그가 발생할 수 있는 위험이 있다.
• PureComponent에서 정상적으로 동작하지 않는다
  • Purecomponent는 현재 컴포넌트가 가지고 있는 상태와 업데이트해야 하는 새로운 상태의 레퍼런스를 비교해서 업데이트가 필요한 경우에 해당 컴포넌트의 render 함수를 호출해주는데,
    state를 직접 수정할 경우, 비교해야 하는 대상의 레퍼런스가 동일해지므로 업데이트할 필요가 없다고 판단하여 render함수를 호출해주지 않는다.
• 예상치 못한 문제가 발생할 수 있기 때문에 불변성을 유지해주자.

 

---

React.Purecomponent

클래스 컴포넌트

shouldComponentUpdate()

shouldComponentUpdate()를 사용하면 현재 state 또는 props의 변화가 컴포넌트의 출력 결과에 영향을 미치는지 여부를 React가 알 수 있습니다. 기본 동작은 매 state 변화마다 다시 렌더링을 수행하는 것이며, 대부분의 경우 기본 동작에 따라야 합니다.

shouldComponentUpdate()는 props 또는 state가 새로운 값으로 갱신되어서 렌더링이 발생하기 직전에 호출됩니다. 기본값은 true입니다. 이 메서드는 초기 렌더링 또는 forceUpdate()가 사용될 때에는 호출되지 않습니다.

이 메서드는 오직 성능 최적화만을 위한 것입니다. 

현재, shouldComponentUpdate()가 false를 반환할 경우 render()는 호출되지 않습니다.

---

React.memo

const MyComponent = React.memo(function MyComponent(props) {
  /* props를 사용하여 렌더링 */
});

React.memo는 고차 컴포넌트(Higher Order Component)입니다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면, React.memo를 호출하고 결과를 메모이지(Memoizing)하도록 래핑 하여 경우에 따라 성능 향상을 누릴 수 있습니다.
즉, React는 컴포넌트를 렌더링 하지 않고 마지막으로 렌더링 된 결과를 재사용합니다.

React.memo는 props 변화에만 영향을 줍니다. React.memo로 감싸진 함수 컴포넌트 구현에 useState, useReducer 또는 useContext 훅을 사용한다면, 여전히 state나 context가 변할 때 다시 렌더링 됩니다.

props가 갖는 복잡한 객체에 대하여 얕은 비교만을 수행하는 것이 기본 동작입니다.
다른 비교 동작을 원한다면, 두 번째 인자로 별도의 비교 함수를 제공하면 됩니다.

function MyComponent(props) {
  /* props를 사용하여 렌더링 */
}
function areEqual(prevProps, nextProps) {
  /*
  nextProps가 prevProps와 동일한 값을 가지면 true를 반환하고, 그렇지 않다면 false를 반환
  */
}
export default React.memo(MyComponent, areEqual);

---

오후 회고 (만족도: 5)

요새 너무 늦게 자고 늦게 일어나서, 하루 밤을 새워서 패턴을 바꿔보려고 어리석은 생각을 한 나..
결국 아침에 잠들어서 패턴이 더 이상해졌다....
그래서 그런지 오후 내내 학습할 때 집중도가 너무 낮아, 목표치의 50%도 못했음. 분발해라!

---

- 드림 코딩 TS 강의

화요일에 배웠던 기본 타입 복습 겸 간단한 연습문제를 풀고,
객체지향의 개념과 원칙에 대해 배워보는 시간을 가졌음.
토요일에 드디어 절차 지향적인 코드들을 객체지향적으로 바꿔보는 파트를 학습할 예정이다.

---

Imperative and Procedural Programming (절차 지향)

• 개념
  • 하나의 애플리케이션을 만든다면 애플리케이션이 동작하기 위한 데이터와 함수들 위주로 구성하는 것.
  • 정의된 순서대로, 절차대로 함수가 하나씩 실행되는 것.
•  단점
  • 하나를 수정하기 위해서는 전체적인 구조를 모두 알아야 하는 데의 어려움이 있음.
  • 유지보수가 힘듦
  • 확장하기 힘듦

---

Object Oriented Programming (객체 지향)

• 개념
  • 프로그램을 객체로 정해서, 객체들끼리 서로 의사소통하도록 디자인한 것.
  • 서로 관련 있는 함수를 여러 가지 오브젝트로 정의해서 프로그래밍해나가는 것. 
• 장점
  • 한 곳에서 문제가 생긴다면, 관련 있는 오브젝트만 수정하면 됨. (쉬운 유지보수)
  • 여러 번 반복되는 것이 있다면, 관련된 오브젝트를 재사용할 수 있음.
  • 새로운 기능이 필요하다면, 새로운 오브젝트를 다시 만들면 돼서 확장성이 뛰어남
  • 생산성, 높은 퀄리티, 빠른 구현
• 중요한 원칙
  • 캡슐화 (Encapsulation)
    • 연관 있는 데이터와 함수를 한 오브젝트에 담아두고, 외부에서 보일 필요가 없는 데이터는 숨겨둠으로써 캡슐화를 구현한다.
    • 어떤 관련 있는 데이터를 오브젝트로 묶어 낼 것인지, 어떤 데이터는 외부에서 볼 수 있고 볼 수 없는지에 대해 생각하고 만드는 것.
  • 추상성 (Abstraction)
    • 내부의 복잡한 기능을 모두 이해하지 않고, 외부의 간단한 인터페이스를 통해서 사용하는 것.
    • ex) 커피머신 - 내부의 동작 원리를 몰라도 커피 내리는 버튼만 있다면, 커피를 만들 수 있음.
  • 상속 (Inheritance)
    • 잘 만들어진 함수들을 그대로 가져와서, 나만의 취향대로 살짝 바꿔서 구현하는 것.
    • ex) 에스프레소 머신, 라테 머신
    • 이처럼, 함수를 제대로 만들어 놓기만 하면 쉽게 재사용이 가능하다.
  • 다형성 (Polymorphism)
    • 상속을 통해 만들어진 함수들을 공통 함수로 만들어서 접근이 가능하다.

---

저녁 회고 (만족도: 7.5)

저녁시간에 집중은 잘했지만, 늦잠 잤고 오후에 집중을 잘 못했어서 전체적으로 만족을 못하는 하루ㅠ
ts, react 뿐 아니라 다른 강의 (코테, 함수형 프로그래밍, cs, clean code 등)도 들으려면 더욱더 일찍 일어나야 한다!
현재는 ts, react 메인 강의도 겨우겨우 듣는 수준.. 큰일~ 정신 차리자~

---

[ 출처 및 참고 : 드림코딩 TypeScript, React ]