<React> class Component & state
Component는 2가지로 구분됩니다. 이전 시간까지 알아본 function Component가 있구요. 또 이번 시간부터 알아볼 class Component가 있습니다.
class Component
- state
state는 Object이며 state Object에는 가변적인 data를 집어넣어 사용합니다. - plus, minus
class 안에 정의된 멤버 함수입니다. - render
class Component는 function Component와 달리 return 값을 render method를 사용해서 return해야 합니다. React는 Mounting될 때 class Component의 render method를 실행합니다. 또한 state 값의 변경이 감지되면 현재 Component와 자식 Component의 render함수를 호출하게 되는데요. virtual DOM tree와 비교하여 실질적으로 변화가 있는 Component에 대해서만 update가 이루어집니다. - setState
setState를 통해 state값을 업데이트할 수 있고 업데이트된 state값을 토대로 render함수가 호출되어 변경된 부분만을 refresh해줍니다. setState를 사용하지 않고 state값을 업데이트하면 render()함수가 호출 되지 않는것에 주의합니다.
setState는- 콜백 함수를 사용하거나
this.setState(객체를 return 하는 콜백 함수)
- 직접 객체를 전달할 수 있습니다.
this.setState({객체})
- 콜백 함수를 사용하거나
- onClick
React element에서 이벤트를 처리하는 방법은 DOM element 이벤트 처리와 유사하지만 문법적인 차이가 있습니다.- 소문자 대신 camelCase를 사용합니다.
- addEventListener를 호출하지 않아도 되고 rendering시에 리스너를 제공합니다.
React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 됩니다.
- React 공식 문서 -
app.jsx
Class Component 와 state를 이해하기 위해 버튼 click event에 따라 숫자가 변하는 Class Component를 만들어 보겠습니다.
- extends React.Component
React.component로부터 App Component를 만든다는 의미입니다.
import React from 'react';
class App extends React.Component{
state = {
count : 0
}
plus = () => {
//current는 state Object 전체를 의미합니다.
//this.state를 직접 이용해서 값을 변경하는건 위험합니다.
this.setState(current => {
return {count: current.count + 1}
});
}
minus = () => {
this.setState(current => {
return {count: current.count - 1}
});
}
render(){
return (
<div>
<h1>count: {this.state.count}</h1>
<button onClick = {this.plus}>Plus</button>
<button onClick = {this.minus}>Minus</button>
</div>
);
}
}
Author And Source
이 문제에 관하여(<React> class Component & state), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@since-1994/React-class-Component-state저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)