React - Component

리액트에는 Component 라는 개념이 있습니다. 복잡한 HTML(JSX)을 간단하게 한 단어로 치환해서 사용하는 개념입니다. 이에 대해 공부해보겠습니다.

 

function App() {
  return (
    <div className="App">
      <div className="modal">
        <h2> Title </h2>
        <p> Date </p>
        <p> Content </p>
      </div>
    </div>  
  )
}

 

modal이라는 UI를 만들기 위해 JSX를 작성했습니다. 그런데 이렇게 만드는 것은 조금 비효율적입니다. 쓸 때마다 저 코드를 반복해서 적어야 하므로 코드가 길어지기 때문입니다. 이를 보완하기 위해 컴포넌트를 사용해보겠습니다.

 

function App() {
  return (
    <div className="App">
      <Modal />
    </div>  
  )
}

function Modal() {
  return (
      <div className="modal">
        <h2> Title </h2>
        <p> Date </p>
        <p> Content </p>
      </div>
    )
 }

 

컴포넌트는 함수 형식으로 만듭니다. 그리고 return ( ) 소괄호 안에 자신이 적고 싶은 JSX를 적어주면 됩니다. 이 때 주의할 점이 있습니다.

 

• 함수의 이름은 반드시 대문자로 시작해야 합니다. 
• return ( ) 소괄호 안에는 HTML 태그가 여러개 병렬적으로 올 수 없습니다. 여러 개의 태그를 사용하고 싶다면 <div></div>로 묶어줘야 합니다.

//이렇게는 안 됩니다.

function Component() {
  return (
    <div></div>
    <h2></h2>
  )
}

//이렇게 하셔야 합니다.

function Component() {
  return (
    <div>
      <div></div>
      <h2></h2>
    </div>  
  )
}

 

이렇게 컴포넌트를 만들어 주면 이제 Modal 컴포넌트는 원하는데 아무데나 갖다가 쓸 수 있습니다. <Modal /> 이렇게만 입력해주면 됩니다. 훨씬 직관적으로 코드의 의미를 이해할 수 있습니다. 

 

 

그러면 컴포넌트는 주로 언제 사용할까요? 정해진 기준은 없지만 다음과 같은 경우에 주로 컴포넌트화 해서 많이 만들어 놓습니다.

 

• 사이트에 반복적으로 출현하는 HTML 덩어리
• 내용이 자주 변경될 것 같은 HTML 부분
• 다른 페이지를 만들고 싶을 때 그 페이지의 내용
• 팀원과 협업할 때 웹 페이지를 컴포넌트 단위로 쪼개서 협업하기도 합니다.

절대적인 것은 아니니 참고하면 좋을 것 같습니다.

 

 

다만 컴포넌트를 이렇게 만들어 놓으면 단점이 있습니다. 

 

• 컴포넌트를 여러 개 만들어 놓으면 관리하기가 힘들어 질 수 있습니다.
• 컴포넌트가 다른 컴포넌트 안에 있는 state를 사용하고 싶을 때 바로 사용할 수가 없습니다. (props 문법이 필요합니다)