# [11.5] React 공부

- Author: @kimyoungjo
- Published: 2019-11-05
- Updated: 2019-11-05
- Source: http://blex.me/@kimyoungjo/115-react-%EA%B3%B5%EB%B6%80
- Tags: 자바스크립트, reactjs, javascript, 리액트

---

####기초 폼

```javascript
	React.DOM.render {
		<h1>Hello, World!</h1>
		document.getElementById('root')
	}
```
render는 react의 정수이다. 위에 코드를 살펴보면 ```H1```태그를 작성하였고 ```root```이라는 ID를 가진 element를 불러왔다. react는 ```h1```태그와 같은 html을 ```root```ID를 가진 element에 render해준다. 따라서 화면엔 Hello World가 출력된다. 그리고 이러한 문법을 JSX라고 한다.

####JSX

```javascript
	const element = <h1>Hello World!</h1>
```

JSX는 위 코드와 같이 변수에도 html 코드가 저장이된다.

```javascript
	function formatName(user){
		return user.firstName + ' ' + user.lastName;
	}
	
	const user = {
		firstName : 'Young Jo'
		lastName : 'Kim'
	}
	
	const element = (
		<h1>
		Hello, {formatName(user)}!
		</h1>
	)
	
	ReactDOM.render {
		element,
		document.getElementByID('root')
	}
```

위 코드와 같이 사용 할 수도 있다. user라는 객체와 그 객체를 매개변수로 받는 formatName이라는 객체의 firstName, lastName 요소를 출력해주는 함수, 그리고 마크업 표현인 element를 이용하여 root에(id는 바뀔 수 있음.) element 변수를 render하는 것 이다.

JSX도 표현식이기 때문에 다음과 같은 활용이 가능하다

 - 변수에 할당하기
 
 - if, for 내부에서의 사용
 
 - function에서의 인자로 받기
 
 - function에서의 return값으로 사용
 
####JSX 속성 표기
 
```javascript
	const element = <div tabIndex="0"></div>
```
문자열 리터럴을 표현하기 위한 따옴표의 사용

```javascript
	const element = <img src={user.imgUrl}></img>
```
javascript 표현을 속성안에 넣기 위해 {}를 사용.

JSX는 javascript 보단 HTML에 가깝기 때문에 camelCase 사용 원칙.

```javascript
	const element = (
		<div>
			<h1>
				hello World!
			</h1>
		</div>
	)
```
앞서 말했듯 HTML에 더 가까운 언어이기 때문에 같은 방식으로 자식을 표현한다.

####DOM을 건설을 위한 React Elements

```javascript
	const element = {
		type : 'h1',
		props : {
			className : 'greeting'
			children : 'Hello World'
		}
	};
```
Babel의 개념을 사용하여 만든 객체의 기본폼.

#### Element

element는 react에서 가장 작은 단위이다.

이 element가 react에서 가장 중요한 개념인 component를 구성하게됩니다.

#### DOM에 element rendering 하기

```html
	<div id = "root"></div>
```
root라는 id를 가진 div가 있다고 가정했을시, 이것을 "root"DOM노드라고 한다. 이것들은 모두 react DOM에 의해 관리된다.

react로 만들어진 코드들은 대부분 저 DOM노드가 하나이다.(한 가지의 div를 사용한다는 뜻)

react element를 render하기 위해 두 가지를 ```ReactDOM.render()```에 넘겨야 한다.

 - 선언한 element 변수명
 
 - DOM노드 ('root' id를 가진 div)
 
 ```javascript
 	ReactDOM.render {
		element,
		document.getElementByID('root')
	}
 ```
 
 이렇게 말이다.
 
#### element의 업데이트

 - react element는 불변적이다.
 
 - 영화에서의 프레임 하나라고 생각하면 편하다.
 
 - 따라서 업데이트 방법은 새로운 element를 만들고 그 element를 ReactDOM.render()에 넘기는 방법이다.


```javascript
	function tick(){
		const element = (
			<div>
				<h1>It is {new Date().toLocaleTimeString()}</h1>
			</div>
		);
		ReactDOM.render(element, document.getElementByID('root'));
	}
	
	setInterval(tick, 1000);
```

위 코드는 시간을 표시해주는 tick이라는 메소드를 setInterval로 1초마다 호출해주는 코드이다.

react에서 ReactDOM.render는 대체로 단 한번만 쓰인다.  그렇기 때문에 다양한 element를 잘 조합한 component들의 유기적인 조합을 잘 생각해내서 어떻게하면 효율적으로 rendering을 할 지 고민해야한다.

#### Component

react의 컴포넌트는 ui를 독립적이고 재사용 가능하게 해준다.

개념적으로는 javascript의 함수이며 임의의 props를 인풋(매개변수 처럼)을 받아서 화면에 비춘다.

컴포넌트의 이름은 항상 대문자로 시작해야한다.

```javascript
	function Welcome(pops) {
		return <h1>Hello, {props.name}</h1>
	}
```

```javascript
	class Welcome extends React.Component {
		render() {
			return <h1>Hello, {this.props.name}</h1>
		}
	}
```

기본적으로 위의 두 코드는 같고 차이는 vanilla와 es6라는 점이다. 보통은 es6를 많이 사용하고 필자도 그럴 예정이다.

```javascript
	const element <Welcome name = "Kim"/>;
```

엘레먼트는 위 코드와 같이 컴포넌트를 표현할 수도 있다.

#### Component의 추상화

 - 컴포넌트는 출력시 다른컴포넌트를 참조할 수 있다.
 
 ```javascript
 	function Number (props) {
		return <h1> {props.name} </h1>
	}
	
	function Output () {
		return(
			<div>
				<Number name = "1" />
				<Number name = "2" />
				<Number name = "3" />
			</div>
		)
	}
	
	ReactDOM.render (
		<App />,
		document.getElementById('root');
	)
 ```
 
 위 코드와 같이 Output이라는 컴포넌트의 출력에서 number을 참조할 수 있고 이를 컴포넌트의 추상화라고 한다.