06. Component 기본문법

본론

Component 생성

 

예를 들어 상세페이지를 나타내는 모달창을 하나 만든다고 가정했을 때, <div> 태그를 이용해 레이아웃을 설정해줄 수 있다. 그런데 이렇게 하나하나 레이아웃을 만들고 있다보면 반복되는 부분이나 불필요한 <div> 가 많이 필요한 것을 확인할 수 있다. 실제로 개발자도구를 이용해 html 문서를 확인해봤을 때 무수히 많은 div들과 복잡한 코드를 볼 수가 있는데 이러한 복잡한 html을 한 단어로 치환할 수 있는 것이 바로 Component이다.

 

<div className="list">
	<h4>{title[2]}</h4>
	<p>2월 17일 발행</p>
</div>

{/* 모달 상세페이지 컴포넌트 생성 */}
<div className='modal'>
	<h4>제목</h4>
	<p>내용</p>
	<p>상세내용</p>
</div>

{/* 한 단어로 치환 */}
<Modal></Modal>

 

실제로 모달 상세페이지를 만들기위한 기본적인 틀을 생성해준다면 저렇게 함수 안에 <div> 태그를 이용하여 줄줄이 작성해줬을 것이다. 글마다 상세페이지가 존재하므로 같은 코드를 반복해서 작성했을 텐데 그렇게하면 코드 길이도 굉장히 길어지고 복잡하고 깔끔하지 못하다. 그럴 때 Modal이라는 한 단어로 표현을 하게 되면 굉장히 깔끔하게 정리를 할 수 있다. 이를 제공해주는 문법이 Component 문법인데 저 <div> 태그 안에 들어있는 코드를 하나의 함수로 빼주고 <> 내부에 함수명을 입력해주면 된다.

 

function Modal() {
  return (
    <div className='modal'>
      <h4>제목</h4>
      <p>내용</p>
      <p>상세내용</p>
    </div>
  )
}

 

이런 식으로 하나의 함수를 별도로 만들어 내부에 컴포넌트로 만들고 싶은 부분을 넣어주기만 하면 된다. 그리고 내가 원하는 곳에 <함수명></함수명>으로 작성하거나 또는 </함수명>으로 깔끔하게 작성해줄 수도 있다. 

 

** 참고로 함수를 새로 하나 생성하는 것이므로 기존의 App () 함수 내부에 Component를 생성하는게 아니라 함수밖에 별도로 생성해줘야 한다.

 

** 또한 Component를 생성하는 또다른 방법이 있는데 변수를 하나 만들어서 화살표 함수를 써서도 생성할 수 있다.

let Modal = () => {
	return (
    	<div className = "modal">
        	<h4>제목</h4>
            <p>내용</p>
            <p>상세내용</p>
        </div>
    )
}

 

위 코드처럼 작성해주고 똑같이 </Modal>로 표기해주면 된다. component를 생성할 때는 let 대신 const 를 사용하는 경우도 있는데 변수 타입은 상황에 맞춰 사용해주면 될 것 같다.

 

 

Componet 이득일 때, 단점일 때

 

정해진건 따로 없지만 보통 반복적으로 출현하는 html 덩어리는 컴포넌트로 만들면 좋다.

또한 내용이 자주 변경될 것 같은 부분들, 다른 페이지를 만들고 싶을 때, 다른 팀원과 협업할 때 컴포넌트를 생성해서 진행하면 좋다.

 

그러나 주의해야할 때도 있는데 컴포넌트는 function을 이용해서 생성하므로 하나의 함수 내에서 생성할 수 없다. 다른 함수 내부에 있는 변수를 다른 함수에서 마음대로 쓸 수 없기 때문에 지역변수를 가지고 있는 부분은 다른 함수에서 가져와서 사용하기 쉽지 않다. 그럴려면 props를 이용해야하는데 귀찮을 수 있기 때문에 그럴 때는 컴포넌트를 생성하지 않고 사용하는 것도 하나의 방법이다.

 

 

정리

1. component 명을 적을 땐 영어대문자로 보통 작명

2. return () 안에 html 태그들이 평행하게 여러개 들어갈 수 없음

return (
	<div></div>
    <div></div>
)

이러한 경우는 사용할 수 없으므로 이럴땐 상위에 <div>를 하나더 감싸주거나 불필요한 div를 넣고싶지 않다 하면 <></>로 감싸도 무방!(fragment 문법)

3. function App(){} 내부에서 만들면 안됨 (App()도 컴포넌트 생성문법!🙊)

4. <컴포넌트></컴포넌트> 가능! </컴포넌트>도 가능!