리액트란 [클릭]

이전에 컴포넌트란 무엇인가? 그리고 컴포넌트의 두 종류에 대해 알아보았다. 그렇다면 두개의 컴포넌트중 어떤것이 더 많이 쓰일까? 아직 리액트 실무에 접해보지 못한 백엔드 개발자의 궁금증이였다.
그리고 그 밖에 생길 수 있는 의문들을 찾아보았다.

컴포넌트가 어쩌다 두가지 종류가 되었나?

결론부터 말하자면 React의 버전 업그레이드에 따른 발전이다.

React는 초기에 클래스형 컴포넌트를 주로 사용하였다. 그리고 React 16.8 버전부터 useState나 useEffect같은 React Hooks라는 새로운 기능이 추가되면서 함수형 컴포넌트에서 상태(state)와 라이프사이클 메서드를 다룰 수 있게 되었다.

라이프사이클 메서드란?
컴포넌트가 생성되고 소멸될 때 일어나는 일련의 이벤트이다.

실무에서는?

그렇다면 두개의 컴포넌트 중 어떤 컴포넌트가 실무에서 더 많이 쓰일까?
( 강의에서는 클래스형 컴포넌트를 더 많이 다루던데.. )

찾아보니 바로 답이 나왔다. 함수형 컴포넌트!
함수형 컴포넌트가 코드도 간결하고, 성능도 클래스형 컴포넌트에 비해 조금 더 빠르다고 한다. 코드량도 적어서 유지보수나 리팩토링도 유용해서 많이 쓴다고 한다. 아마 내가 보는 강의는 좀 예전 강의라서 클래스형 컴포넌트를 사용하나 싶다.

하지만, 클래스형 컴포넌트가 필요한 경우도 있다. 예를들어, 클래스형 컴포넌트에서 더 많은 setState 메서드와 라이프사이클 메서드를 사용하기 때문이다. 또한, 클래스형 컴포넌트는 더 많은 인스턴스 변수와 메서드를 정의할 수 있어서 일부 복잡한 로직을 처리하기에 더 적합하다고 한다.

컴포넌트 안에서 컴포넌트를?

컴포넌트 안에서 컴포넌트를? 물론 사용할수 있다. 이를 컴포넌트의 합성이라고 부른다.

하나의 화면을 구성하는 여러개의 UI 요소가 있을때 UI를 각각의 컴포넌트로 만들어서 사용하면 코드의 가독성이나 유지보수성이 용이해진다.

아래는 예시이다.

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

function Header() {
  return (
    <header>
      <h1>Header</h1>
      <Navigation />
    </header>
  );
}

function Navigation() {
  return (
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  );
}

function Main() {
  return (
    <main>
      <h2>Main</h2>
      <p>This is the main content of the page.</p>
    </main>
  );
}

function Footer() {
  return (
    <footer>
      <p>Footer</p>
    </footer>
  );
}

위 예시에서는 Header 컴포넌트 안에서 Navication 컴포넌트를 사용하고 있다.