[React] React & JSX 기초

 

리액트

프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

 

리액트의 3가지 특징

• 선언형declarative

• JSX라는 html + 자바스크립트 결합 기반의 명시적 코드 작성
• 다른 기술 한번에 모아서 볼 수 있어서 코드만 보고도 실제 기능 쉽게 상상 가능 
• 코드의 의도 분명히 작성

 

• 컴포넌트* 기반

• *컴포넌트: 하나의 기능 구현을 위해 여러 종류 코드를 묶음
• 컴포넌트의 독립성 재사용성 👍 -> 기능 작동에 집중하여 개발 가능 / 쉬운 유지보수 및 유닛테스트

 

• 범용성 - "Learn once, write anywhere"

• (프레임워크는 생태계에 종속되지만) 기존 프로젝트에서 개발하던 코드를 일부만 수정해도 사용가능
• Facebook에서 관리되어 안정적이고 유명
• 리액트 네이티브로 모바일 앱 개발도 가능

 

---

 

 

JSX

• JavaScript XML의 준말
• React에서 UI를 구성할 때 사용되는 문법
• 자바스크립트를 확장한 문법

 

Babel

• JSX는 브라우저가 바로 실행할 수 없으므로, Babel이 브라우저가 이해 가능한 JavaScript로 컴파일함
• 컴파일 후, JS를 브라우저가 읽고 화면에 렌더링

 

DOM & React JSX

• 웹 앱 개발: DOM(HTML + CSS + JavaScript) vs. React DOM (CSS + JSX)
• JSX !== HTML, 그래서 Babel을 이용한 컴파일 과정 필요
• React에서는 JSX를 이용, DOM 보다 명시적인 코드 작성이 가능 -> JavaScript, HTML 문법을 동시에 이용해 기능과 구조 한눈에 확인

 

JSX 주요 문법

• 하나의 엘리먼트 안에 모든 엘리먼트 포함: 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.
• 엘리먼트 클래스 사용 시 className으로 표기: class로 작성 시 html 클래스 속성이 아닌 자바스크립트 클래스로 받아들여짐

<div class="greeting">Hello!</div> // (X)

<div className="greeting">Hello!</div> // (O)

• JS 표현식 사용 시, 중괄호{} 이용: 중괄호가 없으면 일반 텍스트로 인식
• 사용자 정의 컴포넌트는 대문자로 시작(PascalCase): 소문자로 시작하면 일반 HTML 엘리먼트로 인식

function Hello() {

return <div>Hello!</div>;

• 조건부 렌더링에는 삼항연산자 사용: if문 X

<div>
{ 
  (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>

• 여러 개의 HTML 엘리먼트 표시할 때, map() 함수 이용: 반드시 "key" JSX 속성을 넣어야 함

Const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'};

function Blog() {
const content = posts.map((post) =>
  <div key={post.id}>
	<h3>{post.title}</h3>
	<p>{post.content}</p>
  </div>
};

Return {
<div>
  {content}
</div>
};

}