Codefug Blog
Codefug Blog
리액트 과거, 현재, 미래
위 차트는 2023년 Stack Overflow에서 제공한 가장 많이 사용되는 웹 기술 순위입니다.
React는 전자정부 프레임워크 표준으로 채택되었으며 2024년에도 가장 인기 있는 프레임워크입니다.
React는 단방향 바인딩만 지원합니다.
데이터가 한쪽으로만 흐릅니다. (Angular는 양방향 바인딩을 지원합니다.)
규모가 커질수록 상태 변화를 추적하기 쉬운 단방향 바인딩이 유리합니다.
function App {
const [name, setName] = useState('')
// name이 변경되는 이유는 setName이 호출될 때 뿐이기 때문에 name이 바뀌면 setName 로직만 들여다 보면 된다.
function onChange(e){
setName(e.target.value)
}
return <input value={name} onChange={onChange}/>
}
HTML에 JavaScript 문법을 결합한 React 전용 문법입니다.
{
condition ? <div>condition이 true일때만 렌더링.</div> : null;
}
문법이 간결하여 입문하기 좋습니다. (성능 최적화는 어려운 편입니다.)
React는 UI 라이브러리로 시작하여 나머지 부분을 자유롭게 확장할 수 있도록 설계되었습니다.
커뮤니티가 성장하여 다양한 라이브러리가 만들어졌습니다.
Meta가 메인 스폰서이므로 지속적인 발전이 보장됩니다.
2010년 당시 웹 개발 방식은 서버에서 HTML을 생성하여 클라이언트에 제공하는 것이었습니다.
서버에서 콘텐츠를 동적으로 생성하고, 브라우저는 다운로드하여 렌더링했습니다.
JavaScript는 form 처리 같은 부수적인 역할만 했습니다.
브라우저가 jQuery, 로컬 스토리지, WebSocket, Canvas, SVG, Geolocation 등 다양한 기능을 지원하기 시작했습니다.
DOM 인터랙션과 Ajax 같은 클라이언트 데이터 로딩 기능이 추가되면서 JavaScript가 복잡해졌습니다.
AngularJS나 Backbone.js 같은 프레임워크가 등장했습니다.
이들은 MVVM(Model-View-ViewModel)과 MVC(Model-View-Controller) 패턴으로 체계화되어 있습니다.
Facebook은 큰 성공을 거두면서 브라우저 부담을 줄여야 했습니다.
JavaScript 번들 크기를 줄여 다운로드, 파싱, 실행 부담을 줄이는 것이 과제였습니다.
위는 2011년 Facebook 페이지입니다.
한 페이지에 많은 기능이 들어가 있습니다.
데이터가 바뀔 때마다 서버에서 페이지 전체를 받아오면 브라우저에 큰 부담이 됩니다.
실시간으로 데이터가 바뀌는 요소가 많아 전체 페이지를 새로고침하는 방식은 UX가 최악이었을 것입니다.
Apple의 앱 규제에 반발하여 Safari(웹)용 Facebook을 만들기 위해 추진되었습니다.
HTML5 기반 하이브리드 앱은 당시 기술력으로 네이티브 앱을 대체할 수 없었습니다.
본래 취지는 실패했지만 Flutter나 React Native 형태로 다시 부활하고 있습니다.
Facebook에서 만들었지만 실무에서 사용되지 않았습니다.
함수형을 지향하는 새로운 버전으로 발전하여 React의 시초가 되었습니다.
모델이 변경되면 뷰를 변경하는 단방향 방식으로 발전했습니다.
뷰가 변경될 때 이전 DOM을 버리고 새롭게 렌더링하는 방식을 제안했습니다.
이 제안으로 React 프로젝트가 시작되었습니다.
위의 UFI 를 만드는 것이 React의 첫 프로젝트였습니다.
공유, 좋아요, 댓글 등 여러 기능이 필요했습니다.
JSX와 Flux 패턴이 여기서 등장했습니다.
Instagram 인수 후 Instagram 웹 버전도 React로 만들었습니다.
JSConf US에서 오픈소스로 공개되었습니다.
HTML과 JavaScript가 섞이는 JSX 구문에 부정적인 의견이 있었습니다.
관심사 분리 원칙을 위배한다는 논리였습니다.
하지만 React는 컴포넌트 기반으로 관심사를 분리하므로 오해였습니다.
컴포넌트 기반 재사용과 부분 렌더링의 성능 이점이 알려졌습니다.
커뮤니티가 생성되고 상태 관리, 라우터, 서버 사이드 렌더링 등 라이브러리가 만들어졌습니다.
Yahoo! 메일, Netflix 등이 React를 선택했습니다.
Netflix는 React로 사이트를 리뉴얼하기 전 테스트를 통해 장점을 확인했습니다.
React는 웹 개발 프레임워크를 지향하지 않으므로 다양한 라이브러리와 함께 사용됩니다.
상태 관리: Redux, Zustand, Recoil, Jotai
SSR: Next.js, Remix, Hydrogen
애니메이션: Framer Motion, react-spring, React Move
차트: Recharts, visx, nivo
폼: React Hook Form, Formik, React Final Form
서버에서 React를 활용하는 것이 현재 개발 방향입니다.
서버 컴포넌트가 등장했고 간단한 API는 Next.js에서 만들 수 있게 되었습니다.
잘못된 내용이 있다면 댓글로 알려주세요. 감사합니다.