[React] 1. 리액트에 대한 사전 지식

안녕하세요. 박기린 입니다.

자바스크립트에 이어서, 이번에는 JavaScript의 client-side 라이브러리인 React에 대해 알아보겠습니다.

 

 

 

왜 자바스크립트보다 리액트인가요?

이미지 출처 : https://www.udemy.com/course/best-react/

요약하자면, 반응형 웹을 쉽고 빠르게 만들 수 있기 때문입니다.

페이지의 버튼을 누르면 글자가 바뀌는 사이트가 있다고 가정을 합니다. JS는 querySelector()로 글자가 담긴 텍스트를 찾은 후에, textContent property를 수정해주고, 변화한 값이 스크린에 보여질 수 있도록 DOM을 편집해주고 등등 아주 많은 과정을 직접 적어줘야 합니다.

하지만 React는 정말 간단하게 이를 구현할 수 있습니다.

 

 

 

 

 

---

Single Page Applications (SPAs)

이미지 출처 : https://www.udemy.com/course/best-react/

리액트는 싱글 페이지 앱이라는 말을 자주 들으실 겁니다. 싱글 페이지 앱인 경우, 서버는 user에게 js파일과 단 하나의 html 페이지만 보냅니다. React는 하나의 index.html 위에서 마치 다양한 페이지가 있는 것처럼 작동합니다. React로 하나의 html 페이지에서 여러 페이지들을 만들어내고, 심지어 페이지 전환에도 React를 사용합니다.

 

React를 사용하는 Netflix 사이트에서 my list를 클릭하면, 마치 새로운 페이지를 접속하는 것처럼 user에게는 보입니다. 하지만 실제로는 서버로부터 새로운 html을 요청하지 않습니다. React 엔진이 JS 코드에 따라 자체적으로 html DOM을 수정할 뿐입니다.

 

덕분에 매끄로운 ui와 더 나은 사용자 경험을 제공할 수 있습니다.

 

 

 

 

 

---

컴포넌트란 무엇인가?

이미지 출처 : https://www.udemy.com/course/best-react/

React는 Component(컴포넌트)가 전부라고 할 수 있습니다.

Component : UI에서 재사용할 수 있는 Building 블록입니다. '스타일을 구성하기 위해 필요한 html과 css 코드', '로직을 구현하기 위한 자바스크립트'의 결합이라고 보면 됩니다.

컴포넌트는 재사용에 유용하기 때문에 반복되는 코드를 줄여서 가독성과 호율성을 높입니다.