React 리액트

React는 사용자 인터페이스를 만들기 위해 사용되는
웹 프레임워크, 자바스크립트 라이브러리

• React는 facebook에서 제공해주는 프론트엔드 라이브러리
• 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있습니다.

즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다.

JSX

자바스크립트를 확장한 문법으로 react에서 UI를 구성할 때 사용합니다

JSX는 브라우저가 바로 실행할 수 없는 코드이기 때문에 브라우저가 이해할 수 있는 JS 코드로 변환해주어야 합니다

이때 이용하는 것이 Babel입니다 JSX코드를 JS코드로 컴파일해주고 브라우저가 읽을 수 있는 코드로 변환합니다

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 문법

1. 리액트에서 CSS class 사용시 className으로 표기

class로 작성하게 된다면 React에서 Html클래스가 아닌
자바스크립트 클래스로 받아들임

2. JS표현식 사용시 중괄호{ } 사용

중괄호 사용 안 하면 일반 텍스트로 인식

3. 사용자 정의 컴포넌트는 대문자로 시작

소문자로 시작하면 일반적인 HTML 엘리먼트로 인식

4. 조건부 렌더링에는 if 문이 아니라 삼항연산자 이용해야함

조건 ? true : false

5. 여러 개의 HTML표시할 때는 map() 함수 사용

사용할 때는 반드시 “key” JSX속성을 넣어야 합니다

Create React App

SPA(Single Page Application) 을 개발할 수 있는 툴 체인