[React] Component(컴포넌트) 사용해보자

복잡한 HTML들을 한 단어로 치환할 수 있는 Component 문법

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.

Component라고 한다.

이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 삽입할 수 있다.

 

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

function Modal(){
  return (
    <div className="modal">
      <h2>제목</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

위 코드에서 Modal 함수가 Component(컴포넌트)이다.

 

위 코드처럼 하면 원하는 HTML을 한 단어로 줄일 수 있다.

줄이는 법은

1. function을 이용해서 함수를 하나 만들어주고

2. 그 함수 안에 return () 안에 원하는 HTML을 담으시면 된다.

3. 그럼 원하는 곳에서 <Modal></Modal> 이라고 사용했을 때 아까 축약한 HTML이 등장한다.

! 주의 return( ) 내에는 단하나의 <div></div> 태그사용할 수 있다.

이렇게 축약한 HTML 덩어리를 Component 라고 칭한다.

Component의 특징

1. Component 이름지으실 땐 영어대문자로 보통 시작한다.
2. return () 안엔 태그들이 평행하게 여러개 들어갈 수 없다. 평행하게 여러개의 태그를 쓰고 싶으면 <div>로 묶어야 한다.
3. 의미없는 div를 쓰기 싫으시면 <> </> 이걸로 태그없이 묶어도 상관없다.
4. 컴포넌트안에서 다른 컴포넌트를 사용할 수 있다.

어떤 HTML들을 Component 만드는게 좋을까

기준은 없다만 관습적으로 어떤 부분을 주로 Component화 하냐면

– 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.

– 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.

– 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만드는게 좋다. (그냥 좋을 뿐 필수는 아님)

– 또는 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 한다.