[우아한테크러닝 3기] React&TypeScript #4일차

sk97kang·2020년 9월 10일
0

일정 : 2020-09-10 19:30 ~ 22:00

목차

const App = () => {
  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <ul>
        <li>1회차 : Overview</li>
        <li>2회차 : Redux만들기</li>
        <li>3회차 : React 만들기</li>
        <li>4회차 : 컴포넌트 디자인 및 비동기</li>
      </ul>
    </div>
  );
};

강의

  • JSX 안에 코드가 많아지면 가독성이 떨어진다. 컴포넌트를 분리해서 선언적으로 만들어 가독성을 높인다.

  • Naming

  • 어떻게하면 잘게쪼갤까? 분리할까 고민할때 분리하자.

function vs Arrow function

this

  • function : this가 실행시점에 정해짐
  • arrow function : 문맥상 위치에서 정해짐

React Hook

상태를 저장할 수 있는 저장공간을 만들어 상태를 관리해줌.

Hook은 클로저가 아니지만 Hook 사용 시 클로저가 사용된다.

클로저로 사용하지않으면 무한 렌더링이 된다.

  const [displayOrder, toggleDisplayOrder] = useState("ASC");

// 클로저 사용
  const onToggleDisplayOrder = () => {
    toggleDisplayOrder(displayOrder === "ASC" ? "DESC" : "ASC");
  };

JavaScript

JavaScript는 임의로 메모리를 지울 수 없다.(변수, 클로저, 함수 등등) Garbage Collection를 지원한다.

Generator 와 비동기

Promise

const p = new Promise(function (resolve, reject) {
  resolve("1");
});

p.then(function (r) {
  console.log(r); // 출력 : 1
});

Generator

함수인데 리턴을 여러 번 하는건 어떨까?

  • 공부해볼 것
    • 코루틴

Concept

function* makeNumber() {
  let num = 1;

  while (true) {
    yield num++;
  }
}

// 실행될 준비만 해놓고 실행은 안됨
const i = makeNumber();

console.log(i); // GeneratorFunctionPrototype {_invoke: function invoke(), constructor: Object}

// next()를 이용해 실행
console.log(i.next()); // Object {value: 1, done: false}
console.log(i.next()); // Object {value: 2, done: false}
console.log(i.next()); // Object {value: 3, done: false}

비동기를 동기처럼 코딩하기

// generator 이용
function* main() {
  console.log("시작");
  // yield는 promise가 아니여도 작동한다.
  yield delay(3000);
  console.log("3초 뒤입니다.");
}

const it = main();

const { value } = it.next();

if (value instanceof Promise) {
  value.then(() => {
    it.next();
  });
}


// async 이용
async function main2() {
  console.log("시작");
  // 오른쪽에 반드시 promise가 있어야 한다.
  await delay(3000);
  console.log("3초 뒤입니다.");
}

main2();
profile
주니어 개발자 Kan

0개의 댓글