[React] 리액트 & JSX

키워드 : JSX, 컴포넌트

---

[리액트]

JS 오픈소스 라이브러리

 

3대 특징

1. 선언형

• HTML/ CSS / JS로 나눠 적기보단, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향.
• 직관적.
• 코드만 보고도 기능 및 모습 예측이 가능.

 

2. 컴포넌트 기반

• 컴포넌트 : 하나의 기능 위주로 구분한 코드 묶음집.
• 컴포넌트를 분리하면 독립적이고 재사용이 가능 -> 기능 자체에 집중하여 개발 가능. 유지 보수에 용이.
• 컴포넌트 내에 다른 컴포넌트들이 존재 가능.

 

3. 범용성

• JS 프로젝트 어디서든 이용 가능.
• 기존 프로젝트에도 유연하게 적용 가능.
• 리액트 네이티브 이용 시 모바일 개발도 가능.

---

[JSX]

 

• Javascript XML
• JS를 확장한 문법
• 리액트에서 UI 구성 시 사용하는 문법.
• 브라우저가 바로 실행할 수 있는 JS 코드는 아님 -> Babel을 이용하여 JSX를 JS로 컴파일하여 JS 코드로 변환 필요

 

DOM과 React DOM의 비교

DOM	HTML + CSS + JS
React DOM	CSS + JSX

 

JSX 활용

1. 다수의 엘리먼트 작성 시
   • 최상위에서 opening tag와 closing tag로 감싸주어야 함.
2. 엘리먼트 class 사용 시
   • class가 아닌 className으로 표기 해야 함.
3. JS 표현식 사용 시
   • 중괄호{}를 이용해야 함.
     <span className="tweet__createdAt">{tweet.createdAt}</span>
4. 사용자 정의 컴포넌트는 대문자로 시작
   • ex) function Hello() {}
5. 조건부 렌더링에는 삼항연산자 사용(if문이 아님)

const isParkHacker = tweet.username === "parkhacker";
const tweetUserNameClass = isParkHacker
          ? "tweet__username tweet__username--purple"
          : "tweet__username";

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