React - 기초

리엑트?

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

 

 

리엑트의 3가지 특징

선언형(Declarative)

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

 

컴포넌트 기반(Component-Based)

리엑트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발한다.
컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.
유지보수 및 유닛테스트도 편하다는 장점이 있다.

 

범용성(Learn Once, Write Anywhere)

리엑트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있다.
Facebook에서 관리되어 안정적이고, 가장 유명하며, 리엑트 네이티브로 모바일 개발도 가능하다.

 

 

 

JSX?

JavaScript XML의 줄임말이다. 리엑트에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 우리가 작성한 JSX를 Babel이 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 그 후에, 브라우저가 JavaScript를 읽고 화면에 렌더링할 수 있다.

 

 

 

JSX의 주요 문법들

 -하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 한다.

- CSS class 속성을 지정하려면 class가 아닌 className으로 표기해야한다.

- JSX에서 JavaScript를 쓰고자 한다면, 꼭 {중괄호}를 써야한다. 중괄호를 쓰지 않으면 일반 텍스트로 인식한다.

- 리엑트의 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포턴트라고 부른다.

- 조건부 렌더링은 삼항연사자를 이용하여야만 한다.

- React에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용한다.
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야한다.

 

 

리엑트로 엘리먼트 생성하기 예제

 

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;