Class형 React
생활코딩을보고 React를 경험해보는 시간을 가지게 되었다.
개발환경
npx create-react-app .
터미널에 위와 같은 명령어를 작성하여 기본적으로 사용할 수 있는 환경을 가져왔다.
이 명령어 하나로 모든 세팅은 끝이난다.
실습으로 들어가기전 리액트에서 사용되는 컴포넌트들에 대해서 미리 알아보도록 하자.
componentWillMount 란?
render()
가 실행되기 전에 호출된다.
요즘은 잘 사용하지 않는다고 한다.
지금은 현재 UNSAFE_componentWillMount()
로 이름이 변경되었다.
componentDidMount 란?
componentDidMount()
는 컴포넌트가 마운트된 직후, 즉 트리에 삽임된 직후에 호출된다. DOM 노드가 있어야 하는 초기화 작업은 이 메서드에서 이루어지면 된다.
이 메서드는 데이터 구독을 설정하기 좋은 위치이다.
랜덤버튼 클릭 후 리랜더링 될 경우
componentWillUpdate 란?
지금은 현재 UNSAFE_componentWillUPdate()
로 변경되었다. 새로운 props
또는 state
가 전달되어서 랜더링이 이루어지기 전에 호출된다. 이 메서드에서는 this.setState
를 호출할 수 없다.
통상적으로 이 메서드는 componentDidUpdate
로 대체할 수 있다.
componentDidUpdate 란?
componentDidUpdate()
는 갱신이 일어난 직후에 호출된다. 즉 State의 값이 변경되어 rerender
될때 render() 이후에 호출된다. 최초 렌더링에서는 호출되지 않는다.
shouldComponentUpdate() 란?
shouldComponentUpdate
는 props
또는 state
가 새로운 값으로 갱신되어 리랜더링이 발생하기 직전에 호출된다. 기본값은 true
이다.
이 메서드가 false
를 반환할 경우 지금은 현재 UNSAFE_componentWillUPdate()
, render()
, componentDidUpdate()
는 호출되지 않는다.
이제 코드를 살펴보자.
import React , {useState, useEffect} from 'react';
import './App.css';
function App() {
return (
<div className="container">
Hello World
<FuncComp></FuncComp>
<ClassComp></ClassComp>
</div>
);
}
var classStyle = 'color:red';
class ClassComp extends Component {
state = {
number: Math.random(),
_date: (new Date()).toString()
}
componentWillMount() {
console.log('%cclass => componentWillUnmount', classStyle)
}
componentDidMount() {
console.log('%cclass => componentDidMount', classStyle)
}
shouldComponentUpdate() {
console.log('%cclass => shouldComponentUpdate', classStyle)
return true;
}
componentWillUpdate() {
console.log('%cclass => componentWillUpdate', classStyle)
}
componentDidUpdate() {
console.log('%cclass => componentDidUpdate', classStyle)
}
render() {
console.log('%cclass => render', classStyle)
return (
<div className="container">
<h2>class style component</h2>
<p>Number : {this.state.number}</p>
<p>Date : {this.state._date}</p>
<p>여기는 버튼 한개로 만들기!</p>
<input type="button" value="random" onClick={
function(){
this.setState({
number:Math.random(),
_date: (new Date()).toString()
})
}.bind(this)
}></input>
</div>
)
}
}
먼저 리액트를 사용하기 위해서는
import React , {Component ,useState, useEffect} from 'react';
위의 문구를 추가해주어야 한다.
useState 와 useEffect 는 functional React
에서 다룰 계획이다.
우선 class형 Component는 render()
가 필수적으로 필요하다.
render()
는 위의 App
에 DOM을 그려준다고 생각하면 된다.
이때 render에서 사용할 값들을 state에 등록하여 사용할 수 있는데 그 onClick
함수를 통해 그 state의 값을 변경할 수 있고 변경하기위한 메서드는 setState
이다.
class형 Component를 공부하면서 느낀 가장 큰 단점은 이러한 기능을 통해 state의 값을 변경하기 위해서 bind(this)
를 사용해 주어야 한다는 것이 가장 큰 단점인 것 같았다.
요즘에는 클래스형 컴포넌트보다 함수형 컴포넌트를 더 선호한다고 한다.
다음시간에는 함수형 컴포넌트를 공부하여 어떠한 차이점이 있는지 알아볼 계획이다.
Author And Source
이 문제에 관하여(Class형 React), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leehangeul/Class형-React저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)