• 긴 html,css를 한 단어로 치환해서 쓸 수 있는 문법

component 사용 법

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

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

▲ 이런식으로 쓰면 됨

1. function을 이용해 함수를 하나 만들고
2. 함수 안에 return()안에 축약을 원하는 html 담기 (여기서 return안에서는 하나의 태그로만 써야함. 두개 태그 사용불가)
3. 원하는 곳에서 <함수명></함수명>

Component 만들 때 주의점

1. component 작명할 땐 영어대문자로 보통 작명합니다.
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없습니다.
3. function App(){} 내부에서 만들면 안됩니다.
   왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이죠?
   component 안에 component 를 만들진 않습니다.
4. <컴포넌트></컴포넌트> 가능
   <컴포넌트/> 가능
   
   

arrow function 가능

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

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

이렇게 쓰는것도 가능

어떤 html들을 Component로 만드는게 좋을까?

• 사이트에 반복 풀현하는 html덩어리들
• 자주 변경되는 html부분
• 다른 페이지를 만들고 싶을 때 그 페이지의 html 내용을 하나의 component로 생성
• 다른 팀원과 협업할 때 웹페이지를 component단위로 나눠서 작업을 분배하기도 함

Component의 단점

• component를 너무 많이 만들게 되면 관리가 힘듦
• functon Modal 안에 글제목 state를 쓰고싶어 {글제목}이렇게 쓰면 안됨.
  왜냐면 js에서는 한 function안에 있는 변수를 다른 function에서 맘대로 쓸 수 없기때문.
• props라는 문법을 이용해 state를 <Modal>까지 전해줘야 사용이 가능함

# Summary

• 만들때는 function Component
  첫글자는 대문자
• 쓸때는 <Component></Component>