일반 JavaScript에서 React로 넘어가면서 느낀 두드러진 점 중 하나는
React엔 Component란 개념이 있다는 것이다.
오늘은 그 컴포넌트에 대해 알아보려 한다!
📌 Component
컴포넌트는 독립적이고 재사용 가능한 코드 조각으로,
js의 함수와 동일한 목적을 수행하지만 독립적으로 작용하며 JSX를 반환한다.
*JSX - JavaScript 안에서 HTML처럼 보이게 쓴 문법이다.
HTML 요소를 반환하는 함수로 볼 수 있다.
컴포넌트는 일종의 부품과 같다. 하나의 부품이 용도가 동일하다면 이곳저곳에 재사용될 수 있는 것처럼 컴포넌트 또한 그러하다.
이처럼 컴포넌트는 여러 요소에 재사용되는 것을 핵심으로 한다.
컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 나누고 각 부분을 개별적으로 고려할 수도 있다.
재사용, 유지보수, 가독성의 측면에서 매우 유용하다!
버튼, 카드, 네이비게이션 바, 모달 등 범용적으로 사용할 수 있는 UI를 컴포넌트로 만들면 재사용하기 편하다.
📌 props
한편, React에선 props란 개념이 존재한다.
컴포넌트는 js의 함수처럼 props란 인수를 입력으로 받아 화면에 보여줄 React 요소를 반환한다.
💡 함수 컴포넌트에서는 매개변수로 받고, 클래스 컴포넌트에서는 `this.props` 로 접근한다.
부모가 자식에게 전달해야 할 속성이 있을 경우 props를 통해 전달 한다.
컴포넌트가 값을 읽어서 화면을 만든다.
버튼, 카드, 모달 등의 컴포넌트 내부에 내용을 props로 전달할 수 있다.
이러한 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트 두 가지 종류가 존재한다.
📌 함수 컴포넌트
함수 컴포넌트는 다음과 같이 정의한다.
function Child() {
return (
<h2> Hi, I am a child </h2>
);
}
위에서 만든 이 함수 컴포넌트는 부모 컴포넌트 안에서 사용된다.
function Parent() {
return (
<>
<Child />
</>
)
}
만약 부모로부터 자식이 전달받아야 할 데이터가 존재할 경우 props를 통해 자식으로 전달할 수 있다.
function Parent() {
return (
<>
<Child color="red" />
</>
)
}
React는 코드 재사용을 핵심으로 하기에 재사용성과 유지보수 측면에서 별도 파일로 분리해서 관리한다.
📌Child.jsx와 같이 대문자로 시작하는 PascalCase를 사용하는 것이 관례이다.
소문자로 시작하면 일반 HTML 태그로 인식될 수 있기 때문이다.
📌 클래스 컴포넌트
클래스 컴포넌트는 js의 클래스로 정의된 React 컴포넌트의 기본 클래스이다.
React 공식문서와 W3Schools에 의하면 클래스 컴포넌트 대신 hook과 함께 함수 컴포넌트를 사용하는 것이 권장된다고 한다.
클래스 컴포넌트는 다음과 같은 방식으로 정의한다.
내장 `Component` 클래스를 확장하고, 메서드를 정의해야 한다.
import { Component } from "react";
class Child extends Component {
render() {
return <h1>{this.props.color}</h1>;
}
}
마찬가지로 props를 통해 속성을 전달한다.
class Child extends Component {
render() {
return <h1>{this.props.color}</h1>;
}
}
<Child color="red" />
💡 함수 컴포넌트 VS 클래스 컴포넌트
함수 컴포넌트와 클래스 컴포넌트엔 차이점이 존재한다.
| 항목 | 함수 컴포넌트 | 클래스 컴포넌트 |
| 정의 방식 | JavaScript의 함수 | ES6 class |
| 렌더링 | JSX를 직접 반환 | `render()` 에서 반환 |
| props 접근 | 매개변수로 받음 | `this.props` 로 접근 |
| 생명주기 / 사이드 이펙트 처리 | `useEffect` 등 hooks로 처리 | `componentDidMount`, `componentDidUpdate` 등을 사용 |
| 현재 권장 상황 | 권장 | 새 코드에선 비권장, 레거시 유지보수용 |
과거에는 클래스 컴포넌트가 많이 사용되었으나, 지금은 함수 컴포넌트와 Hooks의 사용이 표준에 가깝다.
둘 다 가능하지만, 현재는 함수 컴포넌트가 권장된다고 생각하면 될 것 같다!