1장 리액트 시작, 2장 JSX (리액트를 다루는 기술)

리액트 이해

• 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다.

• 오직 V만 신경 쓰는 라이브러리 입니다.

렌더링

사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 합니다.

Q. 리액트 라이브러리는 뷰를 어떻게 렌더링하길래 데이터가 변할 때마다 새롭게 리렌더링하면서 성능을 아끼고, 최적의 사용자 경험을 제공할 수 있을까요?

A. 리액트 컴포넌트가 최초로 실행한 '초기 렌더링'과 컴포넌트의 데이터 변경으로 다시 실행되는 '리렌더링' 개념을 이해해야 합니다.

초기 렌더링
맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다.
리액트에서는 이를 다루는 render 함수가 있습니다.

이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환합니다.

조화 과정
리액트에서 뷰를 업데이트할 때는 "조화 과정"(reconciliation)을 거친다라고 하는 것이 더 정확한 표현입니다.

컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문입니다.

컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출합니다.

그러면 그 데이터를 지닌 뷰를 생성해 내겠죠?

하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었떤 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교합니다.

둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 하는 것이죠.

리액트의 특징

주요 특징 중 하나는 virtual DOM을 사용하는 것입니다.

• DOM: 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다.

• 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용하지요

DOM의 치명적인 문제점: 동적 UI에 최적화되어 있지 않다는 것입니다.

해결법
: DOM을 최소한으로 조작하여 작업을 처리하는 방식으로 개선할 수 있습니다.

리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세가지 절차를 밟습니다.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링합니다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
3. 바뀐 부분만 실제 DOM에 적용합니다.

리액트는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 위해서 만들었습니다.

Node.js

Node.js: 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임 입니다.
Node.js 패키지 매니저 도구인 npm이 설치 됩니다.

create-react-app

create-react-app: 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구 입니다.

JSX

• JSX 란? 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다.

• 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

Q. ReactDom.render는 무엇인가요?
A. 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있습니다. 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정합니다.

감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 합니다.

function App() {
  return(
    <>
      <h1>안녕 리액트</h1>
    </>
    )
}

<> </> 작성하지 않으면 제대로 작동하지 않습니다.

Q. 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까요?

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

JSX 조건부 연산자

• 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸면 됩니다.

• JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수는 없습니다.

• JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자를 사용하면 됩니다.

AND 연산자(&&)를 사용한 조건부 렌더링

특정 조건을 만족할 때 내용을 보여주고 만족하지 않을 때 아예 아무것도 렌더링 하지 않아야 하는 상황이 올 수 있습니다.

&&연산자를 사용해서 조건부 렌더링을 할 수 있습니다.

function App(){
  const name="리웩트";
 return
  <div>{name2 === "리액트" && <h1>리웩트 아닙니다</h1>}</div>;
}

undefined를 렌더링 하지 않기

리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안됩니다.

어떤 값이 undefined일 수도 있다면 OR(||) 연산자를 사용하면 해당 값이 undefined 일 때 사용할 값을 지정할 수 있으므로 오류를 방지할 수 있습니다.

반면 JSX 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

인라인 스타일링

링개트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어 주어야 합니다.

 const style = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16,
  };

class 대신 className

<h2 className="react">잘 작동하니?</h2>

주석

JSX 안에서 주석을 작성하는 방법은 {/* */}