함수형 컴포넌트와 클래스 컴포넌트
2022-06-13
2. 함수형 컴포넌트의 특징
1) 기본 구조
const App = (props) => {
// useState Hook으로 state 설정
const [state, setState] = useState({
...
});
// 컴포넌트 내부 함수
const functionA = () => {
...
}
const functionB = (args) => {
...
}
// 가상 DOM에 그려질 영역
return (
<div>
...
</div>
)
}
export default App;
2) React Hook API
- state 관리는
useState() - 생명주기 관리는
useEffect()// es6의 구조분해 할당 문법으로 // useState의 state값과 setState(state 업데이트 메소드) 할당 const [state, setState] = useState({ stateData: ..., ... });
3) this, bind 사용 X
- arrow function이 this를 자동으로 바인딩 시켜줌 ```jsx const onClickMethod = () => { // do something }
return (
{props.propsData}
{state.stateData}
<button onClick={onClickMethod}></button>
) ```