1.props&state

1) props

컴포넌트 내부의 immutable.Data JSX 내부의 {this.props.propsName}
컴포넌트를 사용할 때 <> 괄호안에
PropsName="value"
this.props.children 은 기본적으로 갖고 있는 ptops로서, 여기에 있는 값이 들어간다.

 Practice.js

import React from 'react';
const Practice = (props) => {
return (

<div>
  이름: {props.name}
  나이: {props.age}
</div>

);
}

export default Practice;

props 는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에서는 props 를 받아오기만하고, 받아온 props 를 직접 수정 할 수 는 없습니다.

Event.js
import React from 'react';
import Practice from 'react';
const Event= () => {
return (
< Event name="닥터두리틀" age="27" />
);
}

export default Event;

2) state

유동적인 데이터 / JSX 내부에 {this.state.stateName}
초깃값 설정이 필수, 생성자 (constructor) 에서 this.state = {}으로 설정
값을 수정할 때는 this.setstate ({}), 렌더링 된 다음엔 this.state=를 사용하지 말 것

import React, {useState} from 'react';
const counter = () => {
const [count, setCount] = useState(0);
return (

<div>
     <p>{count}번 클릭!</p>
     <button onClick={() => setCount(count + 1)}>
      클릭
  </button>
</div>

);
}