React를 시작하기 전에 (1)

React를 설명하려니 어디서부터 해야할지 감이 안 잡히지만...

일단 이 블로그는 내가 생각하고 이해하는대로 마구 작성해두는 일기와도 같다고 생각하고 작성해보겠다.

React란?

React 에 대해서 이야기 하기 전에 React가 왜 개발되어야만 했는지를 생각해봐야할 것 같다.

물론 아닌 학원도 있었겠지만 국비지원학원에서 공부한 사람들이라면 분명 서버와 클라이언트가 별개의 프로젝트로 구분되어있지 않았을 거고, 학원에서 가르쳐주는  MVC 패턴에 따라 구현하는 프로젝트를 해봤을거라고 생각한다. 그 때 html 파일이든 jsp파일이든 여러 개의 view 라고 부르는 페이지를 잔뜩 만들고 복사,붙여넣기 해서 주소에 따라 화면을 바꿔서 꺼내보여주는 형식의 웹사이트를 만든다.

그걸 Multi Page Application(MPA)라고 한다.

말 그대로 다수의 페이지를 가지고 있는 Application을 의미하고, 미리 만들어둔 페이지를 정해진 주소에 따라 요청받을 때마다 꺼내서 보여주는 형식이다.

근데 이 방식이 참 불편하다. 매번 새로운 페이지를 꺼내서 렌더링 해야하다보니, 페이지가 전환될 때 마다 화면이 하얗게 되었다가 다시 보이는 현상이 계속 발생하고, 속도도 느려지게 된다. 즉, 프론트엔드에서 추구하는 가장 이상적인 가치, 우수한 UX 제공, 사용자 경험을 제공하는데 문제가 생기는 것이다.

이 문제를 해결하기 위해 고안된 개념이 페이지를 모두 요소별로 쪼개서 만들어 놨다가 페이지는 하나만 만들어두고 공통적으로 사용하게 되는 부분은 가만두고 매번 바뀌어야하는, 필요한 부분만 갈아끼면 되지 않을까? 라는 생각에서 나온 Single Page Application(SPA)다.

이 SPA를 구현하기 위해 만들어진 것 중에 가장 대표적인 녀석이 React 되시겠다.

여기서 쪼개서 만들어 놓은 요소들을 일반적으로 Component라고 부른다.

이런 식으로 UI를 구현하게 되면 굳이 같은 요소들을 다시 렌더링 할 필요가 없기 때문에 화면이 표시되는 속도가 빨라지고, 한꺼번에 렌더링 할 필요도 없기 때문에 화면이 한번 하얗게 변했다가 새로운 페이지가 보여지는 현상도 없어진다.

또 각 요소들을 한번만 만들어두고 비슷하게 사용할 법한 곳에 다시 재활용할 수 있다.

 

 

 

더 설명하면 글이 상당히 길어질 것 같으니 여러 개로 나누어서 정리해야겠다...