React 생명 주기 함수
React에서 생명 주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻한다.
render(), constructor(), getDerivedStateFromProps(), componentDidMount() 함수들이 컴포넌트 생성 과정에 속한다.
생명 주기 함수 사용하기
생명 주기 함수 render() 사용하기
render() 함수는 return되는 HTML 형식의 코드를 화면에 그려주는 함수로 화면 내용이 변경되어야 할 시점에 자동으로 호출된다.
1
<div id="root"></div>
1
2
3
#root {
padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Lifecycle extends React.Component {
render() {
let h2Style = { fontSize: 16, fontWeight: "normal" };
console.log("3. render()");
return <h2 style={h2Style}>This is Render Function.</h2>;
}
}
class App extends React.Component {
render() {
let h1Style = { fontWeight: "normal" };
return (
<div>
<h1 style={h1Style}>React Example</h1>
<Lifecycle />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
생명 주기 함수 constructor(props) 사용하기
constructor(props) 함수는 생명 주기 함수들 중 가장 먼저 실행되며, 처음에 한 번만 호출된다.
컴포넌트 내부에서 사용되는 state를 선언하고, 부모 객체에서 전달받은 props를 초기화 할 때 사용한다.
super(props) 함수는 가장 위에 호출되어야 한다!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
class Lifecycle extends React.Component {
constructor(props) {
super(props); // this.state={};
console.log("1. constructor()");
}
render() {
let h2Style = { fontSize: 16, fontWeight: "normal" };
console.log("3. render()");
return <h2 style={h2Style}>This is Render Function.</h2>;
}
}
class App extends React.Component {
render() {
let h1Style = { fontWeight: "normal" };
return (
<div>
<h1 style={h1Style}>React Example</h1>
<Lifecycle />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
생명 주기 함수 static getDerivedStateFromProps(props, state) 사용하기
getDerivedStateFromProps(props, state) 함수는 constructor() 함수 다음으로 실행된다.
컴포넌트가 새로운 props를 받게 되었을 때 state를 변경해준다.
상위 컴포넌트에서 전달한 propsValue props를 props.propsValue로 접근해 값을 가져올 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class Lifecycle extends React.Component {
constructor(props) {
super(props); // this.state={};
console.log("1. constructor()");
console.log(props);
}
static getDerivedStateFromProps(props, state) {
console.log("2. getDerivedStateFromProps() : " + props.propValue);
console.log(props);
console.log(state);
return {};
}
render() {
let h2Style = { fontSize: 16, fontWeight: "normal" };
console.log("3. render()");
return <h2 style={h2Style}>This is Render Function.</h2>;
}
}
class App extends React.Component {
render() {
let h1Style = {
fontWeight: "normal"
};
return (
<div>
<h1 style={h1Style}>Hello React</h1>
<Lifecycle propsValue="fromApp" />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
생명 주기 함수 componentDidMount() 사용하기
componentDidMount() 함수는 위에 작성한 함수들 중 가장 마지막으로 실행된다.
즉, render() 함수가 return되는 HTML 형식의 코드를 화면에 그려준 후 실행된다.
화면이 모두 그려준 후에 실행되어야 하는 이벤트 처리, 초기화 등 가장 많이 활용되는 함수!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
class Lifecycle extends React.Component {
constructor(props) {
super(props); // this.state={};
console.log("1. constructor()");
console.log(props);
}
static getDerivedStateFromProps(props, state) {
console.log("2. getDerivedStateFromProps() : " + props.propValue);
return { tempState: props.propsValue };
}
componentDidMount() {
console.log("4. componentDidMount()");
console.log("5. tempState : " + this.state.tempState);
console.log(this.state);
}
render() {
let h2Style = { fontSize: 16, fontWeight: "normal" };
console.log("3. render()");
return <h2 style={h2Style}>This is Render Function.</h2>;
}
}
class App extends React.Component {
render() {
let h1Style = { fontWeight: "normal" };
return (
<div>
<h1 style={h1Style}>Hello React</h1>
<Lifecycle propsValue="fromApp" />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
생명 주기 함수 shouldComponentUpdate() 사용하기
shouldComponentUpdate() 함수는 컴포넌트의 변경 과정에 속한다.
여기서 변경이란? state의 변경을 의미!
setState() 함수는 속성의 선언과 초기화를 동시에 실행할 수 있다.
setState() 함수에 의해 state의 변경이 발생했기 때문에 변경 단계의 생명 주기 함수 shouldComponentUpdate() 가 실행된다.
shouldComponentUpdate()는 불린 타입의 데이터를 return 하는데 그 값이 true인 경우에는 render() 함수를 한 번 더 호출한다.
shouldComponentUpdate() 함수의 반환 값에 따라 render() 함수를 재실행 할 수 있다는 점을 이용하면, props나 state 값이 변경될 때 화면을 다시 그리며 제어할 수 있다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
class Lifecycle extends React.Component {
constructor(props) {
super(props); // this.state={};
console.log("1. constructor()");
console.log(props);
}
static getDerivedStateFromProps(props, state) {
console.log("2. getDerivedStateFromProps() : " + props.propsValue);
return { tempState1: props.propsValue };
}
shouldComponentUpdate() {
console.log("6. shouldComponentUpdate()");
return true;
}
componentDidMount() {
console.log("4. componentDidMount()");
console.log("5. tempState1 : " + this.state.tempState1);
this.setState({ tempstate2: true });
}
render() {
let h2Style = { fontSize: 16, fontWeight: "normal" };
console.log("3. render()");
return <h2 style={h2Style}>This is Render Function.</h2>;
}
}
class App extends React.Component {
render() {
let h1Style = { fontWeight: "normal" };
return (
<div>
<h1 style={h1Style}>Hello React</h1>
<Lifecycle propsValue="fromApp" />
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);