처음에 공부 방법을 찾아보면서, 다양한 블로그 글을 참고했는데
코드가 대략 어떤 방식으로 이루어지는지를 보려고 했다.
그러나 코드가 몹시 다르게 느껴질 정도로 방식이 다양했는데, 컴포넌트에도 유형이 있기 때문이었다.
유형을 보기 전에 우선, 컴포넌트에 대해 알아보자.
- 컴포넌트란?
UI를 구성하는 코드의 부분을 의미한다.
컴포넌트의 정의는 다양하지만, 간단히 보면 재사용성이 높은 코드를 의미하고,
보통 기능 단위로 컴포넌트를 나누는 듯하다.
예를 들어, 다음과 같은 화면이 있다고 하자.

좌우 버튼을 누르면 가운데 사람이 움직이는 반응을 한다고 치면,
컴포넌트는 '사람', '버튼', 배경이 되는 '사각형'으로 나눌 수 있을 것이다.
그리고 '버튼'은 '왼쪽 버튼'과 '오른쪽 버튼'으로 나눌 수 있다.
이런식으로 리액트를 이루는 모든 것은 컴포넌트와 하위 컴포넌트들로 이루어진다.
- 컴포넌트의 유형
컴포넌트를 선언하는 데에는 두 가지 방식이 존재한다.
1. 클래스형 컴포넌트
클래스형 컴포넌트는 말 그대로 클래스를 기준으로 구성되는 컴포넌트이다.
import {Component} from 'react';
class App extends Component {
render() {
return <div className="App">...</div>
}
}
export default App;
위와 같이 Component로 상속을 받아야만 하며, render() 메소드가 반드시 필요하다.
state, lifeCycle 관련 기능 사용이 가능하다는 장점이 있다.
2. 함수형 컴포넌트
함수형 컴포넌트는 function으로 만들 수 있다.
import './App.css';
function App() {
return <div className = "App">...</div>
}
export default App;
함수형 컴포넌트에서 컴포넌트를 선언할 때는 그저 return 값만 존재하면 된다.
클래스형에 비해 몹시 간단하지만, state와 lifeCycle 관련 기능이 사용 불가했다.
그러나 최근들어 Hook을 통해 가능해졌고,
이런 점들로 인해 클래스형 컴포넌트보다는 함수형 컴포넌트와 Hook을 함께 사용하는 것이 더 대중화 되었다.
이렇게 내가 헷갈렸던 점은,
Component를 상속받아 render() 메소드를 구현해 리액트를 사용하는 방식과
단순히 function만 정의해 안에서 리턴하는 방식의 차이에서 비롯한 것이라는걸 알았다.
참고 :
👊리액트 부시기 : 리액트 초보 탈출하기 (velog.io)
'개발 > React' 카테고리의 다른 글
[백엔드 개발자의 프론트 도전기] 6. props 2 - children (2) | 2023.12.13 |
---|---|
[백엔드 개발자의 프론트 도전기] 5. props (1) | 2023.12.13 |
[백엔드 개발자의 프론트 도전기] 4. state (1) | 2023.12.13 |
[백엔드 개발자의 프론트 도전기] 3. 구현하기 (1) | 2023.12.12 |
[백엔드 개발자의 프론트 도전기] 1. 설정 (0) | 2023.12.12 |