[002] 리액트 (React) 배우기 - Hello World 2 (클래스형 Component 만들기)

안녕하세요~ totally 개발자입니다.

 

클래스형 컴포넌트

 

저번 시간에는 함수형 컴포넌트에 대해서 살펴보았고 이번 시간에는 클래스형 Component에 대해 살펴보도록 하겠습니다. 기본적으로 클래스형과 함수형 컴포넌트의 역할을 동일합니다. 하지만 함수형 컴포넌트가 선언하기가 더 편리하며 메모리를 덜 사용하는 장점이 있습니다. 예전에는 상태 및 lifecycle에 대한 기능을 사용할 수 없었지만 React의 Hook이 도입되며 이 문제는 해결되었습니다. 함수형 컴포넌트는 다른 말로 stateless, 클래스형 컴포넌트를 stateful로 구분하여 나눌 수도 있는데, 그 이유는 클래스형 컴포넌트는 로직과 상태를 클래스 내에서 작동시킴으로 구현되지만 함수형은 props를 통해 데이터를 전달받는 구조라 stateless(상태 없는)로 칭합니다. 함수형 컴포넌트가 근래 더 많이 쓰이는 추세이지만 클래스형 컴포넌트의 사용성 또한 이해하는 것이 좋습니다.

 

 

function HelloWorldComponent()에서 class HelloWorldComponent extends Component로 변경해야 하며 클래스형 컴포넌트에서는 render() 함수가 들어가고 return 안에 JSX문법의 코드가 들어가게 됩니다. 13번째 줄에 export default HelloWorldComponent;로 다른 곳에서 사용할 수 있도록 내보내주었으며 export default class HelloWorldComponent extends Component로 사용하면 13번째 줄에 굳이 export default HelloWorldComponent;를 추가로 작성할 필요는 없습니다.

 

App.js에서는 저번 시간의 내용을 변경할 필요 없이 그대로 사용하시면 됩니다.

 

npm run start하여 localhost:3000으로 결과를 본 모습입니다. 다음 시간에는 props에 관해 살펴보도록 하겠습니다. 감사합니다.