1. 컴포넌트 디자인 (상태 그리고 분리)

⇒ 아래와 같이 sessionList를 그려주는 React 컴포넌트를 생성한다.

• index.js

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

const rootElement = document.getElementById("root");
const sessionList = [
  { id: 1, title: "1회차: Overview" },
  { id: 2, title: "2회차: Redux 만들기" },
  { id: 3, title: "3회차: React 만들기" },
  { id: 4, title: "4회차: 컴포넌트 디자인 및 비동기" }
];

ReactDOM.render(
  <React.StrictMode>
    <App store={{ sessionList }} />
  </React.StrictMode>,
  rootElement
);

• 클래스 컴포넌트로 만든 ClassApp.js (참고용)
  • 훅을 사용해서 아래의 분산되어 있는 contructor를 줄여 쓸 수 있어 요즘은 잘 안 쓴다.
  • arrow 함수는 lexical scope를 가지므로 this가 오염되지 않고 고정되어 bind 해줄 필요가 없다.

/* App.js */
import React from "react";

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

class ClassApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayOrder: "ASC"
    };
  }

  toggleDisplayOrder = () => {
    // ▼ arrow 함수는 렉시컬 스코프를 가지므로 this가 오염되지 않는다.
    //   문맥상 this가 고정된다
    this.setState({
      displayOrder: displayOrder === "ASC" ? "DESC" : "ASC"
    });
  };

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

• 함수 컴포넌트로 만든 App.js
  • 훅(useState)을 사용해 함수형 컴포넌트에 상태를 부여한다.
  • displayOrder를 사용해 초기값을 설정하고, toggleDisplayOrder를 통해 상태를 변경한다.

import React from "react";

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

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는 함수 안에서만 호출되어지므로, 이런 의미에서 클로저를 가지지만, 
    // 훅 자체가 클로저를 가지는 것은 아니다.
    toggleDisplayOrder(displayOrder === "ASC" ? "DESC" : "ASC");
  };
  return (
    <div>
      <header>
        <h1>React and TypeScript</h1>
      </header>
      <p>전체 세션 갯수: 4개 {displayOrder}</p>
      <button onClick={onToggleDisplayOrder}>재정렬</button>
      <ul>
        {orderedSessionList.map((session) => (
          <SessionItem key={session.id} title={session.title} />
        ))}
      </ul>
    </div>
  );
};

export default App;

• Tips ! useEffect
  • side effect를 위해서는 useEffect 이라는 훅을 자주 이용한다.

  useEffect(()=>{
    // ...
    // 구독();
    return () => {
      // 클린업 대상은 클로저 메모리를 정리하는 의미가 아님
      // 메모리를 정리하는 건 React나 자바스크립트의 GC(garbage collector)들이 지워준다.
      // 구독해제();
    }
	}

2. 제너레이터와 비동기

• 제너레이터는 함수 앞에 * 키워드를 붙여 선언한다.

function* foo() {}

• 비동기 함수는 함수 앞에 async 키워드를 붙여 선언한다.

async function bar() {}