[리액트] React란

React

리액트공식문서에서는 React를 사용자 인터페이스를 만들기 위한 JavaScript라이브러리 라고 소개하고 있다.

• SPA 기반 프른트앤드 개발 프레임워크
• 컴포넌트 단위를 가진다.
• Angular, Vue 보다 인기가 많다.

SPA(Single Page Appliction)

하나의 페이지로 이루어진 어플리케이션.
화면에 내용이 변경될 때 계속해서 새로운 페이지를 호출하거나 새로고침해서 사용자한테 내용이 변경된 것을 제공하기 보다 하나의 페이지를 여러 부분적 단위로 나누고 각 부분별로 변경된 값을 가져옴으로서 하나의 페이지로 어플리케이션이 돌아가도록 하는 개념.
기존의 개념인 MPA(Mutil Page Application)과 반대 되는 개념이며, 리액트 프레임워크의 생명주기와도 관련이 깊다.

SPA는 검색최적화(SEO)에 약하다. 왜냐하면 검색엔진 각 html 문서의 내용으로 해당 문서가 어떤 내용인지 가져오고 사용자가 검색했을때 관련문서를 노출하게 되는데 SPA는 기본적으로 문서의 뼈대만 제공하고 내용에 해당하는 부분은 사용자의 요청에 따라 생성되기 때문이다.

예전에 svelte프레임워크를 사용해서 개발해본 적이 있다. spa로 구성해서 사용했었다. 당시 서버 요청에 따라 프로젝트내부의 문서를 읽어와서 템플릿으로 사용하고 메일을 전송해야 했었다. 이때 SPA 기반 렌더링이 되어있었기 때문에 문서의 내용을 가져와도 빈 껍데기 화면만 가져와졌던 기억이 난다. 당시에는 해당 부분을 해결하기 위해 별도로 html문서를 만들고 해당 문서의 내용을 전부 읽어와서 새로운 화면을 그려서 메일 템플릿을 구성했었던 경험이 있다.

이러한 단점을 극복하기 위해 SPA기반 프레임워크 사용자들은 다양한 방식을 고려하고 있으며 React의 경우 대표적으로 next.js를 사용한 방법이 있다.

왜 React인가

• 점유율 및 사용량
• React Native와 상생한다는점. 모바일 어플리케이션을 보다 쉽게 만들수 있다.

컴포넌트

리액트가 채택한 개발 방법!
헤더 컴포넌트, 바디 컴포넌트, 푸터 컴포넌트 ...

컴포넌트롤 조각조각내어 조립함으로서 벽돌을 쌓아 올리듯 개발하게 된다.
(조각조각 따따따...꺼내보고.따따따..널다시 조립할꺼야...)