[번역] Didact: 자신만의 리액트를 만드는 DIY 가이드

Ryan Yang·2019년 3월 30일

DIY Didact Fiber JavaScript React Reconciler frontend js virtual DOM

[번역] Didact: 자신만의 리액트를 만드는 DIY 가이드

목록 보기

1/3

[업데이트] 이 시리즈는 이전(old) 리액트(React) 아키텍처에서 시작 되었습니다. 여러분은 시작 부분을 건너뛰고 바로 새로운 파이버(Fiber) 아키텍처를 사용하여 모든 것을 재 작성하는 글로 넘어갈 수 있습니다.

[업데이트 2] 댄(Dan)의 이야기에 진지하게 귀 기울일 것:
1) 역자주 — 리덕스의 창시자이며, 2015년부터 페이스북에서 리액트 메인테이너로 활동

오래 전, 내가 자료 구조와 알고리즘을 배울 시절, 과제 중 하나는 나만의 어레이 리스트, 링크드 리스트, 큐와 스택 (모듈라-2 를 사용하여)을 작성하는 것 이였습니다. 그 때 이후로는 바퀴를 재 발명(Reinventing the Wheel)하지 않아도 라이브러리가 언제나 있었기 때문에, 저는 링크드 리스트를 구현할 필요가 없었습니다.

할 가치가 있는 과제였냐고요? 물론입니다. 그것을 제 스스로 해봄으로써 많은 것을 배울 수 있었습니다. 각 데이터 구조를 올바르게 사용하는 방법과 데이터 구조를 선택하는 방법을 배웠습니다.

이 포스트 시리즈들의 목적도 같습니다만, 리액트는 링크드 리스트 이상의 것이죠.

존 카맥(John Carmack): 성능 및 장치 호환성이 명시적으로 목표가 아닌 경우 POSIX 커널 구현이 얼마나 작고 간단할까? (리액트도 비슷하지 않을까 합니다)

운이 좋게도, 성능, 디버깅 능력, 이식성, 등등을 신경 쓰지 않는다면, 리액트의 주요한 서너 가지 기능은 재작성하기에 어렵지 않습니다. 실제로 그것은 꽤 간단하고 200 줄 이하의 코드로 작성 가능합니다.

우리는 200줄 이하의 코드로, 같은 API를 가지며, 동작하는 버전의 리액트를 작성해 볼겁니다. 이 라이브러리의 교훈적인(Didactic)을 감안할 때 이것을 Didact(교훈)이라고 이름 붙였습니다.

디닥트(Didact)를 사용한 어플리케이션의 코드는 아래와 같이 보여질 것 입니다.

const stories = [
  { name: "Didact introduction", url: "http://bit.ly/2pX7HNn" },
  { name: "Rendering DOM elements ", url: "http://bit.ly/2qCOejH" },
  { name: "Element creation and JSX", url: "http://bit.ly/2qGbw8S" },
  { name: "Instances and reconciliation", url: "http://bit.ly/2q4A746" },
  { name: "Components and state", url: "http://bit.ly/2rE16nh" }
];

class App extends Didact.Component {
  render() {
    return (
      <div>
        <h1>Didact Stories</h1>
        <ul>
          {this.props.stories.map(story => {
            return <Story name={story.name} url={story.url} />;
          })}
        </ul>
      </div>
    );
  }
}

class Story extends Didact.Component {
  constructor(props) {
    super(props);
    this.state = { likes: Math.ceil(Math.random() * 100) };
  }
  like() {
    this.setState({
      likes: this.state.likes + 1
    });
  }
  render() {
    const { name, url } = this.props;
    const { likes } = this.state;
    const likesElement = <span />;
    return (
      <li>
        <button onClick={e => this.like()}>{likes}<b>❤️</b></button>
        <a href={url}>{name}</a>
      </li>
    );
  }
}

Didact.render(<App stories={stories} />, document.getElementById("root"));