What is React?
React가 탄생한 이유에 대해 살펴보며, React의 중요한 특징들을 알아봅니다.
Last updated
React가 탄생한 이유에 대해 살펴보며, React의 중요한 특징들을 알아봅니다.
Last updated
1~20년 전의 웹사이트를 생각해봅시다.
버튼을 클릭하여 페이지를 이동하면, 새로고침이 발생하면서 페이지를 새로 불러오는 모습이 그려집니다.
이렇게 여러 개의 페이지로 구성되어 있고, 새로운 페이지를 요청할 때마다 각 페이지를 위한 리소스들을 다운로드하여 화면의 표현하는 방식을 MPA(Multiple Page Application)라고 합니다.
여러 개(Multiple)의 Page로 구성된 Application.
새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스(html, css, javascript)가 다운로드된다.
페이지를 이동하거나 새로고침하면 전체 페이지를 다시 렌더링한다.
인터넷과 스마트폰의 발전으로 인해, 웹은 기존과는 다른 역할을 담당하게 됩니다.
기존에는 일방적인 정보전달이 목적이었다면, 이제는 유저와의 Interaction이 굉장히 중요한 요소로 작용합니다.
유저가 웹을 통해 데이터를 전달하고, 요청하는 등 이벤트를 발생시키는 경우가 많아졌다는 뜻입니다.
데이터를 가져와 클라이언트가 다시 화면을 그리는 동안 사용자는 빈 화면만 보고 기다려야 하네...? 우리가 원하는 UX(유저경험)가 아니야!
이러한 단점을 개선하기 위해, SNS의 선두주자였던 Facebook에서 React를 개발하게 됩니다.
페이스북이 만든 Javascript 기반의 라이브러리.
사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 라이브러리.
'Component'라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움.
쉽게 얘기하면, 작은 부품들을 조립하여 하나의 어플리케이션을 만들 수 있게 해줌.
JSX라는 Javascript 확장문법을 사용하여 javascript 파일에 html을 작성할 수 있게 해줌.
지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다.
React는 SPA(Single Page Application) 개발 라이브러리입니다.
한 개(Single)의 Page로 구성된 Application.
하나의 html 파일을 가지고, 나머지는 javascript를 이용하여 동적으로 화면을 구성
단 한 번만 리소스(HTML, CSS, JavaScript)를 로딩하며, 그 후에는 데이터를 받아올 때만 서버와 통신한다.
즉, 최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로 부터 받아서 화면을 갱신한다.
새로고침을 통한 페이지 리로딩을 최소화하기 때문에, 네이티브 앱과 유사한 UX을 제공할 수 있어!!
데이터 바인딩 : 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것
