정의 및 특징

• 사용자가 태그를 정의해 만들 수 있고, 이를 Component라 함
• Reload를 하지않고도 역동적인 사이트를 만들 수 있음

컴포넌트 제작

2.1 TAG

<header></header> 
<nav><nav/>
<article></article> 

• 기능적으로는 아무 기능이 없지만 본문, 제목 등과 같은 의미를 읽는 사람이 알 수 있음

2.2 Class & Function

class Subject extends Component
//
function Subject(props)
//
<Subject par1="..." par2= "...">

• 공통점 : 컴포넌트를 생성하며 $par1, par2$와 같은 파라미터를 작성하여 동적으로 사용함
• 차이점 : Class 를 사용한 컴포넌트는 React.Component라는 부모클래스를 상속하여 더 많은 메모리와 리소스를 사용

2.3 Import & Export

import React, {Component} from 'react'; // #1
/*...*/
export default Component; // #2

• #1 'React' 라이브러리에서 'Component'라는 클래스를 로딩
• #2 한 파일 내 'Component'를 외부에서 사용할 수 있게 허용

State

3.1 State & Props

• Props : 사용자가 컴포넌트들을 사용하는 입장에서 볼 때 읽기전용 파라미터
• State : 각 컴포넌트 내부의 구현에 필요한 데이터들

❕외부의 Props와 내부의 State는 철저히 분리되어야 함

<Subject title ="..." sub ="...">

⇒ "..." 안에 들어갈 값들을 컴포넌트의 $**State**$로 만들고 이를 Subject의 $Props$로 전달

Event

4.1 $render$ 함수

4.1.1 정의 및 특징

• '어떤 HTML을 그릴 것인가?' 에 대한 결정 함수

• render 함수 안에서 this는 그 컴포넌트 자체를 가리킴

• props, state 값이 바뀌면 render 함수가 다시 호출

   ⇒ render 함수 내의 컴포넌트들에게 있는 render 함수도 다시 호출

4.2 $setState$ 함수

4.2.1 정의 및 특징

// in Component
onClick = {function(e){
	e.preventDefault;
	this.setState({
		_val : '...'
	});
}

• State를 변경하고 싶을 때 사용하는 함수
• 기본적인 작동방식이 Asynchronous(비동기적)이다.

4.3 $bind$ 함수

4.3.1 정의

• 함수 외부에서 쓰는 this가 내부의 this로 바인딩

Create

5.1.1 form

<input type = "text" placeholder = "show"/> // text 레이아웃에 "show" 출력
<textarea placeholder = "show"/></textarea>	// 																								 

5.1.2 배열에 원소 추가

⑴ $push$ : 원본을 바꿈 (낮은 효율)

⑵ $concat$ : 원본을 바꾸지 않음

var tmp1 = this.state._array.concat({...}); // #1
var tmp2 = this.state._array.push({...}); //#2
var tmp3 = Array.from(this.state._array); // #3
object.assign(_array,tmp4); // #4

• (1~2) 기존의 객체에 원소를 추가하여 새로운 객체 생성

• (3~4) 기존의 객체를 복사하여 새로운 객체 생성

  ❕기존의 객체와 내용은 같지만 완전히 같은 객체라고 볼 수 없음

5.1.3 $shouldComponentUpdate$ 함수

⑴ 정의 및 특징

• 컴포넌트에 변경사항이 없는데 render함수가 실행되는 걸 막기위해 사용

• 인자로 $newProps$, $newState$(바뀐 props, state)를 갖음

• 새롭게 바뀐 값($newProps$)와 이전의 값($this.Props$)에 접근할 수 있음

  ❕push를 사용해 원본을 바꿨다면 $this.Props$ 와 $newProps$가 같아서 함수를 사용할 수 없음

Update & delete

6.1 Update

6.1.1 문제점

<input value = {this.props.data.title}/> // this.props.data부분이 READ ONLY이므로 동작x 

6.1.2 해결 방법

⑴ 컴포넌트안에서 가변적인 데이터로 state화 시킴

⑵ 함수를 정의하고 사용

constructor(props){
	super(props);
	this.state ={
	title :this.props.data.title
	}
}

<input value = {this.props.data.title}
 onChange = { function(e){
	this.setState({title : e.target.value}); // #1
}.bind(this)/>

// #1을 아래로 간결히 표현가능
this.setState({[e.target.name] : e.target.value});

❕$textarea$의 $value$도 위와 같은 방식으로 수정

6.2 delete

• $window.confirm$ 함수( 반환형이 boolean)를 사용하여 삭제의사를 확인할 수 있음

if(window.confirm()){
	// delete
}
else{
	// none
}

• Array.$splice$$(i,k)$ 함수를 사용하여 배열의 i번째부터 k개의 원소를 삭제할 수 있음