React Component

React 는 긴 HTML을 태그 하나에 넣어놓을 수 있는 문법을 제공하는데 이것을 Component 라고 부른다. 

이걸 이용하면 원하는 곳에  태그 한줄로 꽃아넣을 수 있다. 

 

//Component 구조 

function App (){
  return (
    <div>
      <Modal></Modal>   <-- Component
    </div>
  )
}

function Modal(){
  return (
    <div>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

Component 사용법

1. 함수를 하나 만든다.

 

2. 만든 함수의 return() 안에 넣고 싶은 HTML 을 담는다. 

 

3. 원하는 곳에서 <함수명></함수명> 을 사용하면 Component 의 내용이 들어간다.

 

 

Comoponent 사용시 주의사항

1. Component 작명할 땐 영어대문자로 보통 작명한다. 

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

     -> <div>HTML태그들</div> 이렇게 한 덩어리로 만들어서 넣어줘야한다. 

3. function App(){} 내부에서 만들면 안되고 밖에서 함수를 만들어야 한다.

     ->function App(){} 도 컴포넌트 생성문법이다. component 안에 component 를 만들지 않는다. 

4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 된다. 

 

5. arrow function 도 사용 가능하다. 

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

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