(2023.11.21) React란 무엇인지?

이번 장에서는 React에 대해서 알아보도록 하겠습니다.

 

1. React를 알아보려는 이유

이번 프로젝트에서는 API 구현을 하면서 화면에 보이는 UI를 만들기 위해서 React를 사용하는 것이 좋겠다라는 생각이 들어서 이번 장에서는 React가 무엇인지에 대해서 알아보도록 하겠습니다. 

 

1-1. React란

React는 메타에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. 

● 2013년 페이스북에서 개발한 라이브러리 입니다.

● React는 오픈소스 프로젝트로 누구나 코드를 보고 수정이 가능하다.

● 지속적인 업데이트로 관리가 잘 되고 있다.

 

1-2. React의 특징

● 속성과의 단방향 데이터 바인딩

● 스테이트풀 컴포넌트

● 가상 DOM

● 라이프사이클 메서드

● JSX  ( JSX는 XML같은 문법을 사용한 ECMAScript의 확장입니다.)

 

1-3. React의 장점

● Virtual DOM 사용으로 인해 속도가 빠릅니다.

● React는 자바스크립트 친화적으로, 불변성 관리에 초점을 두고 있는 도구입니다. 

 

2. JSX문법

JSX 문법은 페이스북에서 만든 것으로 HTML과 비슷하게 생겼지만 전형 다른 문법입니다. 

 

2-1. 닫혀야 하는 태그

<p> Hello world // 오류
<p> Hello world </p> // 정상작동

 

2-2. 감싸져 있는 엘리먼트

React에서는 두개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 합니다. 

<div>
  <p> Hello world</p>
  <p> Have a Nice day :)</p>
<div>

 

2-3. 자바스크립트 값 사용하기

 

name 변수를 선언하여 react라는 값을 넣어주고 {name}이라는 변수를 불러와서 화면에 나타내도록 하였다.  

render() {
    let name = 'react';
    return (
      <div>
        <p>Hi {name}!</p>
      </div>
    );
  }

 

2-4. CSS 적용시키기

 

React는 자바스크립트로 작성하기 때문에 style속성갑에 일반 문자열이 아닌 자바스크립트 객체가 할당이 되어야 합니다. 

const styles = {
	        backgroundColor: 'black',
	        padding: '16px',
	        color: 'white',
	        fontSize: '12px'
	    };
	
	    return (
	        <div style={styles}>
	        Hello World
	        </div>
	    );

 

2-5. CSS : 외부 파일 불러오기

React 컴포넌트 파일에서 정의한 CSS파일을 import해서 사용이 가능합니다. 

import './App.css'

 

React에서 Props와 State에 대해서는 다음장에서 더 자세하게 다뤄보도록 하겠습니다.