[ React ] 리엑트란, React ? ( 용어 정리 )

@ 궁금하게 된 이유

리엑트 공부를 꾸준히 하다 보니까 결국 JSP, SPA 등 관련 용어가 많이 나오고 기술만 사용하는 것이 아닌 정리를 꾸준히 해야 겠다는 생각으로 작성 하게 되었고 React를 제대로 알고 싶어서 그렇당

 

---

@ 공부 ( 용어 정리 )

## 리엑트란?

웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다.

그래서 Angualr, Vue, React 등이 나오게 되었습니다.

## Virtual DOM

Virtual DOM 은 가상의 DOM 입니다. 변화가 일어나면, 실제로 브라우저의 DOM 에 새로운걸 넣는것이 아니라, 자바스크립트로 이뤄진 가상 DOM 에 한번 렌더링을 하고, 기존의 DOM 과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이죠.

전에 DOM을 변경할때는 직접 id  를 하나 하나 직접 선택해서 바꿔 줬다. 업데이트를 할때 마다 하나 하나 해야 했다.

 

하지만 react 는 상대가 누구든 다 날려버리고 새로 만든다! 라는 발상에서 시작되었다. 

 

> 업데이트에 대한 생각을 버려도 된다. 

> 하지만 속도가 굉장히 느리다.

> 그러나 Virtual DOM 을 이용해서 속도가 느린 것을 방지 하게 되었다.

> Virtual DOM 과  real DOM 을 비교해서 (비교알고리즘) 을 통해서 틀린 부분만 바꿔준다. 

그래서  UI 를 어떻게 업데이트 할지가 아닌 UI 를 어떻게 보여줄지 집중! 

 

## SPA

SPA(Single Page Application) 란 최초 한번 페이지 전체를 로딩한 이후 부터는 데이터만 변경하여 사용할 수 있는 웹 애플리케이션을 의미한다. 전통적인 웹 방식은 요청 시 마다 새로고침이 일어나면서 서버로 부터 리소스를 전달받아 해석하고 화면에 렌더링 하는 방식이였다.

 

Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했죠.

 

요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문이지요.

그래서 우리는 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여주지요.

 

싱글페이지라고 해서, 한 종류의 화면만 있냐구요? 그건 아닙니다. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있겠지요. 또한 이 화면에 따라 주소도 만들어줘야 합니다. 주소가 있어야, 유저들이 북마크도 할 수 있고 서비스에 구글을 통해 유입될 수 있기 때문이죠. 다른 주소에 따라 다른 뷰를 보여주는것을 라우팅 이라고 하는데요, 리액트 자체에는 이 기능이 내장되어있지 않습니다. 따라서 우리가 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 합니다.

 

@ 그럼 SPA는 React만 가능한것인가?

 

## Componet

컴포넌트는 UI  조각이라고 생각하면 된다.

const Hello =({name}) => <div> Hello,{name} </div>

## JSX

JSX 태그 문법은 문자열도 HTML도 아닙니다.

이 문법은 JSX라고 부르며, 자바스크립트의 문법 확장입니다. JSX를 리액트와 함께 사용하여 UI가 실제로 어떻게 보일 지 설명하는 걸 권장합니다. JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있습니다.

class App extends Component {
render() {
return (
<div className="App">
	<header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
          	Edit <code>src/App.js</code> and save to reload.
          </p>
          <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer>
          	Learn React
          </a>
	</header>
</div>
);
}

위에 보면 render() 안에 "" , '' 없이 그냥 html 문자가 써있는데 이런 코드를 JSX 라고 합니다. 

 

장점은 

1. 보기 편하다,

2. 오류검사 > 바벨이 코드를 변환하는 과정에서 이를 감지해서 알려줍니다. (  babel-loader를 사용해서 자바스크립트로 바꾸는 과정 )

3. 더욱 높은 활용도 > Html 과 비슷해서 쉽게 사용가능하다. 

## JSX 규칙

1. 감싸인 요소 

> 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다. 

reder(){
  <h1>하하</h1>
  <h1>하하2</h1>
}

(x)

reder(){
  <div>
    <h1>하하</h1>
    <h1>하하2</h1>
  </div>
}

(o)

Virtual DOM 에서 컴포넌트 변화를 감지해 낼때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM트리 구조 하나여야 한다는 규칙이 있기 때문입니다. 

 

2. Fragment

JSX 안에 자바스크립트 표현식 을 중괄호로 묶어서 포함시킬 수 있습니다.

예를 들어, text  를 유효한 표현식으로 표현하면 아래와 같이 표현합니다.

 

리액트 v16 이상에서는 Fragment 컴포넌트가 도입되었습니다. 

div 같은 것으로 감싸지 않고 여러요소를 렌더링하고 싶다면 리액트를 불러올 때 Component 와 함께 Fragment를 불러올수 있습니다.

 

class App extends Component {

render() {
  var text = true;
  var condition;
  if(text)
  condition="참참참";
return (
      <div>
        {
          text ? '참' : '거짓'
        }
          <h2>{condition}</h2>
        {
           text && '보여주세요'
        }
      </div>
	);
 }
}

조건문을 표현할때 text ? 참으로 얻고 싶은 값 : 거짓으로 얻고 싶은 값  ? 연산자를 사용합니다. 

하지만 return 밖에서는 조건문 if 사용이 가능합니다. 

 && 연산자로 조건부 렌더링을 할 수 있습니다.

---

참고 문서

https://velopert.com/3612

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG

https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html

React – A JavaScript library for building user interfaces

https://boxfoxs.tistory.com/395