React Advanced

Optimizing Performance

Immutable.js

immer

createPortal

Lead Software Engineer @ProtoPie

Microsoft MVP

TypeScript Korea User Group Organizer

Marktube (Youtube)

Mark Lee

이 웅재

Optimizing Performance

필요할 때만 랜더한다.

Reconciliation

서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
개발자가 key prop 을 통해,
여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다.

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return (
        <div>
          <Foo />
        </div>
      );
    }
    return (
      <span>
        <Foo />
      </span>
    );
  }
}

class Foo extends React.Component {
  componentDidMount() {
    console.log("Foo componentDidMount");
  }

  componentWillUnmount() {
    console.log("Foo componentWillUnmount");
  }

  render() {
    return <p>Foo</p>;
  }
}

엘리먼트의 타입이 다른 경우

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return <div className="before" title="stuff" />;
    }
    return <div className="after" title="stuff" />;
  }
}

DOM 엘리먼트의 타입이 같은 경우 (1)

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return <div style={{ color: "red", fontWeight: "bold" }} />;
    }
    return <div style={{ color: "green", fontWeight: "bold" }} />;
  }
}

DOM 엘리먼트의 타입이 같은 경우 (2)

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setInterval(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 1000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return <Foo name="Mark" />;
    }
    return <Foo name="Anna" />;
  }
}

같은 타입의 컴포넌트 엘리먼트

class Foo extends React.Component {
  state = {};

  componentDidMount() {
    console.log("Foo componentDidMount");
  }

  componentWillUnmount() {
    console.log("Foo componentWillUnmount");
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("Foo getDerivedStateFromProps", nextProps, prevState);
    return {};
  }

  render() {
    console.log("Foo render");
    return <p>Foo</p>;
  }
}

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 3000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return (
        <ul>
          <Foo>first</Foo>
          <Foo>second</Foo>
        </ul>
      );
    }
    return (
      <ul>
        <Foo>first</Foo>
        <Foo>second</Foo>
        <Foo>third</Foo>
      </ul>
    );
  }
}

자식에 대한 재귀적 처리 (1)

class Foo extends React.Component {
  state = {};

  componentDidMount() {
    console.log("Foo componentDidMount", this.props.children);
  }

  componentWillUnmount() {
    console.log("Foo componentWillUnmount");
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("Foo getDerivedStateFromProps", nextProps, prevState);
    return {};
  }

  render() {
    console.log("Foo render", this.props.children);
    return <p>{this.props.children}</p>;
  }
}

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 3000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return (
        <ul>
          <Foo>second</Foo>
          <Foo>third</Foo>
        </ul>
      );
    }
    return (
      <ul>
        <Foo>first</Foo>
        <Foo>second</Foo>
        <Foo>third</Foo>
      </ul>
    );
  }
}

자식에 대한 재귀적 처리 (2)

class Foo extends React.Component {
  state = {};

  componentDidMount() {
    console.log("Foo componentDidMount", this.props.children);
  }

  componentWillUnmount() {
    console.log("Foo componentWillUnmount");
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("Foo getDerivedStateFromProps", nextProps, prevState);
    return {};
  }

  render() {
    console.log("Foo render", this.props.children);
    return <p>{this.props.children}</p>;
  }
}

class App extends React.Component {
  state = {
    count: 0
  };
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      });
    }, 3000);
  }
  render() {
    if (this.state.count % 2 === 0) {
      return (
        <ul>
          <Foo key="2">second</Foo>
          <Foo key="3">third</Foo>
        </ul>
      );
    }
    return (
      <ul>
        <Foo key="1">first</Foo>
        <Foo key="2">second</Foo>
        <Foo key="3">third</Foo>
      </ul>
    );
  }
}

자식에 대한 재귀적 처리 (3)

class Foo extends React.Component {
  state = {};

  componentDidMount() {
    console.log("Foo componentDidMount", this.props.children);
  }

  componentWillUnmount() {
    console.log("Foo componentWillUnmount");
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("Foo getDerivedStateFromProps", nextProps, prevState);
    return {};
  }

  render() {
    console.log("Foo render", this.props.children);
    return <p>{this.props.children}</p>;
  }
}

class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 37 },
      { id: 2, name: "Anna", age: 26 },
    ]
  };
  render() {
    console.log("App render");
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <button onClick={this._click}>click</button>
        <ul>
          {persons.map(p => (
            <Person {...p} key={p.id} />
          ))}
        </ul>
      </div>
    );
  }

  _change = e => {
    this.setState({
      ...this.state,
      text: e.target.value
    });
  };

  _click = () => {
    console.log(this.state.text);
  };
}

setState 와 함께 일어나는 일

class Person extends React.Component {
  render() {
    console.log("Person render");

    const { name, age } = this.props;
    return (
      <ul>
        {name} / {age}
      </ul>
    );
  }
}

class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 37 },
      { id: 2, name: "Anna", age: 26 },
    ]
  };
  render() {
    console.log("App render");
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <button onClick={this._click}>click</button>
        <ul>
          {persons.map(p => (
            <Person {...p} key={p.id} />
          ))}
        </ul>
      </div>
    );
  }

  _change = e => {
    this.setState({
      ...this.state,
      text: e.target.value
    });
  };

  _click = () => {
    console.log(this.state.text);
  };
}

shouldComponentUpdate

class Person extends React.Component {
  shouldComponentUpdate(previousProps) {
    for (const key in this.props) {
      if (previousProps[key] !== this.props[key]) {
        return true;
      }
    }
    return false;
  }
  render() {
    console.log("Person render");

    const { name, age } = this.props;
    return (
      <ul>
        {name} / {age}
      </ul>
    );
  }
}

class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 37 },
      { id: 2, name: "Anna", age: 26 },
    ]
  };
  render() {
    console.log("App render");
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <button onClick={this._click}>click</button>
        <ul>
          {persons.map(p => (
            <Person {...p} key={p.id} />
          ))}
        </ul>
      </div>
    );
  }

  _change = e => {
    this.setState({
      ...this.state,
      text: e.target.value
    });
  };

  _click = () => {
    console.log(this.state.text);
  };
}

PureComponent

class Person extends React.PureComponent {
  render() {
    console.log("Person render");

    const { name, age } = this.props;
    return (
      <ul>
        {name} / {age}
      </ul>
    );
  }
}

class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 37 },
      { id: 2, name: "Anna", age: 26 },
    ]
  };
  render() {
    console.log("App render");
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <button onClick={this._click}>click</button>
        <ul>
          {persons.map(p => (
            <Person {...p} key={p.id} onClick={() => {}} />
          ))}
        </ul>
      </div>
    );
  }

  _change = e => {
    this.setState({
      ...this.state,
      text: e.target.value
    });
  };

  _click = () => {
    console.log(this.state.text);
  };
}

onClick={() => {}}

class Person extends React.PureComponent {
  render() {
    console.log("Person render");

    const { name, age } = this.props;
    return (
      <ul>
        {name} / {age}
      </ul>
    );
  }
}

class App extends React.Component {
  state = {
    text: "",
    persons: [
      { id: 1, name: "Mark", age: 37 },
      { id: 2, name: "Anna", age: 26 },
    ]
  };
  render() {
    console.log("App render");
    const { text, persons } = this.state;
    return (
      <div>
        <input type="text" value={text} onChange={this._change} />
        <button onClick={this._click}>click</button>
        <ul>
          {persons.map(p => (
            <Person {...p} key={p.id} onClick={() => {}} />
          ))}
        </ul>
      </div>
    );
  }

  _change = e => {
    this.setState({
      ...this.state,
      text: e.target.value
    });
  };

  _click = () => {
    console.log(this.state.text);
  };
}

React.memo

const Person = React.memo(props => {
  console.log("Person render");

  const { name, age } = props;
  return (
    <ul>
      {name} / {age}
    </ul>
  );
});

createPortal

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="modal"></div>
  </body>
</html>

src/index.css

body {...}

#modal {
  position: absolute;
  top: 0;
  left: 0;
}

src/components/Modal.jsx

import ReactDOM from 'react-dom';

const Modal = ({ children }) =>
  ReactDOM.createPortal(children, document.querySelector('#modal'));

export default Modal;

src/pages/Home.jsx

const Home = () => {
  const [visible, setVisible] = useState(false);
  const show = () => setVisible(true);
  const hide = () => setVisible(false);
  return (
    <div>
      <h1>Home</h1>
      <button onClick={click}>open</button>

      <NaviContainer />
      <BooksContainer />

      {visible && (
        <Modal>
          <div
            style={{
              width: '100vw',
              height: '100vh',
              background: 'rgba(0, 0, 0, 0.5)',
            }}
            onClick={hide}
          >
            Hello
          </div>
        </Modal>
      )}
    </div>
  );
};

Immutable.js

https://immutable-js.github.io/immutable-js/

npm i immutable

immutable-js 주요 특징

한번 만들어지면 변하지 않는 데이터를 "이뮤터블 데이터" 라 한다.
자바스크립트는 객체 내부의 값을 변경해도 "같은 레퍼런스" 를 유지하기 때문에,
객체 내부 값을 일일이 비교하지 않으면 정확히 모든 값이 같은지 알수 없다.
A 라는 "이뮤터블 데이터" 에서 특정 값을 수정하려면,
기본적으로는 B 라는 객체를 새로 만들고 A 의 모든 값을 B 로 복사해야한다.
- 이 것은 비용이 많이 든다.
- 그래서 나온 아이디어로 구현해낸 것이 immutable-js
react 의 어느 부분에서 사용하면 좋을까
- 첫번째, 리덕스의 리듀서 부분
- 두번째, Pure 컴포넌트

기본 사용법 (1) - Map

import { Map } from "immutable";

const object = Map({ a: 1, b: 2, c: 3 });
console.log(object);

const nested = Map({ foo: Map({ name: "Mark", age: 37 }), bar: "bar" });
console.log(nested);

기본 사용법 (2) - List

import { List, Map } from "immutable";

const list1 = List([1, 2, 3]);
console.log(list1);
console.log(list1.toJS());

const list2 = List([
  Map({ name: "Mark", age: 37 }),
  Map({ name: "Anna", age: 26 })
]);
console.log(list2);
console.log(list2.toJS());

const list3 = list1.push(4, 5);
const list4 = list3.unshift(0);
const list5 = list4.concat(list2, list3);
console.log(list1.size);
console.log(list3.size);
console.log(list4.size);
console.log(list5.size);

기본 사용법 (2) - List

기본 사용법 (3) - set, get

import { List, Map } from "immutable";

const object = Map({ a: 1, b: 2, c: 3 });
const list = List([1, 2, 3]);

const newObject = object.set("a", 5);
console.log(object === newObject, newObject.get("a"));

const newList = list.set(0, 5);
console.log(list === newList, newList.get(0));

기본 사용법 (4) - setIn, getIn

import { List, Map } from "immutable";

const object = Map({ foo: Map({ name: "Mark", age: 37 }), bar: "bar" });
const list = List([
  Map({ name: "Mark", age: 37 }),
  Map({ name: "Anna", age: 26 })
]);

const newObject = object.setIn(["foo", "name"], "Anna");
console.log(object === newObject, newObject.getIn(["foo", "name"]));

const newList = list.setIn([0, "name"], "Anna");
console.log(list === newList, newList.getIn([0, "name"]));

기본 사용법 (5) - update, updateIn

import { Map } from "immutable";

const object = Map({ a: 1, b: 2, c: 3 });
const nested = Map({ foo: Map({ name: "Mark", age: 37 }), bar: "bar" });

const newObject = object.update("a", value => value + 1);
console.log(object === newObject, newObject.get("a"));

const newNested = nested.updateIn(["foo", "age"], value => value + 1);
console.log(object === newNested, newNested.getIn(["foo", "age"]));

기본 사용법 (6) - delete

import { Map } from "immutable";

const object = Map({ a: 1, b: 2, c: 3 });

const newObject = object.delete("c");
console.log(object === newObject, newObject.toJS(), newObject.get("c"));

before Using immutable-js

// src/reducers/books.js

export default function books(state = initialState, action) {
  switch (action.type) {
    case RECEIVE_BOOKS:
      return [...state, ...action.books];

    case DELETE_BOOK: {
      const newState = [...state];
      for (let i = 0; i < newState.length; i++) {
        if (newState[i].bookId === action.bookId)
          newState[i].deletedAt = new Date().toISOString();
      }
      return newState;
    }

    case UNDO_DELETE_BOOK: {
      const newState = [...state];
      for (let i = 0; i < newState.length; i++) {
        if (newState[i].bookId === action.bookId) newState[i].deletedAt = null;
      }
      return newState;
    }

    default:
      return state;
  }
}

Use immutable-js

// src/reducers/books.js

const initialState = List([]);

export default function books(state = initialState, action) {
  switch (action.type) {
    case RECEIVE_BOOKS: {
      return state.concat(action.books.map(book => Map(book)));
    }
    case DELETE_BOOK: {
      return state.map(book => {
          if (book.get(bookId) === action.bookId)
            book.set(deletedAt, new Date().toISOString());
          return book;
        });
    }

    case UNDO_DELETE_BOOK: {
      return state.map(book => {
          if (book.get(bookId) === action.bookId) book.set(deletedAt, null);
          return book;
        });
    }

    default:
      return state;
  }
}

immer

https://immerjs.github.io/immer/docs/introduction

npm i immer

immer 주요 특징

produce(객체, 함수) 를 이용한 draft 처리
produce(함수) 를 이용한 setState(함수) 처리

기본 사용법 - produce (객체, 함수)

import produce from 'immer';

const state = {
  name: 'Mark',
  age: 39,
};

const nextState = produce(state, (draft) => {
  draft.age += 1;
});

console.log(state, nextState, state === nextState);

기본 사용법 - produce(객체, 함수)

import produce from 'immer';

const state = {
  books: [
    { title: '책 이름', author: { name: 'Mark', age: 39 } },
    { title: '책 이름', author: { name: 'Hanna', age: 28 } },
  ],
};

const nextState = produce(state, (draft) => {
  draft.books[0].author.age += 1;
});

console.log(state, nextState, state === nextState);
console.log(state.books[1] === nextState.books[1]);

기본 사용법 - produce(함수)

import produce from 'immer';

const state = {
  books: [
    { title: '책 이름', author: { name: 'Mark', age: 39 } },
    { title: '책 이름', author: { name: 'Hanna', age: 28 } },
  ],
};

console.log(
  produce((draft) => {
    draft.books[0].author.age += 1;
  }),
);

기본 사용법 - produce(함수)

function App() {
  const [state, setState] = useState({
    books: [
      { title: '책 이름', author: { name: 'Mark', age: 39 } },
      { title: '책 이름', author: { name: 'Hanna', age: 28 } },
    ],
  });

  useEffect(() => {
    setState(
      produce((draft) => {
        draft.books[0].author.age += 1;
      }),
    );
  }, []);

  console.log(state);

  return (
    <div>{JSON.stringify(state)}</div>
  );
}

11. React Advanced

By Woongjae Lee

11. React Advanced

Fast Campus Frontend Developer School 17th

1,928

Woongjae Lee

Daangn - Frontend Core Team ex) NHN Dooray - Frontend Team Leader ex) ProtoPie - Studio Team

React Advanced

Mark Lee

Optimizing Performance

Reconciliation

엘리먼트의 타입이 다른 경우

DOM 엘리먼트의 타입이 같은 경우 (1)

DOM 엘리먼트의 타입이 같은 경우 (2)

같은 타입의 컴포넌트 엘리먼트

자식에 대한 재귀적 처리 (1)

자식에 대한 재귀적 처리 (2)

자식에 대한 재귀적 처리 (3)

setState 와 함께 일어나는 일

shouldComponentUpdate

PureComponent

onClick={() => {}}

React.memo

createPortal

public/index.html

src/index.css

src/components/Modal.jsx

src/pages/Home.jsx

Immutable.js

immutable-js 주요 특징

기본 사용법 (1) - Map

기본 사용법 (2) - List

기본 사용법 (2) - List

기본 사용법 (3) - set, get

기본 사용법 (4) - setIn, getIn

기본 사용법 (5) - update, updateIn

기본 사용법 (6) - delete

before Using immutable-js

Use immutable-js

immer

immer 주요 특징

기본 사용법 - produce (객체, 함수)

기본 사용법 - produce(객체, 함수)

기본 사용법 - produce(함수)

기본 사용법 - produce(함수)

11. React Advanced

More from Woongjae Lee