[React] Component 문법

Component란?

-> React는 긴 HTML 태그들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다.

-> 모든 UI 요소를 컴포넌트(Component)로 구성합니다. 컴포넌트는 재사용 가능하고 독립적으로 동작하는 UI 요소를 나타냅니다. 여러 컴포넌트를 결합하여 복잡한 UI를 만들 수 있습니다. (ChatGPT)

 

예시

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

function Modal(){
  return ( <div></div> )
}

# 또는

const Modal = () => {
  return ( <div></div>) 
}

-> 만드는 법 : function을 이용해 함수를 하나 만들어주고 그 함수의 return ()안에 축약을 원하는 HTML을 담으면 된다. 화살표 함수 형태로 만들어도 된다.

 

Component 만들 때 주의점

• component 작명할 땐 영어대문자로 보통 작명한다.
• return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.
• function App(){} 내부에서 만들면 안된다. 
• 왜냐면 function App(){} 이것도 컴포넌트이기 때문, component 안에 component 를 만들진 않는다.
• <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다.