[React] 리액트 기초 및 JSX 개념

React(리액트) 란?

프론트엔드 개발을 하기 위한 자바스크립트 오픈 소스 라이브러리.

메타(구. 페이스북)에서 2013년에 만든 웹 프레임워크이며 현재까지 계속 유지보수 되고있다.

싱글 페이지 어플리케이션 혹은 모바일 어플리케이션 개발(React Native 이용)에 사용될 수 있다.

 

싱글 페이지 어플리케이션(Single Page Application, SPA) 이란?

서버로부터 완전한 페이지를 불러오지 않고 변하는 부분의 데이터만 받아 페이지를 업데이트 하는 웹사이트/웹어플리케이션

장점: 서버 과부화 문제가 줄어들고, 사용자와의 상호작용이 빠르다

단점: 대부분의 코드가 JavaScript에 작성되어 있어 JavaScript 파일이 무거워 질 뿐만 아니라 초기 화면 렌더링이 느림.

SEO(검색 엔진 최적화)에 좋지 않음.(SEO는 HTML에 작성되어있는 태그나 링크를 수집하기 때문)

React의 특징

선언적(Declarative)이다.

디자인(CSS)/구조(HTML)/동적 활동(JavaScript)를 따로따로 적어놓는것이 아니라,

한페이지 안에서 한번에 파악하기 쉽게 코드를 작성하는 것이다.

리액트에서는 HTML과 JavaScript를 한 페이지 안에서 작성하는 방식을 따른다. => JSX + CSS

 

컴포넌트(Component) 기반 이다.

웹 페이지를 구성하는 요소를 말한다.

컴포넌트가 모여서 하나의 웹 페이지를 만들며,

각 컴포넌트는 하나의 기능을 구현한다. (하나의 기능을 구현하는 코드의 묶음)

리액트로 만들어진 웹페이지는, 웹페이지 구성을 바꾸고 싶을경우 컴포넌트의 위치만 수정해주면된다.

(HTML/CSS/JavaScript 로 만들어진 웹페이지는 구성을 바꿀 때 마다 HTML/CSS 코드를 그에 맞게 수정해주어야 한다)

노란색 네모 박스 하나하나가 컴포넌트이다

JSX(JavaScript XML)

리액트에서 사용되는 문법으로, 자바스크립트의 확장형 문법이다.

HTML과 JavaScript를 한번에 작성할 수 있다. => 기능과 구조를 한눈에 볼 수 있다.

하지만 JSX는 자바스크립트가 아니므로 브라우저가 읽을 수 없다.

따라서 작성된 JSX 코드를 Babel이 해석하여 자바스크립트 코드로 컴파일하여 브라우저로 전달한다.

(Babel은 컴퓨터가 알아서 작동시킨다)

컴파일 : 작성된 코드를 같은 기능을 구현하는 다른 computer language로 변환시키는 작업

JSX 규칙

다수의 엘리먼트로 이루어진 코드를 작성하려면 모든 엘리먼트들을 하나의 태그로 묶어주어야 한다.

---------잘못된 표기법-------------
<div>리액트에서 사용하는</div>
<div>JSX</div>

---------올바른 표기법-------------
<div>
  <div>리액트에서 사용하는</div>
  <div>JSX</div>
</div>

CSS 속성을 적용시킬 수 있는 클래스 이름을 할당할 때, className으로 할당해야 한다.

---------잘못된 표기법-------------
<div class='content-area'>오늘의 가격표</div>
---------올바른 표기법-------------
<div className='content-area'>오늘의 가격표</div>

자바스크립트로 작성된 부분을 사용할때에는 꼭 { }를 이용하여 사용한다.

function App() {
    const name = 'Jully';
    const age = 14;
    
    return (
    	<div>{name} is {age} years old</div>
        );
    }

컴포넌트 이름은 pascal case를 사용하여 짓는다(첫번째 글자를 대문자로 작성)

---------잘못된 표기법-------------
function greeting () {
	return <div>hello!</div>
    }
---------올바른 표기법-------------
function Greeting () {
	return <div>hello!</div>
    }

조건부 렌더링을 할때는 삼항연산자를 사용한다.

<div>
{(el.name === 'kimsowoo') ? true : false}
</div>

배열들의 요소를 가져와서 여러개의 HTML 엘리먼트를 생성할때는 map()을 사용한다.

이때 반드시 첫번째 엘리먼트에 key 속성을 주어야 한다.

만약, 가져오는 데이터에 id 값이 없다면 key 속성으로 id 대신에 배열의 인덱스 값을 주어도 된다.

하지만 이는 최후의 수단이 되어야 한다.

왜냐하면 인덱스 값을 key 속성으로 줄 경우, 배열에 변동이 일어났을때 문제를 일으킬 수 있기 때문이다.

리액트는 각각의 DOM element를 key값으로 확인하는데, 배열에 새로운 요소가 추가가 되거나 기존의 요소가 빠지면

인덱스 값에 따라 요소의 위치가 바뀌기 때문에 혼동이 일어난다.

const students = [
{id: 1, name: 'Abigail', grade: 'sophomore', major: 'computer science'},
{id: 2, name: 'Aron', grade: 'senior', major: 'sociology'},
{id: 3, name: 'Jacob', grade: 'freshman', major: 'acting'}
];

function StudentList() {
    const list = students.map((el) =>
    <div key={el.id}>
      <div>{el.name}</div>
      <div>{el.grade}</div>
      <div>{el.major}</div>
    </div>
    );
    
    return (
    	<div>
        {list}
        </div>
     );
 }