[React] Component 개념

Component

✨ 리액트로 만들어진 앱을 이루는 최소한의 단위. 기존의 웹 프레임워크는 MVC방식으로 분리하여 각 요소의 의존성이 높아 재활용이 어렵운 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있는 장점이 있다.

특징

• 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 View를 제공.
• 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node 를 출력하는 함수이다.
• UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.
• “props”라고 하는 임의의 데이터를 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

적용

function App (){
  return (
    <div>
      (생략)
      <Nav></Nav>
    </div>
  )
}

function Nav(){
  return (
    <>
      <div className="nav">
        <h4>블로그 제목</h4>
      </div>
    </>
  )
}

이와같이 HTML을 한 단어로 줄일 수 있어 코드가 정리되어 보인다. 적용방법은,

• function을 이용해서 함수를 하나 만들어주고 작명한다.
• 그 함수 안에 return () 안에 축약을 원하는 HTML을 담는다.
• 원하는 부분에 <함수명></함수명> 사용하면 축약한 HTML이 출력된다.

const Nav = () => {
  let post = "블로그 제목";
  return (
    <div className='nav'>
      <h4>{post}</h4>
    </div>
  )
}

✅ 함수에 넣어 만들수도 있으며, <컴포넌트></컴포넌트> 쓰거나 <컴포넌트/>로도 쓸 수 있다.

적용시 주의사항

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다. (리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 취급하기 때문)
• return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.
• function App(){} 내부에서 만들면 안된다. (App도 컴포먼트이기 때문)
• 컴포넌트를 너무 남발하면 관리가 힘들기 때문에(변수 전달 등) 필요한 곳만 사용한다.

적용 기준

• 사이트에 반복해서 출현하거나 내용이 자주 변경되는 컨텐츠.
• 서브 페이지
• 팀원과 협업할 때 Component 단위로 나눠서 작업을 분배하기도 한다.