React - 입문
리액트는 현재 현업에서 인기 있는 웹/앱의 view를 개발할 수 있도록 하는 라이브러리이다.
보통 우리가 생각하는 어플리케이션을 만들기 위해서는 사용자가 조작하기 위한 UI, UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다.
이렇게 특정 부분을 나누어 개발하는 방법을 MVC패턴 (모델-뷰-컨트롤러), MVVM패턴 이라고 하며, React.js
는 view 즉 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다.
React의 특징
React.js를 처음 배우면 React.js의 특징으로 다음과 같은 말을 볼 수 있다.
리액트는 선언형 성격에 맞게 컴포넌트를 얻기 위해 jsx문법을 통해 구현한다.
리액트를 사용할 때 화면 설계라는 초점에 맞춰서 개발할 수 있도록 해주므로, 다른 부분에 대한 고민을 최소화 해주어 높은 생산성을 보장할 수 있도록 해준다.
우리는 Component 단위로 개발을 해야한다.
컴포넌트는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이다. 리액트는 웹에서 쓰는 각 요소들을 컴포넌트로 만들 수 있게 해 기존의 UI를 다른 화면에서 다시 쓰거나, 다른 프로젝트에서 다시 쓸 수 있도록 하는 장점(높은 재사용성)을 가진다.
-독립적인 코드 블럭 (HTML + CSS + Javascript)
-중복되는 키워드를 하나의 컴포넌트로 표현하고 싶다.(이것을 이룬게 react이다.)
-작업의 단위 = 컴포넌트
HTML element와 컴포넌트를 비교해서 살펴보자. 먼저, <img src = "이미지 주소"> 와 처럼 컴포넌트는 내가 지은 이름으로 태그를 만들 수 있다.
img에서는 이미지 주소를 바탕으로 이미지를 그린다, 컴포넌트에서는 해당 태그에 어떤 로직을 작성했는지는 모르지만 해당 태그안에서 이름을 사용해서 포현을 한다.
html에서는 어트리뷰트라고 하지만 컴ㅁ포넌트에서는 어트리뷰트라 하지 않고 prop라고 한다.
외부에서 <내가 지은 이름>태그 안으로 어떤 데이터를 넣어주고 싶을 때 prop를 사용한다.
여러개 있을 경우 props라고 한다.
이번에는 <button> 태그이다. 버튼 태그 사이의 한글을 읽어들여 렌더링항 때 사용한다. 이는 컴포넌트에서도 마찬가지 이다. 컴포넌트 태그 사이에 데이터를 담을 수 있는데 이는 children이라고 한다. children도 props중 하나이다.
Virtual Dom
가상돔: 어딘가에 데이터로만 존재하는 것. 하는 역할은 가상의 트리 구조를 만들고 이를 실제로 브라우저에 그리는게 react
진짜 돔:(개발자 도구로 찍히는) 눈에 보이는 것들
가상돔을 왜 쓸까..?
돔을 직접제어하면 바뀐부분만 정확히 바꿔야 한다.
돔을 가상으로 제어하면
이전상태와 이후상태를 비교하여
바뀐부분을 찾아내서 자동으로 바꿔준다.
가상돔은 사실 직접 돔을 제어하는 것 보다는 속도가 느리다.
가상돔을 사용하지 않는 프레임워크가 있는데 Svelte이라는 프레임워크다.
JSX
JSX는 자바스크립트를 확장한 문법이다. =자바스크립트이다.
JSX는 템플릿 문자열이 아니라 자바스크립트로 변환되는 코드이다.(babel 혹은 타입스크립트가 변환을 해준다.)
템플릿은 html로 변환된다. 타입스크립트와 리액트가 잘 맞는 이유는 JSX와 호환이 잘 되기 때문이다.
CSR(Client Side Rendoering)
js가 전부 다운로드 되어 리액트 애플리케이션이 정상실행되기 전까지는 화면이 보이지 않는다.
js가 전부 다운로드되어 리액트 애플리케이션이 정상실행된 후 화면이 보이면서 유저가 인터렉션이 가능하다.
1.서버가 빈 html을 response했다. (화면에 아무것도 보이지 않는다.)
2.html 안에 들어있는 js파일을 서버로 부터 다운로드한다.
3.브라우저가 다운로드된 js파일을 실행한다. (js 안에 react 라이브러리가 포함되어 있다. 아직 로딩상태)
4.리액트 실행 직후에 현재경로에 해당하는 페이지를 렌더링 (이제 화면이 보이고 인터렉션가능)
이과정은 SCR만 구현되어 있는 react페이지를 사용자가 처음 방문할때만 일어난다. 또, 인터넷이 매우 느려야만 눈에 보일 수 있다. 1번과 2번 사이에 한가지 추가되는 일이 있는데 바로 캐싱과정이다. 브라우저 내에서 로컬 캐싱이 되기 때문에 처음 방문할떄만 발생하게되는 것이다.
SSR(Server Side Rendering)
js가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없다.
js가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용가능하다.
1. 서버가 문자열로 이미 표현된 html을 내려준다.
2.이 html을 클라이언트가 받는 순간 화면에 문서가 나타난다. 보이고 나서html 파일안에 있는 js파일을 받아온다. 이때는 화면이 보이긴하지만 사용할 순 없는 단계이다.
3.리액트를 실행한다. (이때도 동작하지 않는다.)
4.리액트가 실행된 후 인터랙션이 가능하다.
사실상, 페이지를 렌더하는 것은 SSR방식이지만 react를 실행하는 것은 CSR방식으로 한다.
리액트가 하는 일
리액트의 핵심 모듈 2개로 리액트가 하는 일을 알아보자.
리액트를 사용하려면 두개의 모듈(라이브러리)가 필요하다. 2번을 통해 컴포넌트를 생성한다.
<Hello name = "Mark">같은 컴포넌트를 만들 수 있다. 만든 컴포넌트로 페이지를 그려야 하는데 이를 도와주는게 1번 ReactDOM이다.
ReactDOM에서 가장 많이 쓰는 함수는 render라는 메서드이다. 무엇을, 어디에 그릴 것인지 지정해준다. 이 render는 프로그램에 진입하는 main에 해당하는 역할을 한다.