안좋은 React Code 작성 방법

How to write react bad code.

안좋은 React 코드 작성법을 경험을 토대로 올리겠습니다.

render 함수 내부에서 새로운 Component Class 만들기

필요한 사전지식

  • React Diff Alogrihtm 에 대한 이해
    • http://meetup.toast.com/posts/110
    • http://guswnsxodlf.github.io/react-diff-algorithm
class TestFail extends Component {
  state = {
    top: 0,
  };

  move = () => {
    this.setState({
      top: this.state.top + 50
    });
  };

  render() {
    const MoveButton = () => (
      <button
        style=
        onClick={this.move}
      >
        move
      </button>
    );

    return (
      <div>
        <span>Move Button</span>
        <MoveButton />
      </div>
    );
  }
}

export default TestFail;
  • 위 코드는 CSS의 transition 속성이 작동하지 않음
  • render 함수 내부에서 항상 새로운 클래스가 생성
  • 새로운 클래스는 새로운 타입의 컴포넌트이므로 React Diff Algorithm에 따라 다시 리랜더링됨.

타입 === 클래스 === 자바스크립트의 함수 === 컴포넌트 클래스

해결법

  • render의 return 에 모두 작성하기
  • Component Class 가 아니라 Component 자체를 담기
  • Component Class 를 외부 (class 바깥 or 새로운 파일)에 정의하기

예시 코드

  1. Fail: 문제있는 컴포넌트
  2. Fix: render의 return 에 모두 작성하기
  3. Fix2: Component Class 가 아니라 Component 자체를 담기
  4. Fix3: Component Class 를 외부 (class 바깥 or 새로운 파일)에 정의하기
comments powered by Disqus