## 컴포넌트

기본적인 컴포넌트를 만들어 보자.

```javascript
import React, {Component} from 'react';

class MyComponent extends Component{
 render() {
 return (
 <div className='hello'>
 brand new componenet
 </div>
 )
 }
}

export default MyComponent;
```

```javascript
import React from 'react';

import MyComponent from './MyComponent';

function App() {
 return (
 <MyComponent/>
 );
}

export default App;

```

### Props

컴포넌트의 속성을 줄때 사용하는 값이다. 

```javascript
import React, {Component} from 'react';

class MyComponent extends Component{
 render() {
 return (
 <div className='hello'>
 brand new componenet is {this.props.name}
 </div>
 )
 }
}

export default MyComponent;
```

아런식으로 부모에서 값을 넘겨 줄 수 있다. 또한 default값을 설정할 수도 있다.

```javascript
import React, {Component} from 'react';

class MyComponent extends Component{
 render() {
 return (
 <div className='hello'>
 brand new componenet is {this.props.name}.
 </div>
 <div>
 age: {this.props.age}
 </div>
 )
 }
}

MyComponent.defaultProps = {
 name: 'yceffort',
}

export default MyComponent;
```

유의할 점은 props에 아무값을 안넘겨줘도 (`nane=""`) 값은 default 가 아닌 "" 가 나온다는 것이다. 왜냐하면 ""는 기본적으로 string으로 인식 되기 때문이다. 여기에 숫자등의 값을 넘기고 싶다면 {}를 써야 한다.

props의 값을 검증하기 위해서는 propTypes를 사용한다.

```javascript
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component{
 render() {
 return (
 <div>
 <div className='hello'>
 brand new componenet is {this.props.name}
 </div>
 <div>
 age: {this.props.age}
 </div>
 <div>
 company: {this.props.company}
 </div>
 </div>
 )
 }
}

MyComponent.defaultProps = {
 name: 'yceffort',
 age: 30
}

MyComponent.propTypes = {
 name: PropTypes.string,
 age: PropTypes.number,
 company: PropTypes.string.isRequired,
}

export default MyComponent;
```

숫자에 문자열을 넣거나, required인데 값을 안넘겨주는 경우에도 렌더링은 된다. 다만 콘솔창에 에러가 출력된다.


### state

props는 부모 컴포넌트가 설정하는 읽기전용 값이다. 컴포넌트 내부에서 값을 또 읽고 업데이트를 하려면 state를 써야 한다. state는 

1. 항상 기본 값이 있어야 하며
2. `this.setState()`메소드로 만 값을 업데이트 해야 한다.

```javascript
class MyComponent extends Component{

 constructor(props) {
 super(props);
 this.state = {
 number: 0
 }
 }
 render() {
 return (
 <div>
 <div className='hello'>
 brand new componenet is {this.props.name}
 </div>
 <div>
 age: {this.props.age}
 </div>
 <div>
 company: {this.props.company} / {this.state.number} 개
 </div>

 <button onClick={()=> {
 this.setState({
 number: this.state.number + 1
 })
 }
 }>
 더하기
 </button>
 </div>
 )
 }
}
```

위와 같은 방식으로도 할 수 있지만, `transform-class-properties`문법을 사용하여, constructor 바깥에서도 state와 props를 정의할 수 있다.


```javascript
import React, {Component} from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component{

 static defaultProps = {
 name: 'yceffort',
 age: 30
 };

 static propTypes = {
 name: PropTypes.string,
 age: PropTypes.number,
 company: PropTypes.string.isRequired,
 }

 state = {
 number: 0
 };

 render() {
 return (
 <div>
 <div className='hello'>
 brand new componenet is {this.props.name}
 </div>
 <div>
 age: {this.props.age}
 </div>
 <div>
 company: {this.props.company} / {this.state.number} 개
 </div>

 <button onClick={()=> {
 this.setState({
 number: this.state.number + 1
 })
 }
 }>
 더하기
 </button>
 </div>
 )
 }
}

export default MyComponent;
```

[transform-class-properties](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties)란 기존에 자바스크립트 클래스 syntax에서는 method외에는 아무것도 선언할 수 없게 되어 있는 것을, 조금 더 유연하게 만들어 주는 것이다.

#### before

```javascript
class Cat {
 constructor(name, breed) {
 this.name = name;
 this.breed = breed;
 }
 getBreed() {
 return this.name + ' is a ' + this.breed;
 }
}
```

#### after

```javascript
class Cat {
 name = "Chairman Meow";
 breed = "Sphynx";
 
 getBreed = function() {
 return this.name + ' is a ' + this.breed;
 }
}
```

또한, 화살표 함수가 더이상 그 구문내의 `this`를 생성해 내지 않고, 올바르게 this가 class를 가르킬 수 있도록 도와준다.

```javascript
getBreed = () => {
 return this.name + ' is a ' + this.breed;
 }
```

이렇게 쓰는 것도 가능해 진다는 뜻이다.

## 컴포넌트 기본적인 컴포넌트를 만들어 보자. ```javascript import React, {Component} from 'react'; class MyComponent extends Component{ render() { return ( <div className='hello'> ...

React 공부하기 3 - Component

## Create-react-app 라이브러리로 시작

```
yarn global add create-react-app
create-react-app hello-react

cd hello-react
yarn start
```

### app.js의 구조

```javascript
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 return (
 <div className="App">
 <header className="App-header">
 <img src={logo} className="App-logo" alt="logo" />
 
 Edit <code>src/App.js</code> and save to reload.
 
 <a
 className="App-link"
 href="https://reactjs.org"
 target="_blank"
 rel="noopener noreferrer"
 >
 Learn React
 </a>
 </header>
 </div>
 );
}

export default App;
```

코드 첫줄은 node.js의 기능, 즉 react를 불러와서 모듈화 시키는 것이다. 이를 번들링하는 작업은 webpack에서 처리해 준다. css-loader로 `./App.css`를, file-loader로 파일을 (`log.svg`), babel-loader로 es6를 es5로 변환해서 처리해줄 것이다. 원래는 이러한 작업을 위해서 세팅을 해줘야 하지만, `react-scripts`에서 이를 다 처리해주고 있다.

한가지 특이한 것은, `class`가아니고 `className`으로 되어있다는 것이다. 그렇다. jsx니까, javascript를 쓸테고, `class`는 자바스크립트의 예약어이니까 `className`을 대신 써야 하는 것이다. 

그 다음으로 봐야할 것은 return() 구문에 있는 내용이다. 얼핏보면 html과 비슷하게 생긴 이 코드는, `JSX`라고 한다. 이 코드는 나중에 babel-loader로 번들링 되면서 자바스크립트로 변환된다.

#### before

```javascript
var a = (
 <div>
 <h1> hello react </h1>
 </div>
)
```


#### after

```javascript
var a = React.createElement(
 "div",
 null,
 React.createElement(
 "h1",
 null,
 "hello "
 React.createElement(
 "b",
 null,
 "react"
 )
 )
)
```

#### JSX 문법

1.컴포넌트에 여러개의 요소가 있다면 꼭 하나의 부모요소로 감싸야 한다. Virtual Dom에서 컴포넌트 변화를 감지내 낼 때, 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 존재하기 때문이다. 만약 `<div>`를 쓰고 싶지 않다면, 리액트 v16에서 지원하는 `<Fragment>`를 사용하면 된다.

2.자바스크립트도 내부에서 표현할 수 있다.

```javascript
render () {
 const text = '집에 가고 싶다';
 return (
 <div>
 <h1>{text}</h1>
 </div>
 )
}
```

3.내부 표현식에서 if문을 사용하려면, 조건부 연산자를 사용하면 된다. 같은 맥락으로, `||` `&&` `condition ? 'true' : 'false'` 등도 가능하다.

```javascript
render () {
 const condition = true;
 <div>
 {
 condition ? '참': '거짓'
 }
 </div>

}
```

4.인라인 스타일링도 가능하다. 키는 camel_case를 사용하면 된다. `background-color`는 `backgroundColor`로, `-mos`는 `Mos`로 쓰면된다. 단 `-ms`는 그냥 소문자 `ms`로 한다. 

```javascript
render() {
 const style = {
 backgroundColor: 'gray',
 border: '1px solid black',
 height: Math.round(Math.random() * 100) + 50,
 width: Math.round(Math.random() * 100) + 50, 
 }
```

5.class를 쓰지말고 className을 써야 한다.

6.주석은 꼭 {}안에다가 써야 한다.

```javascript
{/* jsx에서 주석은 이렇게 써야 한다.*/}

{ /*
 여러 줄일 때는 이렇게 써야 한다.
*/ }

return {
 <div>
 <div // 하지만 이렇게 주석을 쓰는 건 괜찮다.>

 </div>
 // 이렇게 쓰면 바로 이 줄 자체가 렌더링된다.
 </div>
}
```

## Create-react-app 라이브러리로 시작 ``` yarn global add create-react-app create-react-app hello-react  cd hello-react yarn start ```  ### app.js의 구조  ```javascript import React from 'react'; import logo fr...

React 공부하기 2 - JSX

<h2 id="create-react-app-라이브러리로-시작">Create-react-app 라이브러리로 시작</h2>
<pre><code>yarn global add create-react-app
create-react-app hello-react

cd hello-react
yarn start
</code></pre>
<h3 id="appjs의-구조">app.js의 구조</h3>
<pre class="language-javascript"><code class="language-javascript">import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
 return (
 &#x3C;div className="App">
 &#x3C;header className="App-header">
 &#x3C;img src={logo} className="App-logo" alt="logo" />
 &#x3C;p>
 Edit &#x3C;code>src/App.js&#x3C;/code> and save to reload.
 &#x3C;/p>
 &#x3C;a
 className="App-link"
 href="https://reactjs.org"
 target="_blank"
 rel="noopener noreferrer"
 >
 Learn React
 &#x3C;/a>
 &#x3C;/header>
 &#x3C;/div>
 );
}

export default App;
</code></pre>
코드 첫줄은 node.js의 기능, 즉 react를 불러와서 모듈화 시키는 것이다. 이를 번들링하는 작업은 webpack에서 처리해 준다. css-loader로 <code>./App.css</code>를, file-loader로 파일을 (<code>log.svg</code>), babel-loader로 es6를 es5로 변환해서 처리해줄 것이다. 원래는 이러한 작업을 위해서 세팅을 해줘야 하지만, <code>react-scripts</code>에서 이를 다 처리해주고 있다.
한가지 특이한 것은, <code>class</code>가아니고 <code>className</code>으로 되어있다는 것이다. 그렇다. jsx니까, javascript를 쓸테고, <code>class</code>는 자바스크립트의 예약어이니까 <code>className</code>을 대신 써야 하는 것이다.
그 다음으로 봐야할 것은 return() 구문에 있는 내용이다. 얼핏보면 html과 비슷하게 생긴 이 코드는, <code>JSX</code>라고 한다. 이 코드는 나중에 babel-loader로 번들링 되면서 자바스크립트로 변환된다.
<h4 id="before">before</h4>
<pre class="language-javascript"><code class="language-javascript">var a = (
 &#x3C;div>
 &#x3C;h1> hello &#x3C;b>react&#x3C;/b> &#x3C;/h1>
 &#x3C;/div>
)
</code></pre>
<h4 id="after">after</h4>
<pre class="language-javascript"><code class="language-javascript">var a = React.createElement(
 "div",
 null,
 React.createElement(
 "h1",
 null,
 "hello "
 React.createElement(
 "b",
 null,
 "react"
 )
 )
)
</code></pre>
<h4 id="jsx-문법">JSX 문법</h4>
1.컴포넌트에 여러개의 요소가 있다면 꼭 하나의 부모요소로 감싸야 한다. Virtual Dom에서 컴포넌트 변화를 감지내 낼 때, 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 존재하기 때문이다. 만약 <code>&#x3C;div></code>를 쓰고 싶지 않다면, 리액트 v16에서 지원하는 <code>&#x3C;Fragment></code>를 사용하면 된다.
2.자바스크립트도 내부에서 표현할 수 있다.
<pre class="language-javascript"><code class="language-javascript">render () {
 const text = '집에 가고 싶다';
 return (
 &#x3C;div>
 &#x3C;h1>{text}&#x3C;/h1>
 &#x3C;/div>
 )
}
</code></pre>
3.내부 표현식에서 if문을 사용하려면, 조건부 연산자를 사용하면 된다. 같은 맥락으로, <code>||</code> <code>&#x26;&#x26;</code> <code>condition ? 'true' : 'false'</code> 등도 가능하다.
<pre class="language-javascript"><code class="language-javascript">render () {
 const condition = true;
 &#x3C;div>
 {
 condition ? '참': '거짓'
 }
 &#x3C;/div>

}
</code></pre>
4.인라인 스타일링도 가능하다. 키는 camel_case를 사용하면 된다. <code>background-color</code>는 <code>backgroundColor</code>로, <code>-mos</code>는 <code>Mos</code>로 쓰면된다. 단 <code>-ms</code>는 그냥 소문자 <code>ms</code>로 한다.
<pre class="language-javascript"><code class="language-javascript">render() {
 const style = {
 backgroundColor: 'gray',
 border: '1px solid black',
 height: Math.round(Math.random() * 100) + 50,
 width: Math.round(Math.random() * 100) + 50, 
 }
</code></pre>
5.class를 쓰지말고 className을 써야 한다.
6.주석은 꼭 {}안에다가 써야 한다.
<pre class="language-javascript"><code class="language-javascript">{/* jsx에서 주석은 이렇게 써야 한다.*/}

{ /*
 여러 줄일 때는 이렇게 써야 한다.
*/ }

return {
 &#x3C;div>
 &#x3C;div // 하지만 이렇게 주석을 쓰는 건 괜찮다.>

 &#x3C;/div>
 // 이렇게 쓰면 바로 이 줄 자체가 렌더링된다.
 &#x3C;/div>
}
</code></pre>

## 리액트 요약

기존에 많은 자바스크립트 기반 플게임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다.

![MVC](https://mdn.mozillademos.org/files/16042/model-view-controller-light-blue.png)

그러나 이 작업은 애플리케이션 규모가 커지면 복잡해지고, 제대로 관리하지 않으면 성능이 떨어진다는 문제점을 지니고 있다.

이렇게 부분적으로 찾아서 업데이트 하는 대신에, 데이터가 변할 때마다 기존 뷰를 날려 버리고 처음부터 새로 렌더링을 하면 어떨까? 이렇게 하면 애플리케이션 구조가 간단해지고, 작성할 코드의 양도 적어지며, 변화가 있으면 기존의 뷰를 날려버리고 그냥 다시 만들어 버리면 된다. 그러가 이 방식대로 하면 웹브라우저에 CPU 점유율도 늘어날 것이고, 메모리도 많이 사용 될 것이다. 그리고 사용자도 잠깐이지만 뷰가 날라가는 모습을 볼 수 있을지도 모른다.

리액트는 오직 V, 즉 View만 신경 쓰는 라이브러리다. 리액트에서 중요한 두가지는 `초기렌더링`과 `리렌더링`이다. 즁요한 것은 react자체는 view만을 담당하는 라이브러리 라는 것이다.

### 초기 렌더링

```js
render () {...}
```

이 함수는 컴포넌트가 어떻게 생겼는지 정의 한다. 여기에는 html 구문이 아니라, 뷰가 어떻게 생겼고 무슨 정보를 지니고 있는지에 대한 내용을 가지고 있다.  이 함수를 실행하면, 내부 컴포넌트들도 재귀적으로 실행해서,html 마크업을 만들고, 실제 페이지의 dom 요소에 주입하게 된다.

### Reconcilation

앞서 말한 뷰를 새로 갈아끼는 과정을 Reconcilation이라고 한다. 이 작업도 render함수에서 진행된다. 이 작업은 render가 반환한 결과를 바로 적용하는 것이 아니라, 이전에 만들었던 컴포넌트 정보와 비교를 먼저한다. 이렇게 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 dom 트리를 바꿔 치는 것이다.

### Virtual Dom

DOM (Document Object Model)은 동적 UI에 최적화되어 있지 못하다. HTML은 정적인 문서이지만, Javascript를 통해 동적으로 만드는 것이다. 흔히들 DOM은 느리다고 하지만, 이는 정확한 표현이 아니다. 정확히는 `DOM에서 변화가 일어났을 때, 브라우저가 CSS를 연산하고 리페인트 하는 과정이 느린 것`이다. 여기애서 React는 Virtual Dom 방식을 사용하여, DOM 업데이트를 추상화 하여 처리횟수를 최소화 하고 효율적으로 처리한다.

![Virtual Dom](https://i1.wp.com/programmingwithmosh.com/wp-content/uploads/2018/11/lnrn_0201.png?ssl=1)

Virtual Dom을 사용한다고 해서 무조건 빠른 것은 아니다. 작업이 매우 간단한 경우에는 리액트가 없는 편이 나을 수 있다. 어쨌거나, React Virtual Dom이 주는 것은 업데이트 처리의 간결성이다.

## 리액트 요약 기존에 많은 자바스크립트 기반 플게임워크들이 있었는데, 대부분의 프레임워크들은 MVC (Model-View-Controller), MVVM(Model-View-View Model), MVW(Model-View-Whatever) 아키텍쳐를 사용하여 개발되었다.  ![MVC](https://mdn.mozillademos.org/files/1...

yceffort

javascript

React 공부하기 3 - Component

React 공부하기 2 - JSX

React 공부하기 1 - background