React Intro

않이 외 벌써 리액트?

 

---

리액트

는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점과 선언적인 개발이 가능하게 된다. UI를 자동으로 업데이트하는 과정에서 Virtual DOM을 통해서 최적화를 구현한다.

 

 

JSX (JavaScript Syntax Extension)

 

자바스크립트 확장 문법으로 자바스크립트와 HTML을 합쳐놓은 듯한 형태이다. 마크업을 편리하게 작성하기 위한 문법으로 HTML에서 마크업 하고, 자바스크립트에서 로직을 연결하고 붙이는 과정을 하나의 자바스크립트 파일 내에서 편리하게 처리할 수 있다. JSX로 작성한 코드는 자바스크립트가 인식할 수 없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 한다.

 

 

Component

 

재사용 가능한 각각의 독립된 모듈을 의미한다. 재활용 가능한 UI 구성단위, 즉 컴포넌트 단위로 UI를 구성할때의 장점으로는 코드 재활용성이 증가, 코드 유지보수가 용이, 해당 페이지가 어떻게 구성되어 있는지 파악 용이하다.

 

 

---

리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.

 

 

import React from "react";
function App() {
  return (
    <div className="App">
      <table>
        <tr>
          <Table />
        </tr>
      </table>
    </div>
  );
}
function Table() {
  return (
    <div className="Table">
      <td>Hello</td>
      <td>World</td>
    </div>
  );
}
export default App;

 

위 코드는 table 컴포넌트의 랜더링을 위해서 table 이라는 클래스명을 가진 div 로 묶어서 return 을 한다. 그리고 메인에서 table 컴포넌트를 임포트하면 최종적으로 보여지는 html 은 다음과 같다.

 

<table>
    <tr>
      <div className="Table">
          <td>Hello</td>
          <td>World</td>
      </div>
    </tr>
</table>

 

이렇게 의미없는 div 가 추가된다. 이를 피하기 위해서 우린 DOM에서 배웠던 fragment 를 사용할 수 있다.

 

import { Fragment } from "react";
function Table() {
  return (
    <Fragment>
      <td>Hello</td>
      <td>World</td>
      </Fragment>
  );
}

 

fragment 를 import 해준 후 table 을 div 가 아닌 fragment 로 묶어준다. 그러면 html 구조는 다음과 같다.

 

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

 

<Fragment> </Fragment> 대신 단축문법을 (<> </>) 써도 된다.

 

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // React는 `key`가 없으면 key warning을 발생합니다.
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  );
}

map 을 사용해서 컴포넌트를 여러 개 만들 때, key attribute 를 fragment 에 넣어줄 수 있다.