[Learning React] 4장 리액트의 작동 원리 5장 JSX를 사용하는 리액트

·2022년 10월 13일
0

Learning React

목록 보기
3/5

📌 4장 리액트의 작동 원리

✏️ React와 ReactDOM

React는 뷰를 만들기 위한 라이브러리이고, ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리이다.
React는 브라우저 DOM을 갱신해주기 위해 만들어진 라이브러리이며, 리액트에서 코드로 DOM API를 직접 조작하지 않고 어떤 UI를 생성할지 리액트에 지시하면 리액트는 명령에 맞춰 원소 렌더링을 조절해준다.

브라우저 DOM이 DOM 엘리먼트로 이뤄지는 것처럼 가상 DOM은 리액트 엘리먼트로 이뤄진다.
리액트 엘리먼트는 개념상 HTML 엘리먼트와 비슷하지만 실제로는 자바스크립트 객체이다. 또한 리액트 엘리먼트는 실제 DOM 엘리먼트가 어떻게 생겨야 하는지를 기술한다. 즉, 브라우저 DOM을 만드는 방법을 알려주는 명령이라고 할 수 있다.

✏️ React 엘리먼트 (Element)

React.createElement를 사용해 h1을 표현하는 리액트 엘리먼트를 만들 수 있다.

React.createElement("h1", {id : "recipe-0"}, "구운 연어")

렌더링 과정에서 리액트는 이 엘리먼트를 실제 DOM 엘리먼트로 변환한다.

<h1 id="recipe-0">구운 연어</h1>

리액트 엘리먼트는 단지 리액트에게 DOM 엘리먼트를 구성하는 방법을 알려주는 자바스크립트 리터럴에 불과하다.
리액트 엘리먼트의 내부는 아래와 같이 생겼다.

{$$typeof : Symbol(React.element),
 "type" : "h1",
 "key" : null,
 "ref" : null,
 "props" : {id : "recipe-0", children : "구운 연어"},
 "_owner" : null,
 "_store" : {}
}

📝 type property

만들려는 HTML이나 SVG 엘리먼트의 타입을 지정한다.

📝 props property

DOM 엘리먼트를 만들기 위해 필요한 데이터나 자식 엘리먼트들을 표현한다.

📝 children property

텍스트 형태로 표시할 다른 내부 엘리먼트이다.

✏️ ReactDOM

ReactDOM에는 리액트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어있다.
하나의 예시로 리액트 엘리먼트와 모든 자식 엘리먼트를 함께 렌더링하는 ReactDOM.render가 있다.

✏️ 리액트 컴포넌트의 역사

📝 1. createClass

2013년 리액트가 처음 등장했을 때 컴포넌트를 만드는 유일한 방법은 React.createClass를 사용하는 것이였다.
그러나 리액트 16부터 React.createClass는 공식적으로 사용 금지됐다.

📝 2. class component

ES 2015에 클래스 문법이 도입되면서 React.Component를 사용해 컴포넌트를 만들 수 있게 되었다.
여전히 class 컴포넌트를 만들 수 있고 사용하고 있으나, 현재 함수형 컴포넌트가 대세가 되고 있다.

📌 5장 JSX를 사용하는 리액트

JSX란? 자바스크립트의 JS와 XML의 X를 합친 말이다. 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장이다.
JSX에서 컴포넌트에게 프로퍼티 값으로 자바스크립트 값을 넘기려면 자바스크립트 식 (중괄호 { })을 꼭 사용해야 한다. 컴포넌트의 프로퍼티는 문자열과 자바스크립트 식 두 가지 유형이 있다.

✏️ JSX 특징

📝 내포된 컴포넌트

JSX에서는 다른 컴포넌트의 자식으로 컴포넌트를 추가할 수 있다.

📝 className

자바스크립트에서 class가 예약어이므로 class 속성 대신 className을 사용한다.

📝 자바스크립트 식

중괄호로 자바스크립트 식을 감싸면 중괄호 안의 식을 평가해서 결과값을 사용해야 한다는 뜻이다.
문자열이 아닌 다른 타입의 값도 자바스크립트 식 안에 넣어야 한다.

📝 평가

중괄호 안에 들어간 자바스크립트 코드는 그 값을 평가받는다. 즉, 덧셈이나 문자열 이어붙임 등 여러 연산을 할 수 있다.
또한, 자바스크립트 식 안에 함수 호출 구문이 있다면 그 함수가 호출된다.

JSX는 깔끔하고 읽기 쉽다는 장점이 있으나, 브라우저가 JSX를 해석하지 못한다는 단점이 있다. 모든 JSX를 브라우저가 해석할 수 있도록 바벨이라는 도구를 사용하여 JSX를 변환 즉 컴파일링을 해주어야 한다.

✨ 지금까지 Next.js (React)를 사용하면서 브라우저가 읽을 수 있도록 JSX를 변환하는 과정을 거친 기억이 없다. 난 여태 어떻게 한거지란 의문을 품었는데, create-react-app (create-next-app)을 통해 프로젝트를 생성할 경우 개발자가 직접 웹팩, 바벨 등 여러 도구를 설정하지 않아도 빠르게 리액트 프로젝트를 시작할 수 있게 해준다고 한다. 새삼 create-next-app에 감사함을 느낀다!

✏️ 바벨 (babel)

바벨은 JSX를 순수 리액트로 변환하는 과정을 지원한다.
예전에는 페이스북이 만든 JSX 변환기가 JSX를 처리하는 표준적인 방식이었으나, 이제는 바벨이 JSX 처리 표준이다.

✏️ 리액트 프래그먼트 (fragment)

리액트는 둘 이상의 인접한 형제 엘리먼트를 컴포넌트로 렌더링하지 않기 때문에, 이들을 div와 같은 태그로 둘러싸야만 한다.
이로 인해 불필요한 태그가 만들어지고, 아무 목적 없이 다른 태그를 감싸는 태그가 생기게 된다. 이러한 문제를 해결하기 위해 리액트 프래그먼트를 사용할 수 있다.
리액트 프래그먼트는 새로운 태그를 실제로 만들지 않고 이런 wrapper의 효과를 낸다.

[React Fragment]

function Cat({name}) {
  return(
    <React.Fragment>
    	<h1> 고양이 이름은 {name}! </h1>
		<p> 이 고양이는 멋져! </p>
	</React.Fragment>
	)
}

[React Fragment 단축 태그]

function Cat({name}) {
  return(
    <>
    	<h1> 고양이 이름은 {name}! </h1>
		<p> 이 고양이는 멋져! </p>
	</>
	)
}

✏️ 웹팩

📝 웹팩이란?

웹팩은 모듈 번들러(module bundler)로 여러 다른 파일들(자바스크립트, CSS, JSX 등)을 받아 한 파일로 묶어준다.

📝 웹팩을 통해 얻을 수 있는 이익

📋 모듈성

애플리케이션 소스 코드를 더 관리하기 쉬운 규모로 나눌 수 있다.
각 팀이 서로 다른 파일에 작업을 진행하고 프로덕션으로 보내기 전에 전체를 한 파일로 묶으면서 정적으로 오류를 검사할 수 있으므로 여러 팀이 쉽게 협업할 수 있다.

📋 네트워크 성능

의존 관계가 있는 여러 파일들을 묶은 번들을 브라우저가 한 번만 읽기 때문에 네트워크 성능이 좋아진다.
모든 의존 관계를 한 파일에 넣으면 모든 파일을 단 한 번의 HTTP 요청으로 가져올 수 있으므로 추가 시간 지연을 방지할 수 있다.

📋 코드 분리 (= 롤업(rollup), 레이어(layer))

코드를 여러 덩어리로 나눠서 필요할 때 각각을 로딩할 수 있다. 여러 다른 페이지나 디바이스에서 필요한 자원을 따로 나눠서 더 효율적으로 처리가 가능하다.

📋 코드 축소 (minification)

공백, 줄바꿈, 긴 변수 이름, 불필요한 코드 등을 없애서 파일 크기를 줄여준다.

📋 특징 켜고 끄기 (feature flagging)

코드의 기능을 테스트해야 하는 경우 코드를 각각의 환경에 맞춰 보내준다.

📋 HMR (Hot Module Replacement)

소스 코드가 바뀌는지 감지하여 변경된 모듈만 즉시 갱신해준다.

📋 일관성

웹팩이 JSX나 자바스크립트를 컴파일해주기 때문에 프로젝트에서 아직 표준화되지 않은 미래의 문법을 사용할 수 있다. 즉, 개발에 계속 최신 자바스크립트 문법을 활용할 수 있다.

profile
개발을 개발새발 열심히➰🐶

0개의 댓글