다양한 플랫폼에서 활용할 수 있는 프론트엔드 라이브러리, React

페이지 단위의 돔 개발을 다뤘다면 이제는 컴포넌트라는 단위로 나누어 생각하고 개발하는 방법을 배운다.

리액트는 무엇인가?

리액트는 프론트앤드 개발을 위한 JavaScript 오픈소스 라이브러리이다.

왜 배워야하는가? html css 가 있는데 말이지!
크게 3가지 특징으로 말할 수 있다.

1. 선언형
2. 컴포넌트 기반
3. 범용성

선언형 (Declarative)

리액트는 한 페이지를 보여주기 위해 html/css/js로 나눠서 적기 보다는
하나의 파일에 명시적으로 작성할 수 있게 jsx 를 활용한 선언형 프로그래밍을 지향한다.

위 그림을 보게되면
weatehr 속 다양한 컴포넌트(weathercontainer ,searchinput 등) 를 통해 하나의 페이지를 구성하는 것을 직관적으로 볼 수 있다

컴포넌트 기반 (Component-Based)

리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 커포넌트를 기반으로 개발한다.
컴포넌트를 분리하면 서로 독립적이고 재사용 가능하기 때문에, 기능 자체에 집중하여 개발 할 수 있습니다.

웹 코드를 보고 어플리케이션을 떠올릴 수 있다.

범용성

리액트는 js 프로젝트 어디에든 유연하게 적용될 수 있다.

프레임워크는 생태계에 종속
리액트는 기존 프로젝트에도 유연하게 사용가능

---

JSX

JavaScript XML의 줄임말로 문자열도 아니고 html도 아니다.

react 에서 UI를 구성할 때 사용하는 문법으로 자바스크립트를 확장한 문법이다.
그러나 브라우저가 바로 실행 할 수 있는 js 코드가 아니다.

이는 우리가 브라우저가 이해할 수 있는 js 코드로 변환을 해주어야 한다는 말인데...

이때 이용하는 것이 바로 "Babel" 이다. Barbel은 JSX를 브라우저가 이해할 수 있는 javascript로 컴파일 한 후에 읽은 후 화면에 렌더링 할 수 있습니다.

DOM & React JSX

리액트에서는 돔과 다르게 CSS,JSX 문법만을 가지고 웹 애플리케이션을 개발 할 수 있다. 즉, 컴포넌트 하나를 구현하기 위해서 필요한 파일이 줄어들어 한눈에 확인이 가능하다.

주의할 점! JSX은 HTML이 아니므로 "Babel"을 이용한 컴파일 과정이 필요하다.

---

DOM 예시

DOM에서는 자바스크립트와 함께 사용하기 위해서는 js와 html을 연결하기 위한 작업이 필요하다.

Inline 방식이나 script 태그를 이용하여 외부 js 파일을 연결할 수 있다.

JSX 예시

하지만 리액트에서는 JSX를 이용해서 앞서 보았던 DOM 코드 보다 명시적으로 코드를 작성할 수 있다.

JSXs는 자바스크립트 문법과 HTML문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있습니다.

이렇게 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋을 컴포넌트라고 합니다.

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  //return React.createElement("h1", null, Hello, ${formatName(user)}!);

  // JSX 를 활용한 React
  //return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

주석처리한 부분은 JSX 없이 있이 제외해도 모두 같은 출력결과를 나타낸다.