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

  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <ul>
        { sessionList.map((session) => (<li>{session.title</li>)))}
      </ul>
    </div>
  );
};

export default App;

return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <ul>
        {sessionList.map(session => (
          <SessionItem title={session.title} />
        ))}
      </ul>
    </div>
  );
};

import React from "react";

const SessionItem = ({ title }) => <li>{title}</li>;

class ClassApp extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      displayOrder: "ASC"
    };
  }

  // arrow function 은 그때마다 this binding 이 다르지 않기 때문에 많이 사용한다.
  onToggleDisplayOrder = () => {
    this.setState({
      displayOrder: this.state.displayOrder === "ASC" ? "DESC" : "ASC"
    });
  };

  render() {
    return (
      <div>
        <button onClick={this.onToggleDisplayOrder}>정렬</button>
        여기여기..
      </div>
    );
  }
}

// hooks 로 변경해서 상태를 가질 수 있게 된다.
const App = (props) => {
  const [displayOrder, toggleDisplayOrder] = React.useState("ASC");
  const { sessionList } = props.store;
  const orderedSessionList = sessionList.map((session, i) => ({
    ...session,
    order: i
  }));

  // 이벤트 핸들러
  const onToggleDisplayOrder = () => {
    toggleDisplayOrder(displayOrder === "ASC" ? "DESC" : "ASC");
  };

  // 상태가 아닌 부분을 변경하는 onToggleDisplayOrder 을 아무리 호출해도 바깥쪽으로 이펙트를 줄 수 없어서
  // 리렌더링이 될 리가 없다!
  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <p>전체 세션 갯수 : 4개 {displayOrder}</p>
      <button onClick={onToggleDisplayOrder}>정렬</button>
      <ul>
        {orderedSessionList.map((session) => (
          <SessionItem title={session.title} />
        ))}
      </ul>
    </div>
  );
};

export default App;

useEffect(() ⇒ {

	// 함수를 return 해주면, 이 컴포넌트가 UI 에서 사라질 때 return 에 있는 함수를 호출해준다.
	// 정의한 것들을 해제하라고 공식문서에도 나와있음. clean up.
	// useEffect 의 return 부분에서 해제하는 대상은 메모리 또는 hook 등등 변수, 객체들이 대상은 아니다.
	return () => {
		// mark and sweep 해주는 알고리즘을 바껴서 더이상 참조하고있지않는 객체를 GC 로 날려버릴 수 있다.
		// Concurrent 방식
		// 일반 객체, 클로저 등등 다 GC 가 일어난다.
	}
})

generator : function* foo() {}

비동기 함수 : async function bar() {}

const x = 10;
const y = x * 10;

const x = () => 10;
const y = x() * 10;

const p = new Promise(function(resolve, reject) {
	// resolve 호출되면 then 에 전달된 함수를 호출할 수 있다. 지연 호출을 할 수 있다. 
	setTimeout(() => {
		resolve("1");
	}, 1000);
});

p.then(function(z) {
	console.log(z);
});

function* makeNumber() {
	let num = 1;
	while(true) {
		yield num++;
	}
}

const i = makeNumber(); // 실행될 준비만 하고, i 에게 실행될 메소드 전달.

i.next(); // next 를 호출하면 yield 가 있을 때까지 실행을 긷

console.log(i); // Generator 객체를 준다. (Iterator 라고도 한다.) 코루틴이라는 함수의 구현체.

// 입력값을 받고, 계산을 한 후에 값을 return 하는 것을 함수.
// return 을 안하면 undefined return.
function xyz(x) {

}

xyz();

const delay = ms => new Promise((resolve) => setTimeout(resolve, ms));

function* main() { // generator.
	console.log('시작');
	yield delay(3000);
	console.log('3초 뒤');
}

const it = main(); // main 함수를 호출해서 받은게 iterator.
const { value } = it.next(); // Promise 객체가 value 에 담긴다.

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

delay(3000).then(() => {
	console.log('3초 뒤');
}); // Promise 객체 반환.