ReactJS | 개요 및 JSX 문법

REACT JS

UI를 효과적으로 구축하기 위해 사용하는 JavaScript기반 오픈 소스 라이브러리

---

React 특징

• 선언적(Declaretive): 대화형 UI 작성에 유리, 데이터가 변경되었을 때 효율적으로 렌더링 수행
• 컨포넌트 기반(Component-Based): 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성
• 한 번 배워서 어디에서나 사용하기(Learn Once, Write Anywhere): 기존의 소스코드를 불필요하게 작성하지 않고 새로운 기능 개발 가능, 재사용성이 높음
• 프론트엔드를 객체 지향적으로 개발할 수 있도록 하는 라이브러리
• 클라이언트 렌더링뿐만 아니라 서버 사이드 렌더링도 지원
  클라이언트 렌더링 : 필요한 데이터를 그때 그때 받아오는 것
  서버 사이드 렌더링: 데이터를 서버에 한 꺼번에 만들어놓고 렌더링하는 것

※ 리액트 공식 문서 : https://reactjs.org/docs/getting-started.html
자바스크립트에 능숙한 개발자 대상이기 때문에 초보자는 읽기 어려울 수 있음

---

Codepen으로 React 개발 환경 구축하기

https://codepen.io 프론트 엔드 개발에 유용한 사이트, 회원가입 필요

1. Settings => JS
2. JavaScript Preprocessor : Babel
   JSX 사용을 가능하게 하기 위함
3. Add External Scripts/Pens
4. React, ReactDOM 추가
5. save & close

---

JSX

자바스크립트의 확장판이라고 할 수 있음

React에서 Element(요소, 태그)를 제공

Babel이 JSX loader를 가지고 있기 때문에 동작 가능

---

문법

---

하나의 태그

JSX에서는 여러 개의 태그가 있을 경우
하나의 최상위 태그로 나머지 태그들을 묶어주어야 함

---

React.Fragment

DOM에 별도의 노드를 추가하지 않고 엘리먼트들을 하나로 감싸주는 태그

• < React.Fragment >< /React.Fragment > 로 작성
• <>빈 태그로도 작성 가능
• Fragment에 key가 있는 경우 Fragment 를 명시적으로 선언해야 함
  key는 Fragment에 전달할 수 있는 유일한 속성
• DOM에 추가되지 않기 때문에 실제로 HTML 코드에도 반영되지 않음

<>
 <Show subject="MySQL"/>
 <Show subject="NodeJS"/>
 <Show subject="JAVA"/>
 <Show/>
</>

---

{ }

• JSX 문법으로, JSX는 HTML과 JS를 같이 쓰기 때문에 {}안에 JS코드를 작성
• Element 내부와 속성에 모두 사용 가능함
• camelCase 사용
• ReactDOM이 {}부분을 이스케이프 처리하기 때문에
  XSS(Cross-site Scripting)와 같은 공격으로부터 안전함

---

주석

다음과 같이 중괄호 안에 JS주석과 같은 양식으로 작성

/* 여러 줄 주석입니다 */
// 한 줄 주석도 가능합니다

{/* return() 안에서는 중괄호 주석만 사용 가능합니다 */}

---

닫는 태그

JSX에는 무조건 닫는 태그가 있어야 함

하나의 태그만 사용하는 경우에도 다음과 같이 작성

<태그이름/>

ReactDOM.render(<HelloReact/>, document.getElementById('root'));
// 에서 <HelloReact>로만 작성하면 에러 발생

 

---

React JS 기본 구성

---

HTML

<div id="root"></div>

---

CSS

.blue{
  color: blue;
  font-size:50px;
}

.red{
  color: red;
}

※ inline 방식으로 작성할 때는 '-'(하이픈) 대신 camelCase 사용
ex) font-size → fontSize

※ 클래스 지정을 위한 예약어는 class 대신 className 사용

---

JSX

// 매개변수 student를 받아서 그 정보를 출력하는 함수
function formatInfo(student){
  return student.name + "[" + student.id + "]";
}

// 매개변수에 들어갈 student 객체 선언
const student = {
  id: "20153157",
  name: "My name",
  color: 'blue'
}

// html의 요소에 해당하는 element생성
const element = (
  <h3 class={student.color}>
    {formatInfo(student)}
  </h3>
)
/* {}: JSX 문법
   JSX는 HTML과 JS를 같이 쓰기 때문에 {}안에 JS코드를 작성 */

ReactDOM.render(element, document.getElementById('root'));
// element 변수를 렌더링함

 

---

React JS의 개요와 JSX문법, 그리고 기본 구성에 대해 간단히 알아보았습니다.

JSX문법은 HTML과 자바스크립트를 같이 사용할 수 있도록 고안된 문법이라고 할 수 있습니다.

그렇게 복잡한 규칙은 없기 때문에 문법에 대해서는 쉽게 익힐 수 있겠습니다.

또한 간단한 예제나 코드를 테스트할 때는 에디터를 사용하는 것보다
codepen과 같은 사이트를 이용하는 것이 더 편리합니다.