React 컴포넌트

huni_·2022년 7월 5일

React component 컴포넌트

React

목록 보기

18/57

컴포넌트란 UI 또는 기능을 부품화해서 재사용 가능하게 하는 것입니다.

아래 그림과 같이, 동일한 UI를 재활용하고, 안에 데이터와 이미지만 바꿔줍니다.

컴포넌트는 복사/붙여넣기와는 다릅니다.

아래의 복사/붙여넣기 코드에서 모든 UI를 노란색으로 변경하려면 코드를 하나하나 수정해야합니다.

하지만, 컴포넌트는 원본 하나를 만들어서 뿌려주는 개념입니다.

따라서, 원본만 변경하면 모두 적용됩니다.

데이터는 각 컴포넌트에 맞게 변경하여 사용 가능합니다.

클래스형 컴포넌트 vs 함수형 컴포넌트

React에서 컴포넌트 작성 방법은 2가지가 있습니다.

함수형이 훨씬 간단해 보입니다. 함수형은 화살표함수로도 적용 가능합니다.

💡 실무적용 - { 클래스형, 함수형 } 언제 사용하나요?
React는 처음에 클래스형 방법만 존재했습니다.
하지만 클래스형은 어렵고, 복잡하여 이후에 함수형 컴포넌트 방법이 추가되었습니다.
최근에는 많은 기업이 함수형 컴포넌트를 주로 사용합니다.하지만, 기존에 이미 만들어진 서비스들은 클래스형으로 되어있는 경우도 많으므로, 클래스형도 알아둘 필요가 있습니다.

컴포넌트 재사용성

우리가 이전에 하나의 페이지를 컴포넌트로 나누어주는 장점이 뭐라고 했었나요?

컴포넌트로 나눠주면 다른 곳에서 재사용할 수 있다고 했었는데요.

이 부분에 대해서 직접 실습해보면서 배워보도록하겠습니다.

export / import, component, props, 삼항연산자 등의 개념을 사용하시면 어렵지 않게 하나의 컴포넌트를 재사용할 수 있습니다.

컴포넌트를 불러와서 사용해주기 위해 각각 등록페이지와, 등록페이지의 컴포넌트와 프레젠터를 만들어주었습니다.

//component-new page
import Component from "../../src/components/units/example/Component.container"

const ComponentNewPage=()=> {

  return(
    <Component />
  )
}

export default ComponentNewPage

// compoenet-new component
import ComponentUI from "./Component.presenter";

const Component = () => {
  return <ComponentUI />;
};

export default Component;

// component-new presenter
const ComponentUI = () => {
  return (
    <>
      <div>
        <h1>등록페이지</h1>
        제목 <input type="text" />
        <br />
        내용 <input type="text" />
        <br />
        <button>등록하기</button>
      </div>
    </>
  );
};

export default ComponentUI;

우리는 이 컴포넌트를 사용해서 등록하기 페이지를 수정하기 페이지로 보여주고 싶은데요

등록하기 페이지와 수정하기 페이지는 등록/수정만 다르기 때문에 어떤 조건을 준다면 바꿔줄 수 있을 것 같지 않나요?

그래서 우리는 수정하기 페이지를 만들어서 component를 불러와서 만들어보겠습니다.

//component-edit page
import Component from "../../src/components/units/example/Component.container"

const ComponentEditPage=()=> {

  return(
    <Component />
  )
}

export default ComponentEditPage

하지만 이렇게 컴포넌트를 그저 불러와주기만 한다면 등록하기 페이지와 똑같이 나오겠죠?

다르게 해주기 위해서 어떻게 해주어야할까요?

props와 삼항 연산자를 사용해주시면 가능합니다!

각각의 페이지에서 isEdit를 수정하기 페이지일 경우 true, 등록하기 페이지일 경우 false로 주고 이 불린값을 컴포넌트로 넘겨줍니다.

//component-new page
import Component from "../../src/components/units/example/Component.container"

const ComponentNewPage=()=> {

  return(
    <Component isEdit={false} />
  )
}

export default ComponentNewPage

//component-edit page
import Component from "../../src/components/units/example/Component.container"

const ComponentEditPage=()=> {

  return(
    <Component isEdit={true} />
  )
}

export default ComponentEditPage