[React] React 사전 지식(React를 쓰는 이유) & 개발환경 체크

React를 쓰는 이유

0. Component 기반의 UI라이브러리로, Component들을 만들어, 레고처럼 필요한 것들만 선택해 사용하면 됨

1. Virtual DOM을 이용하여 이전 페이지와 바뀐 부분들을 감지해 변화된 부분만 재 렌더링해줌

2. CSR방식을 채택하여 SPA(Single Page Application)구축을 가능하게 해줌

3. JSX문법을 사용하여 컴포넌트 별로 구성이 가능(Babel이 HTML문서로 변환해 줌) -> 재사용성이 좋아짐

4. 리액트로 웹을 개발하면 리액트 네이티브를 통해 앱 개발이 쉬워짐

5. 선언형 프로그래밍 방식임 ; 그냥 목적을 바로 말함

vs 명령형 프로그래밍 방식 ; 절차를 하나하나 다 나열해야함 ex) jQuery

 

Virtual DOM

; UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 "실제" DOM과 동기화하는 프로그래밍

- 이 접근 방식이 React의 선언적 API를 가능하게 함

DOM을 직접 제어하는 경우

; 바뀐 부분만 정확히 바꿔야 한다.

DOM을 직접 제어하지 않는 경우

; Visual DOM를 사용해서, 이전 상태와 이후 상태를 비교하여, 바뀐 부분을 찾아내서 자동으로 바꾼다.

 

CSR vs SSR

CSR(Client Side Rendering)

; JS가 전부 다운로드 되어 리액트 애플리케이션이 정상 실행되기 전까지는 화면이 보이지 않음

- 초기 화면 로드는 느리지만, 일단 로드가 되고나면 사이트 내에서 돌아다닐 때 로드되는 과정이 없어 사용성이 좋음

 

SSR(Server Side Rendering)

; JS가 전부 다운로드 되지 않아도, 일단 화면은 보이지만 유저가 사용할 수 없음

- 렌더링이 빠른 장점이 있지만, 페이지를 이동할때마다 화면 깜빡임이 있음

# 렌더링 ; 브라우저가 사용자가 보기 편하게 표시하는 과정

 

SPA (Single Page Application)

; 차세대 패러다임. 단일 페이지 어플리케이션은 브라우저에 로드되고 난 뒤 페이지 전체를 서버에 요청하는 것이 아니라 최초 한번 페이지 전체를 로딩한 후 이후부턴 데이터만 변경해서 사용할 수 있는 웹 어플리케이션

- React는 프레임워크가 아닌, '라이브러리'이기 때문에 앱의 규모가 커질수록 신경 신경 써야하는 부분들이 많아져 난이도가 급 상승

 

JSX

; JS를 확장한 문법

- 가독성 매우매우 좋음

- babel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

1. 태그는 항상 닫혀야 한다. ex) <div></div>, <App />

2. 함수형 컴포넌트의 이름은 항상 대문자로 시작 ex) App

3. 최상위 요소가 하나여야 한다.

4. 자식들을 바로 랜더링하고싶으면, <>자식들</> 사용 => Fragment. 5번 문제 해결

5. JS 표현식 ; {표현식}

6. if문 사용 불가 -> 삼항 연산자 혹은 && 사용

7. style을 이용하여 인라인 스타일링 가능

function App() {
  const style = {
    red: {
      backgroundColor: "white",
      color: "red",
    },
  };
  return (
    <div className="App">
      <h2 className="title" style={style.red}>
        안녕 리액트
      </h2>
    </div>
  );
}

위처럼 dash-case가 아닌, camelCase사용

8. class 대신 className 사용