React.js(2) Componets 와 props

1. Components

 Componets는 html 태그를 가지고 있는 커다란 틀이라고 생각하면 된다.

 Componets에는 함수 컴포넌트와 클래스 컴포넌트 2가지 종류가 있다.

 

 1) 함수 컴포넌트

function Title(props){
	return <h1>{props.name}의 {props.title}</h1>;
}

2) 클래스 컴포넌트

class Title extends React.Component{
	render(){
		return <h1>{this.props.name}의 {this.props.title}</h1>;
	}
}

 

2. props

 props는 속성을 나타내는 데이터로 객체 인자로 사용된다.

 내부에 다양한 데이터를 가질 수 있다.

 

 

3. 예시

function Title(props){
	return <h1>{props.name}의 {props.title}</h1>;
}

function App() {
  return (
    <div>
      <Title name="유희열" title="스케치북" />
      <Title name="흥부" title="혹주머니"/>
      <Title name="엘리스" title="이상한나라"/>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

 

1) ReactDOM.render를 호출

2) App 컴포넌트 호출

3) App 컴포넌트는 각각 name과 title를 props로 하는 3개의 Title 컴포넌트 호출

4) Title 컴포넌트는 결과적으로 <h1>{name}의 {title}</h1> 엘리먼트를 반환

5) App 컴포넌트는 결과적으로

<div>
    <h1>유희열의 스케치북</h1>
    <h1>흥부의 혹주머니</h1>
    <h1>엘리스의 이상한나라</h1>
</div>

 를 반환

6) ReactDOM은 5)를 id가 root인 엘리먼트에 효율적으로 업데이트

 

 

*주의할 점

 모든 React Componet는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 함

 즉, 동일한 props 값에 대해 동일한 결과를 반환하고, 자신의 입력값을 변경해서는 안됨