React 리액트란?

 

React는 JavaScript 라이브러리이며, 따라서 JavaScript 언어에 대한 기본적인 이해가 필요합니다.

 

Facebook에서 개발한 컴포넌트(Components) 기반의 Javascript UI Library입니다.

 

싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다.

 

하지만 React는 프론트엔드 라이브러리인 만큼 UI 이외의 라우트, 상태 관리 같은 기능들이 내장되어 있지 않습니다.

 

 

Facebook에서 npm이 느려서 만든것.

• 굉장히 빠르다.
• 호환이 안 되는 모듈들이 있다.
• js, jsx 확장자를 많이 쓴다.

 

 

jsx란?

• React용 Javascript
• js, jsx 파일 확장자를 가진 파일은 "무조건" (import React from 'react') 필수로 기입해준다.

 

 

export default

module.exports

• 문서 안의 함수를 외부에서 해당 문서를 import 해서 가져다 쓸 수 있게 해주는 것.

 

하지만,

=> ES6에서는 "export"

 

export const value = 1  // index.js

import {value} from 'index.js'

 

함수뿐 아니라 변수도 export 가능

---

React에서는 필수로 Html을 반환하는 함수를 기본값으로, 무조건 함수의 반환 값이 "Html"이다.

 

function App {
    return (
        <div> ... <div>         <-----  Html 
    );
}

export default App

 

React의 모든 파일은 return으로 Html을 반환한다.

---

 

Component (컴포넌트)

하나의 레이아웃의 단위 = "재사용할 수 있는 단위"

 

import React from 'react';
import App from 'app.js';

function index() {
    return (
        <div>
               <App/>
        <div>
    );
}

 

위의 App이라는 component (export default App 된 App이라는 함수)를 import App을 하여 가져다 쓸 수 있다.

 

또한, 부모 Component 내 return 내부에 <App/>과 같이 import 된 component 명을 기입해주면, 반환되어(render) 화면에 보인다.

 

 

src/components

• 일반적으로 src 내 components 폴더를 만들어 '재사용할 수 있는 component를 모아둔다.