[React] 0. JS 이해

JS(자바 스크립트)

 

리액트가 무엇인가 를 이야기 하기 위해서 우선 JS가 무엇인지 먼저 설명해야 합니다.

JS, 일명 자바 스크립트는 웹이나 앱 등의 프론트 엔드 애플리케이션을 관리하기 위해 사용되는 스크립트 언어입니다.

이러한 애플리케이션을 자바 스크립트로만 관리하는 것은 어려움이 있어, 크로스 플래폼 개발에 사용되는 React Native나

JS를 이용해서 데스크톱 애플리케이션을 만들 수 있게 해주는 프레임워크 일명 일렉트론으로 유명한 VS Code 등

여러 프레임워크들을 통해 이를 해결하고 있습니다.

 

출처: 웹Frameworks

---

JS가 사용하는 프레임워크들은 주로 MVC 아키텍처의 형태를 취합니다.

MCV 아키텍처는 M(odel) C(ontroller) V(iew) 의 구조를 취하고 있는데 

 

Model : 애플리케이션에서 사용하는 데이터를 관리하는 영역
Controller :  사용자에 작업에 따라 모델의 데이터를 조회, 수정 후 뷰에 반영
View : 사용자에게 보이는 영역

 

프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰을 반영합니다.

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=je_un&logNo=222035464249

 

반영하는 과정에선 뷰를 변형시켜서 사용합니다.

{
"title": "Hello",
"contents": "Hello World",
"author": "velopert",
"likes": 1
}

<div id="post-1">
  <div class="title">Hello</div>
  <div class="contents">Hello World</div>
  <div class="author">velopert</div>
  <div class="likes">1</div>
</div>