React LifeCycle
리액트의 라이프사이클은 컴포넌트가 생성되고 제거되는 과정에서 발생하는 다양한 단계를 말하는데 이를 통해 언제 컴포넌트가 렌더링되고 업데이트 되는지 알 수 있습니다 이 내용은 원래 클래스형 컴포넌트에서만 사용된 개념이지만 함수형 컴포넌트로 넘어가서도 사용할 수 있는 개념이 되었습니다 오늘은 그중에서 class 형 컴포넌트 라이플 사이클에 대해서 먼저 공부를 하겠습니다
Mounting (생성단계)
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
import React from "react";
class Class_mount extends React.Component{
constructor(props){
super(props)
console.log(1);
}
componentDidMount(){
console.log(2);
}
render(){
console.log(3);
return (
<span>클래스형 컴포넌트 마운트 순서</span>
)
}
}
export default Class_mount;
예를 들어 이와 같은 함수형 컴포넌트가 있다고 하자 constructor , render 는 계속해서 해왔으니 설명은 pass 하고 componentDidMount 에 대해서만 잠깐 알아보겠습니다
componentDidMount
이는 Class 형 컴포넌트에서 사용되는 메서드중 하나로 컴포넌트가 DOM 에 마운트 된 직후에 호출되는 함수입니다 이는 주로 초기화 작업이나 , 외부 데이터 로딩 이벤트 리스너 같은 작업을 할때 유용합니다
componentDidMount 특징
한번만 호출됩니다 컴포넌트의 라이프사이클 중 처음 한 번만 호출됩니다. 즉, 컴포넌트가 DOM에 처음으로 마운트될 때만 실행됩니다.
DOM 조작 및 외부 데이터 로딩 주로 외부 API에서 데이터를 가져와야 하는 초기화 작업이나, DOM을 조작해야 하는 초기 설정 작업을 수행하는 데 사용됩니다. 예를 들어, 외부 데이터를 불러와서 상태에 저장하거나, 이벤트 리스너를 설정하는 등의 작업을 여기에서 수행할 수 있습니다.
비동기 작업 2번의 설명과 맞닿아 있을 수 있습니다 주로 데이터 요청등은 비동기로 요청으로 진행을 하게 됩니다 그렇기에 사용자는 더더욱 웹경험에 있어서 차이를 느끼지 못합니다
이런 특징들이 있습니다 그리고 우리는 여기서 순서를 매겼는데 console.log 의 호출 순서를 살펴보면 1 -> 3 - > 2 즉 constructor -> render -> componentDidMount 설명에 따라서 화면이 완전히 렌더링이 된 이후에 호출이 되는것이 특징입니다 주로 이 화면에서는 api 요청을 하고 그것을 state 에 넣어서 초기화를 하는 작업을 진행을 합니다
외부 api 호출
그럼 이번에는 spring 으로 간단하게 요청을 하고 데이터를 받는 과정을 한번 만들어보겠습니다 그리고 그 내용을 componentDidMount 로 요청을 받아서 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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import React from "react";
class Class_mount extends React.Component{
constructor(props){
super(props)
console.log(1);
this.state = {
commentList : []
}
}
componentDidMount(){
const get_commentList = async() => {
try{
const response = await fetch('http://localhost:8080/v1/api/getCommentList' , {
method : "GET" ,
headers : {},
}).then(res => {
const status = res.status;
if(status !== 200){
alert('서버와의 통신이 실패했습니다')
}else{
return res.json();
}
}).then(res2 => {
this.setState({commentList : res2});
})
}catch(error){
console.log(error)
}
}
get_commentList();
}
render(){
console.log(3);
return (
<div>
<span>클래스형 컴포넌트 마운트 순서</span>
{this.state.commentList.map(x => {
return (
<div key={x.id}>
<span>
name : {x.name}
</span>
<span>
comment : {x.comment}
</span>
</div>
)
})}
</div>
)
}
}
export default Class_mount;
그럼 간단하게 state 를 정의하고 api 요청을 통해서 서버로 값을 전달받아보자
서버사이드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:3000")
.allowedMethods("GET" , "POST" , "PUT" , "PATCH" , "DELETE" , "OPTIONS")
.allowedHeaders("*")
.allowCredentials(true)
.maxAge(3600);
}
}
origin 이 다르므로 cors bean 을 선언을 해주고
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@RestController
@RequestMapping("/v1/api")
@Slf4j
public class ResourceController {
@GetMapping("/getCommentList")
public List<CommentDao> getCommentList()
{
try{
log.info("api_start=========================");
List<CommentDao> returnList = new ArrayList<>();
returnList.add(new CommentDao("Time" , "React 정말 재미있습니다"));
returnList.add(new CommentDao("Kim" , "정말 재미있어요"));
log.info("api_end===========================");
return returnList;
}catch(Exception e){
throw new RuntimeException(e);
}
}
}
간단하게 api 통해서 호출을 하면 임의 데이터 return 하는 api 를 만들었습니다 이렇게 하면 서버에서 전달받은 데이터를 렌더링 하게 되는데
이렇게 보일 것입니다 우리는 이를 통해서 클래스형 컴포넌트에서 mount 되었을때 행위를 알아보았습니다