5. Components and Props

---

React = Component-Based

React Components

---

Props (Property)

• Component 의 속성
• 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

---

Props 특징

Read-Only

• 읽을 수 만 있다 = 값을 변경할 수 없다.
• 붕어빵이 다 구워진 이후, 속재료를 바꿀 수 없다.
• 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성
• 모든 리액트 컴포넌트를 Props 를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄 것

---

Component 만들기 및 랜더링

---

Function Component

function Welcome(Props) {
	return <h1>Hi, {props.name}</h1>
}

Class Component

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

! Component의 이름은 항상 UpperCase로 시작해야한다.

HTML div tag로 인식

const element = <div />

Welcome이라는 리액트 Component로 인식

const element = <Welcome name='Daniel'/>;

---

Component 렌더링

DOM tag 를 사용한 element

const element = <div />

사용자가 정의한 Component를 사용한 element

const element = <Welcome name='Daniel'/>;

function Welcome(props) {
	return <h1>Hi, {props.name}</h1>
}

const element = <Welcome name='Daniel' />
ReactDOM.render(
	element,
	document.getElementById('root')
)

---

Component 합성

---

Component 추출

function Comment(props) {
	return (
		<div className='comment'>
			<div className='user-info'>
				<img className='avatar' 
					src={props.author.avatarUrl}
					alt={props.author.name}
				/>
				<div className='user-info-name'>
					{props.author.name}
				</div>
			</div>
			<div className='comment-text'>
				{props.text}
			</div>
			<div className='comment-date'>
				{formatDate(props.date)}
			</div>
		</div>
	)
}

props = {
	author : {
		name:'Daniel',
		avatarUrl: 'https://localhost/image.png'
	},
	text: 'this is comment'
	date: Date.now(),
}

1. Avatar 추출

function Avatar(props) {
	return (
		<img className='avatar'
			src={props.user.avatarUrl}
			alt={props.user.name}
		/>
	)
}

적용

function Comment(props) {
	return (
		<div className='comment'>
			<div className='user-info'>
				<Avatar user={props.author} />
				<div className='user-info-name'>
					{props.author.name}
				</div>
			</div>
			<div className='comment-text'>
				{props.text}
			</div>
			<div className='comment-date'>
				{formatDate(props.date)}
			</div>
		</div>
	)
}

user-info 추출

function UserInfo(props) {
	return (
		<div className='user-info'>
			<Avatar user={props.user} />
			<div className='user-info-name'>
				{props.user.name}
			</div>
		</div>
	)
}

적용

! 재사용 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라진다.

---