우리는 지난시간에 ES6 의 class 에 대해서 공부를 했다 이렇게 한 이유는 ES6에 class 를 사용할 수 있는 무엇인가를 알기 위함이지만 사실 이번 포스트를 위해서 지난시간 ES6의 클래스형에 대해서 잠깐 공부를 해보았다
복습을 해보자면 객체지향 프로그래밍에 맞게 자바 스크립트에서도 class 를 생성할 수 있으며 객체 메서드 정의 생성자 상속등을 배웠다 이번시간에는 class 컴포넌트에 대해서 알아볼려고 합니다
class 형 React 구조
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react";
class HelloReact extends React.Component{
constructor(props){
super(props)
}
render(){
return (
<div>
<span>HelloReact</span>
</div>
)
}
}
export default HelloReact;
class 형 React 는 이와 같이 생겼다 상단에 import 는 동일하고 만드는 방법은 ES6의 class 문법을 따르면 된다 그리고 상속을 받는것은 React.Component 를 상속을 받는다 그리고 생성자인 constructor 에 props 를 받게끔 선언을 해두었고 render() 아래에 표현할 Dom 을 만들어 놓고 있는 모습입니다
class 컴포넌트의 문제점
문제점이라기 보다는 일단 최초 React는 이 class 형 컴포넌트로 출발을 해서 지금 우리가 보는 함수형 React 컴포넌트로 발전을 했다 이렇게 대 격변을 가진 이유는 생각보다 ES6의 class 형을 쓰기가 어려웠기 때문이다 그렇기에 특정 버전까지만 class 형을 지원하고 그 뒤 버전부터 함수형 컴포넌트를 권장하는 편이다
Comment , CommentList
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 Comment extends React.Component{
constructor(props){
super(props);
this.name = props.name;
this.comment = props.comment;
}
render(){
return (
<div>
이름 : <span>{this.name}</span>
댓글 : <span>{this.comment}</span>
</div>
)
}
}
export default Comment;
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
import React from "react";
import Comment from "./Comment";
class CommentList extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<Comment name= "Time" comment="Class 형 React 새로워요"/>
<Comment name= "Kim" comment="그런거 같아요 함수형 React 하고는 또 다른 느낌 적인 느낌?"/>
</div>
)
}
}
export default CommentList;
지금 두개의 React 컴포넌트를 만들었다 물론 class 형으로 말이다 이렇게 만든 이유는 props 를 활용하기 위함이고 부모 컴포넌트 CommentList 에서 props 로 name 과 comment 를 던져주는 상태이고 자식 컴포넌트인 Comment 에서 부모가 내려준 props 를 가지고 필드를 선언해서 각각의 값을 렌더링 하고 있는 중입니다 이렇게 우리는 class 형 컴포넌트에 대해서 알아보았습니다 다음시간에는 이를 바탕으로 class 형 컴포넌트에 state 를 알아보도록 하겠습니다