[React] Component 와 props

Component와 props

React를 이용하면 UI를 컴포넌트화 하여 재사용할 수 있도록 만들 수 있습니다.

여기에서 props란 Component의 parameter로 들어가는 임의의 값 입니다.

parameter를 props로 정의한 후 컴포넌트 생성 시 속성을 정의해주면 됩니다.

먼저 Component를 만드는 방법을 알아보겠습니다.

---

1. Component 생성

1-1. ES5 function

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

첫번째 방법으로는 ES5문법으로 function을 생성하여 만들어진 html 태그를 리턴하는 방법입니다.

1-2. ES6 function

const Hello = (props) =>
	<h1>Hello, {props.name}</h1>

두번째 방법으로는 ES5와 같은 방법이지만 문법만 ES6문법인 Arrow Function으로 만들어진 function 입니다.

1-3. ES6 Class 생성

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

ES6부터 지원하는 Class를 이용하여 React.Component Class를 상속하여 만드는 방법입니다.

위 3가지 방법 중 하나를 택해서 Component를 만들어 준 후

element를 만들어주겠습니다.

---

2. Element 생성

const element = <Hello name="yongyi" />

위처럼 만들어진 Component를 생성할때 정의한 이름으로 생성 후 props 값을 넣어줍니다.

---

3. Rendering element

ReactDOM.render(element, document.getElementById('root')

하나의 컴포넌트 생성부터 렌더링까지 코드를 만들어봤습니다.

---

4. 주의사항

* props는 read-only입니다. 어떠한 function도 props의 값을 변경하면 안되고, 같은 값을 넣었을 때 결과는 항상 같아야합니다.