🧐 ReactJS?

---

페이스북에서 제공한 ui 라이브러리

• 장점
  • 컴포넌트 단위로 코드를 모듈화
  • 뛰어난 GC, 메모리 관리, 성능
  • 서버 & 클라이언트 렌더링 모두 지원 => 초기 구동 딜레이 & SEO
  • ui 재사용성
  • 커뮤니티 활발
• 단점
  * IE8 이하 지원 ❌
  

JSX

---

• JavaScript Extension
• 마크업 언어(XML, HTML)를 Native JS로 변환해줌
  ( by babel- jsxloader )
• ES6의 문법은 아님
• 속성은 camelCase로 표현해야

컴포넌트

---

Props

---

• 클래스 컴포넌트 내부의 immutable data => {this.props.prop_name}
• 함수형 컴포넌트에서는 인자로 전달해야 함 => {props.prop_name}
• default props : children

//1. functional Component
function Greeting (props){
	return (<div>Hello {props.name}</div>);
}  

//2. class Component
class Greeting extends React.Component{
	render () {
	    return (<div>Hello {this.props.name}</div>);
	}
}

//컴포넌트 사용하기
class App extends React.Component {
	render () {
        return (<Greeting name="Hello"/>);
    }
}

//기본값 설정(클래스 컴포넌트 선언 후)
Greeting.defaultProps = { key : value };

//Type 검증
Greeting.propTypes ={
	prop_name : PropTypes.자료형 //[.isrequired]
}

state

---

• 컴포넌트의 유동적인 데이터
• 초기값 설정이 필수 (constructor()에서 초기화)
• this.setState()를 이용해 값 변경 가능 -> 렌더링 된 후 직접 접근하여 값을 변경하면 안된다. (전체 업데이트로 인해 성능 저하)

class Counter extends React.Component{
	constructor(props){
    	super(props);
    	this.state = {
    		count : 0
    	};
    	this.plus=this.plus.bind(this);
    	this.minus = this. minus.bind(this);
    }
  	render (){
    	return (
        	<div>
          		<h2>{this.state.count}</h2>
          		<button onClick={this.plus}>+</button>
          		<button onClick={this.minus}>-</button>
          	</div>
        );
    }
    plus () {
    	this.setState({
        	count : this.state.count + 1
        });
    }
	minus () {
    	this.setState({
        	count : this.state.count -1
        });
    }
    
}

let과 var

---

• let은 재선언 불가
• let의 스코프는 블록 범위 내에서만 가능