React에서 컴포넌트는 애플리케이션의 기본 구성 요소입니다.
컴포넌트는 화면에 표시할 UI를 정의하는 단위로,
이를 사용하면 코드를 재사용하고 UI를 더 효율적으로 관리할 수 있습니다.
이번 글에서는 React 컴포넌트를 만드는 세 가지 방법에 대해 알아보겠습니다.
컴포넌트란?
React 컴포넌트는 함수 또는 클래스를 통해 정의할 수 있습니다.
하지만 최신 React에서는 함수형 컴포넌트를 주로 사용합니다.
React 컴포넌트는 반드시 JSX 또는 React.createElement를 반환해야 합니다.
반환된 내용은 브라우저 화면에 렌더링됩니다.
React 컴포넌트를 만드는 세 가지 방법
React에서 함수형 컴포넌트를 정의하는 방법은 크게 세 가지입니다:
1. function 키워드 사용
전통적인 함수 선언 방식을 사용해 컴포넌트를 작성합니다.
이 방식은 ES5 이전부터 사용되어 익숙한 형태입니다.
예제:
function MyComponent() {
return <h1>Hello from MyComponent</h1>;
}특징:
- 문법이 간단하고 직관적입니다.
- 컴포넌트 이름은 대문자로 시작해야 React가 HTML 태그와 구분합니다.
- 최신 React에서는
function키워드 대신 다른 방식이 더 많이 사용됩니다.
2. 함수 표현식
함수를 변수에 할당하는 방식으로 컴포넌트를 정의할 수 있습니다.
이는 함수 선언과 동일하게 동작하지만, 변수 스코프와 관련된 장점이 있습니다.
예제:
const MyComponent = function() {
return <h1>Hello from MyComponent</h1>;
};특징:
- 컴포넌트를 변수에 할당해 코드 구조를 명확히 관리할 수 있습니다.
- 최신 React에서는 이 방식보다는 화살표 함수가 더 자주 사용됩니다.
3. 화살표 함수
React에서 가장 선호되는 방식은 화살표 함수를 사용하는 것입니다.
화살표 함수는 ES6(ECMAScript 2015)에서 도입된 간결한 함수 표현법으로, 작성 방식이 짧고 코드 가독성이 높습니다.
예제:
const MyComponent = () => {
return <h1>Hello from MyComponent</h1>;
};또는, 한 줄로 작성할 수 있는 경우 중괄호와 return을 생략할 수 있습니다:
const MyComponent = () => <h1>Hello from MyComponent</h1>;특징:
- 최신 React에서 권장되는 방식입니다.
- 코드가 간결하고, 특히
this바인딩 문제를 신경 쓰지 않아도 됩니다. - React Hooks와 함께 사용하기 적합합니다.
최신 React에서 권장되는 방식
React는 클래스형 컴포넌트보다 함수형 컴포넌트를 권장합니다.
함수형 컴포넌트는 작성하기 더 간단하고 성능도 더 효율적입니다.
특히, React Hooks를 사용하면 클래스형 컴포넌트에서만 가능했던 상태 관리와 라이프사이클 기능을 함수형 컴포넌트에서도 구현할 수 있습니다.
요약
React 컴포넌트를 만드는 세 가지 방법을 정리하면:
function키워드를 사용하는 전통적인 방식.- 함수 표현식을 사용하는 방식.
- 화살표 함수를 사용하는 최신 방식.
권장: 화살표 함수를 사용한 함수형 컴포넌트 작성
- 코드가 더 간결하고 최신 React의 기능과 더 잘 맞습니다.
- 유지보수와 협업이 쉬워집니다.
이제 React 컴포넌트를 작성할 때 어떤 방식을 선택할지 고민하지 않아도 되겠죠?
가장 적합한 방식을 선택해 사용해 보세요!
