1. 개요
- React는 Facebook에서 제공해주는 Front-End Library 입니다.
- React는 Component 기반으로 되어있어 Component에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여집니다.
> React를 왜 사용하나?
- 리액트를 이용한다면 사용자와 상호작용할 수 있는 UI를 보다 쉽게 만들어 줄 수 있습니다.
> 특징
- Component
- React는 Component 기반의 Library 입니다.
- UI를 하나의 큰 덩어리라고 생각한다면 Component는 그 덩어리를 이루는 요소들이라고 생각하면 됩니다.
- 이러한 특징 때문에 개발자는 전체 코드를 파악하기가 상대적으로 쉽습니다.
- Component는 재사용성을 가지고 있기 때문에 반복적으로 같은 코드를 입력할 필요가 없습니다.
- Component의 종류는 클래스형(Stateful)과 함수형(stateless) 으로 나누어집니다.
- Unidirectional (단방향) 데이터플로우를 가지고 있다.
- React는 데이터의 흐름이 한 방향으로 이루어집니다.
- 데이터가 내려가기만 하지, 밑에서 데이터를 올려줄 수는 없습니다.
- 부모의 데이터를 바꿔주기 위해서는 ‘State’를 이용해야 합니다.
- Props and State
- Props
- parent component 에서 children component로 전달해 주는 데이터를 말합니다.
- props는 읽기 전용 데이터라고 생각하면 됩니다.
- children component에서 전달받은 props는 변경이 불가능하고, props를 전달해준 최상위 parent component 만 props를 변경할 수 있습니다.
- State
- state는 동적인 데이터를 다룰 때 사용.
- 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야할 때 사용.
- State는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근이 불가능합니다.
- 그러나 자신보다 상위에 있는 state는 변경이 가능한데, state를 변경해주는 함수를 props로 받는다면 state 변경이 가능하다.
- props로 넘겨줄 때 this의 binding을 신경써줘야 합니다.
- Props
- Javascript 6 ( es6 : ECMAScript 6) 는 편리하고 유용한 기능이 많다.
- 더 빠르고 편하고 이쁘게 사용할 수 있다.
- 웹팩을 활용해서 최근 자바스크립트를 브라우저가 이해할 수 있게 변경해 줘야함.
2. 번들러란 ? ( Bundler )
번들러(Bundler)란 묶는다는 뜻의 Bundle에서 나타난 말인데요.
파일을 묶듯이 연결하는 역할을 합니다.
대표적인 번들러로 웹팩(Webpack), Parcel, Browserify 라는 도구들이 있으며, 리액트에서는 주로 웹팩을 사용하는 추세입니다.
편의성과 확장성이 다른 도구보다 뛰어나기 때문입니다.
번들러 도구를 사용하면 (import, require)로 모듈을 불러왔을 때, 불러온 모듈을 모두 합쳐서 하나의 파일을 생성합니다.
번들링 함으로써 파일은 하나로 합쳐지고 네트워킹 요청횟수는 줄어들게 됩니다.
중복된 소스코드도 최소화하고 모듈 개념을 사용하기 때문에 글로벌이 오염되지도 않습니다.
프로젝트에서 index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 됩니다.
3. 웹팩 ( Webpack )
웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구입니다. 주로 React에서 많이 쓰입니다.
여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징 시켜주는 역할을 합니다.
4. Loader
import logo from './logo.svg';
import './App.css'
웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있습니다.
이렇게 파일을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당합니다.
css-loader 는 css파일을, file-loader는 웹 폰트나 미디어 파일들을 불러올 수 있게 해줍니다.
babel-loader는 자바스크립트 파일들을 불러오면서 최신 자바스크립트 문법으로 작성된 코드를 바벨이라는 도구를 사용하여 ES5 문법으로 변환해 줍니다.
웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던 create-react-app(CRA)이 번거로운 작업을 모두 대신 해주기 때문에 우리는 별도의 설정을 할 필요가 없습니다.
function App(){
return {
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>Edit
</p>
</header>
<a className="App-link"
cl
>
</a>
</div>
}
}