리액트
프론트엔드 개발을 위한 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>
};
}
'SEB FE 42_TIL' 카테고리의 다른 글
UI와 UX에 대한 기초 이해 (0) | 2022.12.19 |
---|---|
[HTTP/네트워크] REST API (0) | 2022.12.02 |
[JavaScript] 객체 지향 프로그래밍 (OOP) (0) | 2022.11.18 |
[JavaScript] 클래스와 인스턴스 (0) | 2022.11.18 |
[회고] Section 1을 마무리하며 (0) | 2022.11.16 |