props / state

props

props는 properties의 줄임말로, 컴포넌트의 속성값을 말한다.

• 어떤 값을 컴포넌트에게 전달해줘야 할때 props를 사용
• props는 부모 컴포넌트로부터 전달 받은 테이터를 지니고 있는 객체
• props를 이용해 어떤 자바스크립트 값을 모두 자식 컴포넌트에 전달 할수 있다. (변수, state 값, event handler 등)

// Parent.js

import React, { useState } from 'react';
import Child from '../pages/Child/Child';

function Parent() {
  const [color, setColor] = useState('red');

  return (
    <div>
      <h1>Parent Component</h1>
			<Child titleColor={color} />
    </div>
  );


export default Parent;

```javascript

// Child.js

import React from 'react';

function Child(props) {
	// console.log(props);

  return (
    <div>
      <h1 style={{color : props.titleColor}}>Child Component</h1>
    </div>
  );
}

export default Child;

state

state = 상태

• 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값
• 화면에 보여줄 컴포넌트의 UI 정보(상태)
• 컴포넌트 내에서 정의하고 사용하며 데이터가 변경 될수 있다.
• 즉 state에서 상태값을 설정하는 이유는 컴포넌트 안의 요소에서
  그 상태값을 반영해 데이터가 바뀔때마다 효율적으로 화면에 나타내기
  위함

import React, { useState } from 'react';

function State() {
	const [color, setColor] = useState('red');

	return (
      <div>
        <h1>Function Component | State</h1>
      <button onClick={() => setColor('blue')}>Click</button>
      </div>
  );
}

export default State;