[React/JSX/Component] React의 특징(2)

Step3. React는 Component로 구성되며, Component는 state(Data)와 Render(view)로 구성된다.

• React는 Data와 화면(view)를 일치시키기 위해서, 만들어졌습니다. 따라서, Data(State)를 다루는 곳과 화면에 반영(Render)하는 영역이 있습니다. 이 둘을 합쳐서 Component라고 하는데, 컴포넌트가 React의 최소 단위라고 할 수 있습니다.
• Class Component로 보면, Component의 구성을 한눈에 볼 수 있습니다. (원시적인 형태)

Example Code) 좋아요 버튼 Class Component

// Class Component로 
// React가 설치 되어있다고 가정합니다.
import react from 'react'

const e = React.createElement;

class LikeButton extends React.Component{
	constrctor(props){
		super(props);
		this.state ={liked:false};
 }
	render(){
		return e("button",{onClick:()=>{this.setState({liked:true})},type:"submit"},
		this.state.liked === true ? "Liked" : "Like",);
	}
}

ReactDOM.render(e(LikeButton),document.querySelector("#root"));

Step4. React는 JSX를 지원하고, IF,For을 각각 삼항연산자,map을 이용한다. 

• React의 Render 부분을 보면, 상당히 복잡하게 되어있고 가독성이 좋지않다. 따라서, 익숙한 "Tag 문법"을 위해서, Babel 친구의 힘을 빌려서 JSX라는 형태를 지원합니다.
• 또한, Render 부분에 return은 딱 1개의 tag(<></>)만 반환할 수 있으며 , Component 내에서의 IF,For 문법은 삼항연산자,map을 각각 이용하게 된다.
• JSX로 작성되어진 Tag는 CamelCase가 기본이며, Component 또한, CamelCase가 기본이다.(첫문자는 대문자가 국룰,지키지 않을 시 에러발생.)

Example Code) 좋아요 버튼 Class Component with JSX

// Class Component로 
// React가 설치 되어있다고 가정합니다.
import react from 'react'

const e = React.createElement;

class LikeButton extends React.Component{
		state ={
			liked:false;
 }
 // Render는 State가 갱신될 때마다 실행된다. 따라서, Redner의 Return은 가볍게 만들어 주는게 좋다.
onclick = () =>{
	this.setState({liked:true})
}
change =() =>{
	this.state.liked === true ? "Liked" : "Like"
}

	render(){
		return <button type:"submit" onClick={this.onclick}>Like</button>
			{this.change}
        //Babel이 아래와 같은 역할을 해준다. 
		/*
		this code equal , up 
		return e("button",
		{ onClick:()=>{ this.setState({ liked:true })},type:"submit"},
		this.state.liked === true ? "Liked" : "Like",);
		*/
	}
}

ReactDOM.render(<LikeButton />,document.querySelector("#root"));
// Like button을 여러개 생성가능하게 된다. 
// ReactDOM.render(<div><LikeButton /><LikeButton /><LikeButton /></div>,document.querySelector("#root"));