[React] Component

functional component

• function으로 만들어서 return문에 html코드 담아주기
• 함수명으로 사용하기
• 함수명은 대문자로 시작!!
• 호출시에는 < Component >< /Component > 혹은 < Component/ >로 사용

function TestCom(){
	return(
		< h4>hello~~< /h4>
	)
}

function App () {
	return(
		< TestCom>< /TestCom>
	)
}

• 컴포넌트가 유용한 상황
  - 반복적인 html 축약
  • 큰 규모의 페이지들
  • 자주 변경되는 것들

class component

• 요즘에는 function을 활용한 컴포넌트 생성이 일반적이지만,
• 과거에는 class로 생성을 했었음
• 기본적인 구조

class 클래스이름 extends React.Component {
	constructor(){
		super()
	}
	render(): React.ReactNode {
		return()
	}
}

• state 사용시 오브젝트 형식으로 생성
• render의 return문 안에서 사용시에는 this.state.key이름 으로 접근
• state 수정시 this.setState({바꾸려는key : 새 값} 으로 수정
  => 특이하게 전체 값 말고 바꿀 값만 입력해도 알아서 해당 부분을 찾아 그것만 수정
• props는 constructor와 super의 파라미터로 넣어준 후 사용

>class 클래스이름 extends React.Component {
	constructor(props){
		super(props)
		// ✅state 생성
		this.state = {name : 'Yu', age = 26}
	}
	render(): React.ReactNode {
		return(
			< div>
				// ✅state 사용
				< h4>{this.state.name}, {this.state.age}< /h4>
				// ✅state 변경 
				< button onClick = {() => {
					this.setState({age : 27})
				}>button< /button>
			< /div>
		)
	}
}

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍