React 입문_2

 

1. Angular vs React vs Vue 비교

npm trend를 보면 가장 사용이 많이 되는 모던 라이브러리는 React다.

1.1 Angular

• Angular는 React 전에 있던 프레임 워크로, 하나의 프레임워크로 프로젝트를 진행할 수 있게 한다는것을 추구한다.
• 이미 프레임이 정해져 있기 때문에 자유도가 거의 없다.
• Angular는 버전 1에서 버전 2로 되면서 완전히 다른 것으로 바뀌었다. 버전 2에서 typescript로 바뀌면서 기존 버전에서 완전히 단절되면서 Angular의 사용자가 많이 유출되었다.

1.2 React

• React는 라이브러리로, 유저 인터페이스(view)를 다루고 관리하기 위해서 만들어진 라이브러리다.
• 오직 Rendering과 Update에 중점을 둔 tool로써, 그 외에 다른 기술들, 예를 들면 API등 은 포함되지 않는다.
• 타입스크립트와의 매치가 가장 좋다.

1.3 Vue

• 라이브러리와 프레임워크의 중간 포지션을 취하고 있다. 다시말해서 라이브러리로 사용하고 싶으면 그렇게 사용하고, 프레임워크로 사용하고 싶으면 프레임워크(=정해진 대로) 사용한다는 것을 추구한다.

 

2. Component Based Development

• 프론트엔드 개발자들이 원해왔던 것은 독립적인 코드 블록이다. 작업의 단위를 하나의 컴포넌트로 만들어서 컴포넌트 별로 관리하려고 하는 매커니즘이다.
• HTML + CSS + JavaScript를 합쳐서 하나의 컴포넌트로 만드는 것을 말한다. 이렇게 하나의 컴포넌트로 만들어서, 원하는곳에 컴포넌트만 넣어 재사용을 간단하게 할수 있다.
• 이렇게 하나의 컴포넌트 단위로 분할하여 만들어 내는것을 리액트가 추구하는 바이다.

 

3. Virtual DOM

• 기존에는 Jquery처럼 직접 DOM을 다루어서 페이지를 만들었고, 그것을 비교적 간편화하는 작업을 Angular 등과 같은 tool(라이브러리, 프레임워크)들이 하였다.
• 리액트에서는 이전과 완전히 다른 방식으로 DOM을 조작하는데, 가상의 DOM 트리구조를 만들어서 실제 DOM을 브라우저에 그리는 역할을 리액트가 맡는다.
• virtual DOM이란 가상인 DOM으로 데이터로만 이루어져 있어서 보이지 않는다. 이 가상의 DOM을 다루어서 웹페이지를 만든다.
• 즉, 개발자가 가상의 DOM을 조작하여 상태가 업데이트되면 (State Change), 리액트가 가상의 DOM에서 달라진 부분을 비교하여 RealDOM으로 다시 그린다.

** 리액트의 가상의 돔을 사용하지 않은 새로운 라이브러리 중의 하나는 스벨트이다.

 

4. CSR vs SSR

4.1 CSR (클라이언트 사이드 렌더링)

• JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않는다.
• JS 가 전부 다운로드되어 리액트 애플리케이션이 정상 실행된 후 화면이 보이면서 유저가 인터렉션 가능하며, 최근 프레임 워크들이 주로 선택하는 렌더링 방식이다. 어플리케이션의 속도가 빨라지고, 컴퓨터의 성능이 좋아지면서 CRS방식이 중요해졌다.
• 클라이언트 사이드 렌더링 방식이 늘어나면서 서버는 이전처럼 html을 보내줄 필요없이 데이터 관리와 저장을 담당하는 API서버가 되었다.
  • 참고영상 ⇒ https://www.youtube.com/watch?v=RP_f5dMoHFc
  • Graphic QL : REST API가 복잡해지면서 새롭게 등장한 기술이다. 이는 클라이언트에서 쿼리문을 날려서 데이터를 원하는 형태로 가져올수 있는 기술이 적용되어서 유연하다는 장점이 있다.
• 이에 영향을 받아 API서버가 함께 중요해졌고 이로써 REST API가 등장했다.

4.2 SSR (서버 사이드 렌더링)

• JS 가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없다. (JS가 없어도 일단 화면이 보인다. HTML과 CSS가 이미 있기 때문)
• JS 가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행된 후, 유저가 사용가능하다.

 

5. JSX란

• 자바스크립트를 확장한 문법으로, React Element를 생성한다.
• JSX는 템플릿 언어처럼 보이지만, 실제로 브라우저에서 사용되면 JSX 표현식이 컴파일되어 자바스크립트 객체인 DOM을 생성하는 함수로 적절하게 변환된다.JSX의 컴파일은 바벨이나 타입스크립트가 트랜스파일링을 해준다. Angular와 vue 보다도 타입스크립트와의 매칭이 좋다.
• 즉, DOM을 생성하는 함수가 어떻게 실행되어야 할지를 알려주는 명령문으로써 작동하게 되는 것이다.
• 보통 Angular나 Vue는 템플릿 언어로, HTML 언어로 파싱이 되기 때문에 JSX와 완전히 다르다.
• JSX는 카멜 케이스 프로퍼티 명명 규칙을 사용한다. 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 검토과정(이스케이프)을 거치면서 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다.

5.1 JSX 과 React.createElement()

• 1. 첫번째 인수는 React 컴포넌트가 될 태그 이름을 문자열로 넣고
  2. 두번째 인수로 리액트 컴포넌트에 넣어주는 데이터 객체
  3. 세번째 인수로 자식으로 넣어주는 요소들을 입력하여 전달한다.Reate 엘리먼트를 생성할 때 React.createElement() 라는 메서드를 사용할 수 있다. 인수로 (tag이름, [props], [...children])를 전달할수 있다.
•  
• ReactDOM.render( React.createElement('h1', null, `type 이 "태그 이름 문자열" 입니다.`), document.querySelector('#root'), ); => // ReactDOM.render( // <h1>type 이 "태그 이름 문자열" 입니다.</h1>, // document.querySelector('#root'), // );
• 그러나 React.createElement() 는 컴포넌트가 복잡해질수록 전달할 인수가 복잡해지므로 가독성이 나빠지고 실수할 가능성이 커진다.
• 이러한 React.createElement() 의 단점을 해결해주는 것이 JSX다. JSX는 Babel이 컴파일을 하는데 이 과정에서 문법적인 오류를 인지하기가 쉬워서 실수를 줄일수 있다.

5.2 JSX 문

1. JSX는 표현식으로, JSX의 중괄호 안에는 유효한 모든 javascript 표현식을 넣을 수 있다. 표현식이 아닌 문은 올수 없다. (if문, for문 등)
2. 태그가 비어있다면 XML 처럼 </>를 이용해 바로 닫아주어야 한다. 자식요소가 있어도 꼭 닫아야 한다.const element = <img src={user.avatarUrl} />;
3. JSX 태그는 자식을 포함할 수 있다. 태그 사이에 있는 문자열을 자식(children)이라 한다.const element = ( <div> <h1>Hello!</h1> <h2>**Good to see you here.**</h2> </div> );
4. 최상위 요소가 하나여야 한다. 최상위 요소를 리턴하는 경우, () 로 감싸야 한다.
5. 자식들을 바로 랜더링하려면, <>자식들</>을 사용한다. = Fragmentconst Comp5 = props => { return ( <> <h1>제목</h1> <h2>부제목</h2> </> ); };
6. 자바스크립트 표현식을 사용하려면, {표현식}을 이용한다.
7. 표현식이 아닌 if문과 for문은 사용할 수 없기 때문에, 삼항연산자 또는 &&를 사용한다.
8. style을 이용해 인라인 스타일링을 할 수 있다.const Comp6 = props => { return ( <div> <h1 style={{ color: 'red'}}> 제목 </h1> <h2>부제목</h2> </div> ); };
9. class 대신 className을 사용하여 class를 적용한다.

// 1
const name = 'yuna';
const element = <h1> Hello, {name} </h1>;

// 2
const element = <img src={user.avatarUrl} />;

// 3
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

// 5
const Comp5 = props => {
   return (
   <>
     <h1>제목</h1>
     <h2>부제목</h2>
   </>
   );
 };
 
 // 8
 const Comp5 = props => {
   return (
   <>
     <h1>제목</h1>
     <h2>부제목</h2>
   </>
   );
 };