리액트(React)의 역사

이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다.

 

리액트를 만든 곳

리액트는 메타(구. 페이스북)에서 만들어졌습니다.

 

리액트가 탄생하게 된 계기

메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다.

 

2010년 : 리액트의 프리퀄인 XHP 등장

리액트의 첫 시작은 2010년 xhp 로 시작되었습니다.

https://github.com/facebookarchive/xhp-php5-extension

GitHub - facebookarchive/xhp-php5-extension: A PHP5 extension that augments the syntax of the language such that XML document fr

하지만, php 자체가 서버에서 해석되므로 클라이언트에서 서버로의 요청이 빈번할 수 밖에 없는 문제가 있었고 xhp 에서는 이 문제를 해결 할 수 없었습니다. 그래서 브라우저(클라이언트)에서 사용되는 javascript 를 사용하여 xhp 모델을 구현하는 방안이 고려되었고 이것이 리액트로 발전하게 되었습니다.

 

2013년 : 오픈소스로 세상에 공개된 리액트

리액트의 github 레포지토리의 release 기록에 보면 가장 첫 릴리즈 된 정보는 아래와 같았습니다.

https://github.com/facebook/react/releases/tag/v0.3.0

리액트의 첫 릴리즈 날짜는 "2013년 07월 03일" 로 나오는 걸 확인 할 수 있습니다. 즉 리액트가 사람들에게 오픈소스로 공개 된 해는 2013년 입니다.

 

2016년 : v15.0.0 출시 (향상된 SVG 지원, 새로운 버전관리 체계)

2016년에 릴리즈된 v15 부터는 SVG 태그에 대한 지원이 대폭 개선되었습니다. 그리고 15 버전의 이전 버전들은 0.3 ->  ... -> 0.11 -> 0.12 -> 0.13 -> 0.14 방식으로 업데이트가 진행되었고 15 버전부터 메이저 버전이 적용되기 시작하였습니다. 

 

2017년 : v16.0.0 출시 (Error Boundary 도입)

2017년에 리액트 16 버전이 릴리즈 되었습니다. error boundary 가 도입되어 리액트에서 오류가 발생할 때에 대한 분기처리가 좀 더 수월해졌습니다.

 

2019년 : v16.8.0 출시 (Hook 도입)

2019년에 리액트 16.8.0 버전이 릴리즈 되었고, 이 때부터 Hook 이 도입되어 클래스를 사용하지 않고 함수를 사용하여 리액트 애플리케이션을 개발하는 것이 가능해졌습니다.

 

2020년 : v17.0.0 출시 (점진적 업그레이드 기반 작업)

2020년에 리액트 17 버전이 릴리즈 되었습니다. 17 버전의 메인 목표는 리액트의 버전을 업그레이드 할 때, 일부만 업그레이드 하는 것이 가능하도록 하는 점진적 업그레이드의 기반을 다지는 것이 목표입니다.

 

2022년 : v18.0.0 출시 (Strict Mode 도입 및 서버컴포넌트 도입)

2022년 리액트 18 버전이 첫 릴리즈 될 때 Strict Mode 가 도입되었습니다. Strict Mode 가 활성화 되면 리액트는 컴포넌트가 마운트 될 때마다 자동으로 마운트를 해제하고 다시 마운트하여 이전 상태를 복원합니다. Strict Mode 는 리액트 코드내의 잠재적인 문제를 알아내기 위해 사용되는 옵션입니다. 더불어 18 버전부터 서버 컴포넌트 즉 RSC 가 실험적 기능으로 도입되었습니다. 현재 Next.js 와 같은 리액트 프레임워크에 채택되어 사용자 경험을 수집하고 있는 중입니다.

 

 

 

<이 글을 작성할 때 참고한 자료>

https://www.linkedin.com/pulse/birth-react-reason-learn-tarun-yadav

https://chanhuiseok.github.io/posts/react-3/

https://blog.logrocket.com/virtual-dom-react/#concept-review-what-is-dom

https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/

https://github.com/facebook/react/releases