00

React : 사용자 인터페이스를 만들기 위한 JavaScript 라이버르리 중 하나. 페이스북과 인스타그램에서 개발 및 관리하고 있는 오픈소스이다.

01

리액트 특징

1. UI를 구성하기 위해 "컴포넌트"라는 단위로 개발을 진행한다.
2. React는 내부적으로 Virtual DOM(가상 DOM)을 통해 렌더링을 진행한 뒤 변경점만 사용자 화면에 반영한다.
3. JSX를 사용하면 개발 효율이 높아진다.
4. 컴포넌트 단위로 앱을 작성하면 코드의 재사용성을 늘릴 수 있다.
5. 한 페이지에서 데이터가 자주 바뀌는 웹앱을 개발하는데 적절하다.
6. 컴포넌트 내의 데이터가 바뀌면 자동으로 감지하여 UI를 업데이트한다.

02 React 프로젝트 생성

Creeate React App

• 리액트용 Boilerplate

1. 자동으로 개발 환경을 셋팅해준다.
2. 프로젝트 배포시 해야 하는 번들링과 Trans-compile을 기본적으로 제공한다. -> Babel, Webpack 등
3. 상대적으로 덜 중요한 코드는 가려져 있어 온전히 개발에 집중할 수 있다.
4. Client-Side-Rendering만 지원한다.

필수파일

• ./public/index.html
• ./src/index.js

./src/App.js는 필수 파일이 아니다.

import 방법

import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export1 [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

03 JSX와 컴포넌트

JSX 특징

1. 실제로 배포할 때 Trans compile되어 자바스크립트로 변환된다.
2. style은 object로만 입력할 수 있다.

function App() {
  return (
    <div className="App">
        <div style={{padding: 48, color:"red", backgroundColor:"blue"}}>안녕하세요.</div>
    </div>
  );
}

backgroundColor와 같이 inline style의 property name은 camelCase로 적는다.
3. class는 className이라고 작성한다.
4. 닫는 태그 필수

컴포넌트의 리턴값에서는 최상위태그가 하나여야한다.

function App() {
  const username = "김민수";
  return (
  <>
    <div className="App">
        <div>안녕하세요.</div>
    </div>
    <div>
        <div>저는 {username}입니다.</div>
    </div>
    </>
  );
}

이렇게 <> </>로 감싸면 리턴되면서 안에있는 내용물만 전달됨.

컴포넌트

1. 컴포넌트의 첫 알파벳은 항상 대문자

class 형 컴포넌트

class Hello extends Component {
	render() {
    	const {name} = this.props
        return <div>{name}님 안녕하세요.</div>
    }
}

• React의 생명 주기를 파악하기 쉽다.

function 형 컴포넌트

const Hello = (props) => {
	const {name} = props
    return <div>{name}님 안녕하세요.</div>
}

• 컴포넌트끼리 데이터를 주고 받을 땐 Props
• 컴포넌트 내에서 데이터를 관리할 땐 State
• 데이터는 부모 -> 자식으로만 전달

05 React란?

React를 왜 사용하는가?
-> 사용자와의 소통을 UI로 쉽게 구현하고 대규모의 웹페이지를 관리하기 위해 사용한다