[React] 컴포넌트란?

안드로이드에도 컴포넌트라는 개념이 있는데(액티비티, 브로드캐스트 리시버, 서비스, 컨텐츠 프로바이더) 리액트에도 컴포넌트라는 개념이 있었다. 리액트 공식문서에서 말하는 컴포넌트는 아래와 같다.

 

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 자바스크립트 함수와 유사하다. "props"라는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한다
컴포넌트를 정의하는 가장 간단한 방법은 자바스크립트 함수를 작성하는 것이다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

이 함수는 데이터를 가진 하나의 "props" (props는 속성을 나타내는 데이터다) 객체 인자를 받은 후 리액트 엘리먼트를 반환하므로 유효한 리액트 컴포넌트다. 이런 컴포넌트는 자바스크립트 함수기 때문에 말 그대로 "함수 컴포넌트" 라고 호칭한다. 또한 ES6 Class를 써서 컴포넌트를 정의할 수 있다

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

리액트 관점에서 볼 때 두 가지 유형의 컴포넌트는 동일하다. class는 몇 가지 추가 기능이 있다. 그 때까지는 간결성을 위해 함수 컴포넌트를 사용한다. 함수 컴포넌트, 클래스 컴포넌트 둘 다 몇 가지 추가기능이 있다

 

화면을 재사용할 수 있게 여러 조각으로 나눈 걸 컴포넌트라고 하는 듯하다. 컴포넌트를 설명하는 다른 글도 찾아봤다.

 

https://www.geeksforgeeks.org/reactjs-components/

ReactJS Components - GeeksforGeeks

컴포넌트는 리액트의 핵심 빌딩 블록 중 하나다. 즉 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성된다. 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만든다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합 가능하다. 아래 이미지는 GeeksforGeeks 홈페이지의 UI를 개별 컴포넌트로 세분화한 것이다

상단의 Google 맞춤 검색, 탐색 모음(navigation bar), 사이드바, 기사 또는 게시물 목록도 개별 컴포넌트로 볼 수 있고 마지막으로 모든 항목을 병합할 수 있다. 이런 개별 컴포넌트를 써서 홈페이지의 최종 UI가 될 상위 컴포넌트를 만든다. 리액트 컴포넌트는 기본적으로 화면에 뭘 렌더링해야 하는지(=그려야 하는지) 알려주는 JSX 코드를 반환한다. 리액트에는 주로 2가지 유형의 컴포넌트가 있다

1. 함수 컴포넌트 : 함수 컴포넌트는 단순한 JS 함수다. JS 함수를 작성해서 리액트에서 기능적 컴포넌트를 만들 수 있다. 이런 함수는 데이터를 매개변수로 받을 수도 있고 안 받을 수도 있다. 아래 예제는 리액트의 유효한 기능 컴포넌트를 보여준다

const Democomponent = () => {
    return <h1>Welcome Message!</h1>;
}

2. 클래스 컴포넌트 : 클래스 컴포넌트는 함수 컴포넌트보다 약간 더 복잡하다. 함수 컴포넌트는 프로그램의 다른 컴포넌트를 인식하지 못하지만 클래스 컴포넌트는 서로 작동할 수 있다. 한 클래스 컴포넌트에서 다른 클래스 컴포넌트로 데이터를 전달할 수 있다. JS ES6 Class를 써서 리액트에서 클래스 기반 컴포넌트를 만들 수 있다. 아래 예제는 리액트의 유효한 클래스 기반 컴포넌트를 보여준다

class Democomponent extends React.Component {
    render() {
          return <h1>Welcome Message!</h1>;
    }
}

위의 두 예제에서 만든 컴포넌트는 동일하며 함수 컴포넌트와 클래스 컴포넌트의 기본적 차이점도 언급했다. 지금은 컴포넌트가 다른 컴포넌트와 상호작용하거나 작업할 필요가 없다고 확신할 경우에만 함수 컴포넌트를 사용한다는 걸 명심하라. 즉, 이런 컴포넌트는 다른 컴포넌트의 데이터가 불필요하지만 단일 함수 컴포넌트 아래에 여러 함수 컴포넌트를 구성할 수 있다
이 목적을 위해 클래스 기반 컴포넌트를 사용할 수도 있지만 필요 없이 클래스 기반 컴포넌트를 사용하면 애플리케이션이 비효율적이므로 권장하지 않는다

 

https://medium.com/the-andela-way/understanding-react-components-37f841c1f3bb

Understanding React Components

컴포넌트는 모든 리액트 앱의 빌딩 블록이며 일반적인 리액트 앱에는 이런 요소가 많이 있다. 간단히 말해서 컴포넌트는 선택적으로 속성(props) 같은 입력을 수락하고 UI 섹션이 표시되는 방식을 설명하는 리액트 요소를 반환하는 자바스크립트 클래스 or 함수다.

 

보아하니 리액트의 컴포넌트는 함수, 클래스 2개가 있는 것 같다. 그럼 각각의 장단점은 무엇이고 언제 어떤 걸 쓰면 좋을까?

 

https://betterprogramming.pub/pros-cons-of-functional-components-in-react-f52bded98db0

The Pros and Cons of Functional Components in React

<2020.07.07에 작성된 글이란 걸 참고하자>

함수형 컴포넌트의 장점

1. 테스트하기 쉬움 : 숨겨진 상태(hidden state)에 대해 걱정할 필요가 없고 함수형 컴포넌트와 관련해 부작용이 많지 않기 때문에, 모든 입력에 대해 함수는 정확히 하나의 출력을 가진다
2. 읽고 쓰기 쉬움 : 구문(Syntax)은 클래스 컴포넌트보다 덜 복잡하고 이미 함수형 컴포넌트로 할 수 없는 일을 알기 때문에 읽기가 더 쉽다. prop destructuring을 쓰면 진행 상황, 컴포넌트에서 나오는 내용을 확인하는 데 유용하다
3. 디버그하기 쉬움 : 함수형 컴포넌트는 제공된 props에 의존하고 상태에 응답하지 않는다. 진행 중인 변경사항을 지속적으로 이해하기 위한 상태를 console.log()할 이유가 없다

함수형 컴포넌트의 단점

1. 새 구문(Syntax) 재학습 : 구문은 언뜻 보기엔 이상할 수 있고 클래스 컴포넌트가 존재한 기간이 길기 때문에 이해하기 어려울 수 있다. 클래스에서 렌더링 함수를 선언한다. 함수를 쓰면 그렇지 않다. 클래스에서 props를 전달하기 위해 컴포넌트에 클래스 속성으로 보내거나, 컴포넌트 아래에 기본 props를 선언할 수 있다. 대조적으로 함수형 컴포넌트는 props를 인수로 보낸다. 이 차이점은 다른 개발자가 이런 방식으로 앱을 작성하는 데 익숙하지 않은 경우 이해하기 어려울 수 있다
2. 성능 최적화 : 어떤 컴포넌트가 성능 면에서 더 도움이 되는지 면에서 실제로 차이가 없다. 그러나 함수형 컴포넌트는 shouldComponentUpdate 및 PureComponent와 같은 메서드에 접근할 수 없으므로, 성능을 위해 최적화하는 게 약간 불편할 수 있다

 

https://medium.com/swlh/react-functional-vs-class-components-517be1d9ff13

React Functional vs. Class Components

<2021.01.21에 작성된 글이란 걸 참고하자>

(중략)...둘 다 장단점이 있지만 몇 가지 이유 때문에 함수형 컴포넌트가 더 인기를 얻고 있다

1. 과거엔 생명주기 메서드, 상태를 사용할 수 없었기 때문에 함수형 컴포넌트가 제한적이었다. Hooks가 도입된 이후로 클래스형 컴포넌트에서 할 수 있는 함수형 컴포넌트를 사용해서 무엇이든 달성할 수 있다
2. 리액트 팀은 함수형 컴포넌트에 대해 향후 성능 최적화가 있을 수 있다고 언급했다
3. 함수형 컴포넌트는 종종 더 깨끗하고 간결해서 더 읽기 쉽고 테스트 가능한 코드로 이어진다

 

각 컴포넌트의 장단점이야 써보면서 느끼면 되는 거지만 리액트를 써보기 전 간단하게 확인한 결과 위와 같다.

정리하면 컴포넌트란 아래와 같다고 할 수 있겠다. 자세한 내용은 리액트를 공부하면서 알아가야겠다.

 

• 컴포넌트는 리액트 앱을 구성하는 아주 작은 구성요소다
• 컴포넌트의 종류는 함수 컴포넌트, 클래스 컴포넌트 2개가 있다

 

그럼 컴포넌트를 간단하게 만들어보자. 웹 페이지에서 흔히 볼 수 있는 header, body, footer의 샌드위치 구조를 리액트로 만들어본다. src 폴더 안에 3개의 js 파일을 만들고 이름을 각각 HeaderComponent, BodyComponent, FooterComponent로 지었다. 소스코드를 보면 각 소스코드가 어떤 파일 내용인지 알 수 있을 것이다.

 

function createHeader() {
    return (
        <div>
            <header>
                header 부분
            </header>
        </div>
    );
}

export default createHeader;

function createBody() {
    return (
        <div>
            <header>
                <h1>본문 부분!!</h1>
            </header>
        </div>
    );
}

export default createBody;

function createFooter() {
    return (
        <div>
            <header>
                footer 부분
            </header>
        </div>
    );
}

export default createFooter;

 

각 파일을 만들었다면 App.js(=App 컴포넌트)에서 하나로 합친다. 위에서 만든 파일들은 App.js 최상단에 import 구문으로 불러와야지만 사용할 수 있다는 걸 잊지 말자.

 

import HeaderComponent from "./HeaderComponent";
import BodyComponent from "./BodyComponent";
import FooterComponent from "./FooterComponent";

const App = () => {
  return (
    <div>
      <HeaderComponent/>
      <BodyComponent/>
      <FooterComponent/>
    </div>
  );
};

export default App;

 

이렇게 하고 저장하면 웹 브라우저에 이렇게 표시된다.

 

 

아직 HTML부터 시작해서 리액트라는 걸 알아가는 단계기 때문에 아주 간단한 컴포넌트를 만들고 테스트해봤다.