[React] 리액트와 JSX 소개

react

리액트(React)

 기존 HTML로 구성된 화면은 페이지를 이동하거나, 데이터가 변경되면 새로운 HTML 파일을 불러와서 화면에 표출하는 방식으로 MPA 기반입니다. MPA(Multi Page Application)

 이에 반해 react는 SPA(Single Page Application) 방식입니다. HTML 파일은 하나만 사용하고 페이지를 이동하거나 데이터가 변경되면 HTML 파일에 있는 태그를 삭제하고 새로운 태그를 렌더링하는 방식을 사용합니다.

 react는 앞서 사용한 HTML, CSS, JS의 사용은 편하게 하고 오직 화면단만 신경쓸 수 있도록 돕는 프론트엔드 라이브러리 입니다.

 또한, 사용하기에 앞서 Html, Css, Javascript는 기본적으로 숙지가 되어있어야 합니다. 왜 그런지는 아직 이해 못했습니다.

React 특징

1. Virtual DOM(가상 DOM: 가상 HTML 페이지)

- 페이지를 이동하거나 데이터가 변경됐을 때 HTML파일의 태그들을 바로 삭제하는 것이 아니고 가상 DOM에 이동할 페이지나 데이터가 변경된 부분의 태그만 새로 생성할 수 있습니다.

- 현재 Html DOM 파일과 가상 DOM을 비교합니다.

- 페이지 이동으로 DOM전체가 변경되면, 현재 Html DOM의 태그를 모두 삭제하고 가상 DOM의 내용을 렌더링합니다.

- 데이터가 변경되어서 현재 DOM에서 특정 부분만 바뀌었을 때는 바뀐 부분만 렌더링합니다.(자동 비동기 처리)

 

2. react에서는 화면의 특정 부분을 정의하는 선언체가 존재하는데 이를 컴포넌트라고 부릅니다. 컴포넌트를 조립하여 하나의 화면을 구성하여 표출하는 방식을 사용합니다.

컴포넌트를 사용하면 코드의 재사용성을 높일 수 있는 장점이 있으며, js, .ts, .jsx의 확장자로 컴포넌트를 만들 수 있습니다.

 

3. 렌더링이라는 개념이 있습니다. 렌더링은 사용자에게 화면을 표출해주는 메소드로, 렌더링은 화면이 처음 표출되는 초기 렌더링과 데이터가 변경될 때 다시 렌더링되는 리렌더링으로 구분합니다.

 

4. 컴포넌트의 상태를 나타내는 상태변수가 존재합니다. 상태변수는 크게 부모 컴포넌트로부터 물려받은 props변수와 현재 컴포넌트의 상태를 나타내는 state변수로 나눌 수 있고, props나 state가 값이 변경되면 해당 컴포넌트가 리렌더링 됩니다.

 

5. 컴포넌트에서도 부모 자식관계가 존재하여 상속관계를 구현할 수 있습니다. 부모에서 자식으로 넘겨주는 변수들을 props 변수라고 하고, props도 마찬가지로 상태변수의 일종으로 값이 변경되면 리렌더링합니다.

 

6. 리액트는 모든 메소드가 비동기 처리되어있기 때문에 동기화를 해주는 작업이 필요합니다. 즉 바로 변경하는 게 아니므로 시간을 두고 싱크를 맞추는 작업이 필요할 수 있겠죠?

 

 

JSX

JSX는 자바스크립트의 확장된 버전(eXtend)라고 생각하면 되며, XML과 매우 비슷하다고 할 수 있습니다. JSX는 브라우저가 실행되기 전에 일반 자바스크립트 코드로 변환되어 실행합니다. 이 코드는 html 코드를 작성하는 것과 비슷하며 코드도 보기 편한 것이 특징입니다.

 

JSX 문법

일반적인 html 문법과의 차이를 중점을 두고 비교하며 살펴보겠습니다.

	HTML	JSX
컴포넌트 묶어주는 최상의 태그	없음	<Fragment></Fragment>, <div></div>, <></>
자바스크립트 표현	<script></script>	{}
조건문	if문	삼항연산자
인라인 스타일	하이푼 사용(background-color)	카멜케이스 속성 표기(backgroundColor)
클래스 지정	class	className
주석 표기	<!-- 주석내용 -->	{/* */}

1. 먼저, 컴포넌트에 태그를 다수 포함하게 되면 그 태그들을 묶어주는 적절한 태그가 필요합니다. react의 경우, <Fragment></Fragment>, <div></div>, <></>(=Fragment)를 주로 사용합니다. 
2. 자바스크립트의 변수나 표현식을 사용하는데, 사용할 때는 {}로 묶어서 표출합니다.
3. if문 대신에 삼항연산자를 사용하여 조건문을 구성해야 합니다.
4. JSX 문법 내에 태그에는 인라인 스타일을 줄 수 있는데, 이 때는 카멜케이스로 속성을 설정해야합니다.
5. class 대신에 className을 사용합니다.
6. html에서 닫는 태그를 생략하는 경우가 있는데, JSX에서는 이를 생략하면 오류가 나타납니다.
7. JSX에서 주석은 {/* */}로 중괄호 내에 주석처리 문을 집어넣어 작성합니다.