[React] State와 LifeCycle
State
Object
component의 data를 넣을 공간이 있고 이 데이터는 변할 수 있다.
말하자면 바뀔 여지가 있는 부분.
state
에는 수동으로 바뀌는 값만 넣어주기
여러 컴포넌트를 사용할 경우 각각의 state
를 갖게 됨.
Props와의 차이
props
는 함수 매개변수처럼 component에 전달되는 반면 state
는 함수 내에 선언된 변수처럼 component 안에서 관리된다.
State update
class App extends React.Component {
state = {
count: 0
};
add = () => {
this.state.count = 1;
};
minus = () => {
this.state.count = -1;
};
render(){
return (
<div>
<h1>The number is : {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>Minus</button>
</div>
)
}
}
add
,minus
함수에서 count의 값을 변경하고 있지만 결과는 동작하지 않는다.
동작하지 않는 이유❓
react가 render function을 refresh하지 않기 때문이다.
state의 상태가 변경될때마다 react가 render function을 호출해서 바꿔주길 원한다면 setState를 사용해야한다.
setState
component의 state
객체에 대한 업데이트를 실행
setState를 사용해야하는 이유❓
setState를 사용하지 않으면 새 state와 함께 render fucntion이 호출되지 않는다.
매순간 setState를 호출할때마다 react는 새로운 state와 함께 render function을 함께 호출한다.
class App extends React.Component {
state = {
count: 0
};
add = () => {
this.setState(current => ({count: current.count + 1}));
// this.setState({count: this.state.count + 1});
// -> 안좋은예 (current로 현재의 상태를 불러와서 사용하도록 하자.)
};
minus = () => {
this.setState({
count: this.state.count - 1
});
};
render(){
return (
<div>
<h1>The number is : {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>Minus</button>
</div>
)
}
}
예전 state
값으로 새로운 state
를 만들때는 return
해주는 함수를 사용하기
-> setState
가 비동기이므로함수를 따로 뺐을때는 무조건 화살표 함수 쓰기! function을 사용하면 this가 달라져버림
life cycle
life cycle method : react가 component를 생성하고 없애는 방법
Mount : 어떤 component가 DOM에 처음 랜더링 될 때 (component가 태어나는 것)
Unmount : component가 제거될 때 (component가 죽는것)
componentDidMount
- component가 처음 생성됐을때 실행
componentDidMount () {
setTimeout(() => {
this.setState({isLoading: false})
}, 6000);
}
- 컴포넌트가 DOM에 랜더링 된 후 6초 후 실행
componentDidUpdate
- component가 업데이트됐을때 실행
componentDidUpdate () {
console.log("updated!")
}
- state 값이 변경(업데이트)될때마다 실행
componentWillUnmount
- component가 떠날때 호출
componentWillUnmount () {
console.log("unmount!")
}
그 외 팁
jsx = js + xml
이기때문에 싱글태그는 꼭 뒤에 닫는 태그 쓰기
ex)<input type="number"/>
- 함수를 따로 뺐을때는 무조건
Arrow Function
사용하기!function
을 사용하면this
가 가리키는 것이 달라지기 때문에.
Author And Source
이 문제에 관하여([React] State와 LifeCycle), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@nsunny0908/React-State와-LifeCycle저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)