[React] Props와 State

Props와 State 란?

props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터입니다. State는 컴포넌트 내부에서 변경할 수 있는 데이터입니다. 

둘 모두 변경이 발생하면 리 렌더링이 일어날 수 있습니다. 

Component(컴포넌트)란?

버튼이나 텍스트 박스와 같이 높은 범용성의 요소를 컴포넌트로 정의해 부품처럼 만들 수 있습니다. 재사용이 가능한 API라고 볼 수 있으며 컴포넌트 내에 생김새 및 작동방식을 정의합니다. 그리고 컴포넌트 내에 컴포넌트가 들어갈 수 있습니다. 

컴포넌트를 정의하는 가장 간단한 방법은 function을 사용하는 것입니다. 

function Hello(props) {
	return <h1>Welcome!</h1>;
}

이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 React엘리먼트를 반환합니다.

이러한 컴포넌트를 '함수 컴포넌트'라고 합니다. 

Render함수

props와 state 등을 바탕으로 컴포넌트가 어떻게 생겼는지 정의하고, 뷰의 구성과 작동에 대한 정보를 지닌 객체를 반환합니다. 그리고  props, state가 변경되면 리 렌더링을 하여 새로운 요소로 갈아 끼웁니다. 다시 말해, 컴포넌트를 그리는 방법을 기술하는 함수입니다. 

---

Props 예제

App.js

import React from 'react';
import Example from './Example';

function App() {
	return (
    	<Example name="PROPS" />
    );
}

export default App;

Example.js

import React from 'react';

function Example(props) {
	return <h1>이것은 {props.name} 입니다.</h1>
}

export default Example;

컴포넌트에 전달되는 props는 파라미터를 통해 조회가 가능하다. 객체 형태로 전달되고. 을 이용해 접근합니다. 

---

State

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
      </div>
    );
  }
}

componentDidMount() {
	setTimeout(() => {
    	this.setState({
        	count: this.state.count + 1,
        });
    }, 1000);
}

contructor() 생성자 함수는 상속을 받고 있기에 super()를 호출해 줘야 합니다. 그렇기에 props인자를 받습니다. 

componentDidMount() 메서드는 컴포넌트 출력물이 렌더링 된 후에 실행됩니다. 

1초 후에 state의 값이 1 증가합니다. 

state를 이용할 경우 setState를 사용하면 값이 바뀐 상태로 렌더 메서드가 자동으로 호출됩니다.