React 지식+1

React?

• React는 JavaScript 객체 형태의 Virtual DOM을 사용하여 어플리케이션의 성능을 향상

• 프레임워크인 Vue와 다르게 컴포넌트 기반의 라이브러리

• 간편한 UI 수정과 재사용의 용이함

• 서버사이드 렌더링(SSR), 클라이언트 사이드 렌더링(CSR) 둘다 지원

• 많은 사이트에서 사용중.
  상위 1만개 사이트 중 약 44%가 react를 사용한다고 함

• JavaScript 라이브러리이기 때문에 JavaScript의 배경지식이 필요

---

React-DOM?

DOM?

• Document Object Model

• HTML 및 XML 문서를 위한 프로그래밍 인터페이스

• 웹 페이지를 이루는 태그들을 JavaScript가 이용할 수 있도록 브라우저가 트리구조로 만든 객체 모델

• DOM 은 HTML과 JavaScript를 서로 이어주는 역할

Virtual DOM?

• DOM에서의 속도적인 부분과 개발자의 노고를 개선하기 위해 탄생

• html 마크업을 시각적인 형태로 변환하는 시간을 최소한의 DOM조작을 통해 작업을 처리

• 특정 페이지에 데이터가 변했을 때, react가 DOM을 업데이트 시키는 절차는 다음과 같음

1. 변화된 데이터를 포함한 버전을 가상돔으로 바꿈

2. 가상돔끼리 비교

3. 실제로 바뀐 부분만 적용
   

출처

---

JSX

이게 무엇

const element = <h1>Hello, world!</h1>;

• 위와 같은 희한한 태그 문법이 JSX

• JSX는 javaScript의 확장 문법으로 XML과 비슷하게 생겼다

• react는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리

• JSX를 사용하지 않은 코드

function App(){
    return React.createElement("div", null, "Hello");
}

• JSX를 사용하면 다음과 같이 바뀐다

function App(){
    return (
    	<div>Hello</div>
    );
}

JSX 규칙

• 컴포넌트에 여러 요소가 있다면 하나의 부모 요소로 감싸야 함
  -> Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 하기 위함

• JSX 내부에 코드를 { }로 감싼다면 표현식 작성 가능

function App(){
    const name = 'react';
    return(
        <div>Hello! {name}</div>  // 여기
    );
}

• JSX 내부 표현식에서 if문을 사용할 수 없기 때문에
  JSX 밖에서 사전 값을 설정하거나, 조건부 연산자(삼항 연산자) 사용

• react 컴포넌트 함수에서undefined만 반환하여 렌더링 금지

출처

---

버전 번호

• x.y.z 형태로 표기

• 치명적인 버그를 수정할 때는 z번호의 변경

• 새로운 기능을 출시하거나 치명적이지 않은 버그의 수정은 y번호의 변경

• 호환성이 유지되지 않는 변경이 있을 때는 x번호 변경하여 배포

• 나는 17.0.2 버전을 사용