React 버전별 출시년도 / 주요 변경점 / 코드 예시

1. React 0.3.x (2013년)

- 초기 버전으로, 컴포넌트 생명주기 메소드와 이벤트 처리에 대한 기본적인 개념이 도입됨.

var MyComponent = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});

 

2. React 0.13.x (2015년)

- ES6 클래스 문법을 도입하고, JSX의 propTypes와 defaultProps 개념이 추가됨.

class MyComponent extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

 

3. React 15.x (2016년)

- 컴포넌트에서 DOM 요소에 직접 접근하지 않도록 제한하는 Strict Mode가 도입됨.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

 

4. React 16.x (2017년)

- Fiber 아키텍처를 도입하여, 렌더링 엔진이 새롭게 설계됨.

- Error Boundaries, Portals 등 새로운 기능이 추가됨.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

 

5. React 17.x (2020년)

- 딱히 변경사항 없고, 이전 버전과 호환성을 유지하는 데 초점을 둠.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

 

6. React 18.x (2021년)

- Concurrent Mode와 Server Components가 추가되어 성능과 개발 효율성이 향상됨.

import { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}