[리액트] 리액트 컴포넌트의 변천사, 역사에 대하여

이번 글에서는 리액트 컴포넌트의 역사에 대해 한번 알아보도록 하겠습니다.

제가 리액트를 접했을 때는 클래스형 컴포넌트 -> 함수형 컴포넌트로 변하는 시기였고, 지금도 많은 예제나 돌아가는 베이스 코드가 클래스형 컴포넌트로 작성된 것들이 많이 있습니다.

또한 리액트의 Error Boundry처럼 리액트 형님들이 함수형으로 제공하지 않는다고 말한 것들도 있으니 결국은 둘 다 알아야 하고 대부분 리액트 공부하다 보면 클래스형으로 눈에 익히고 함수형으로 손에 익히는 그런 느낌이지 않을까 싶습니다.

쨋든 지금 시점에서 과거의 코드 방식을 모두 기억하고 따라할 필요는 없지만(공식적으로 사용 금지된) 역사를 알아야 어떤 느낌으로 리액트가 가고자 하는지 알 수 있을 듯하여 다뤄보도록 하겠습니다.

---

첫 번째. 리액트 컴포넌트가 탄생하다

2013년 리액트는 공식적으로 오픈소스 화가 되었습니다. 이전에는 페이스북 내부에서 2011년부터 사용되었다고 알려져 있습니다.

이때 기준으로 리액트 컴포넌트를 만드는 방법은 createClass 함수를 이용하는 방법이고 문법은 아래와 같습니다.

var Component_2013 = React.createClass({
	displayName : "componentList",
    render() {
    	return React.createElement(
        	"ul",
            {"className": "components"},
            this.props.items.map((component, i) =>
            	React.createElement("li", {key:i}, component)
            )
        );
    };
})

하지만 이 코드를 vsc에 하면 동작하지 않습니다. 위에서도 언급했듯이 공식적으로 사용 금지되었고 create-react-class 패키지로 옮겨져서 우리가 일반적으로 사용하는 react 패키지에는 없기 때문입니다.

동작하진 않지만, 우리는 지금도 사용하는 render 함수와 map을 통해서 동적으로 그리는 기능을 확인할 수 있습니다.

---

두 번째. 리액트 컴포넌트 클래스를 도입하다.

이젠 우리에게 많이 익숙한 es2015에 클래스 문법이 도입되었고 더 이상 prototype에 때려 박는 일은 사라졌습니다. 이에 따라 리액트에서도 클래스를 도입해서 클래스형 컴포넌트를 만들 수 있게 되었습니다.

class Component_class extends React.Component {
  render() {
    return React.createElement(
      "ul",
      { className: "components" },
      this.props.items.map((component, i) => 
        React.createElement("li", { key: i }, component))
    );
  }
}

이제 여기서부터는 더 익숙한 것입니다. 비록 jsx의 문법을 사용하진 않았지만 class안에서 render 함수를 통해 원하는 엘리먼트를 생성한다는 점은 같습니다.

기존 createClass 방식에서 나온 개념이 그대로 적용되었습니다.

---

세 번째. 리액트 컴포넌트 함수형으로 진행하다.

const Component_func = () => {
  const items = [];
  return (
    <ul>
      {items.map((component, i) => {
        <li key={i}>component</li>;
      })}
    </ul>
  );
};

이제 우리에게 가장 익숙한 형태 + jsx로 작성된 코드입니다. 이젠 render함수가 사라지고 거기에 return이 자리 잡았습니다. 함수형 프로그래밍에 맞도록 진화된 것을 확인할 수 있습니다.

---

어떤 개발자는 클래스형 컴포넌트도 조만간 공식적으로 금지될 것이라고 말하기도 합니다.

하지만 개인적인 생각으로는 아직까지 자바스크립트 코드 안에 var가 많이 있는 것처럼 클래스형 컴포넌트로 충분한 코드가 작성되어 공식적인 금지는 힘들지 않을까 생각하고 있습니다.

그래도 트렌드에 맞춰 저는 함수형 컴포넌트로 작성은 하고 있긴 합니다.

이렇게 간단하게 3단계 리액트 컴포넌트의 변화에 대해 간략히 알아보았습니다. 다음 리액트는 어떤 모습으로 변할지 기대가 되면서도 또 공부할게 늘지 않을까 걱정이 한 가득이지만, 변하는 만큼 더 좋아진다고 믿습니다

항상 이런 새로운 기술의 개념을 만들고 설계하고 구현하는 능력자 형님들을 보면 감탄스럽습니다.  언젠가 저도 이런 수준의 고민을 하고 깊이있는 기술을 만드는 개발자가 되면 참 좋겠습니다.