[React] Component 컴포넌트

Component

: 리액트가 제공하는 문법. 긴 HTML을 한 단어로 깔끔하게 바꿔서 넣을 수 있음

 

1. 만드는 방법

1. function 만들기 ❗ function App() {}; 밖에 만들어야함
2. return() 안에 HTML 담기 ❗ 병렬 금지
3.  <함수명></함수명> 쓰기 ✅ <함수명 /> 이렇게 써도 무관

function Modal(){ // Modal - 컴포넌트
  return(
    <div className='modal'>
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

컴포넌트를 만드는 방법2

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

 

• <div>를 굳이 병렬로 사용해야한다면? - 밖에 <div>로 감싸주기
• 의미 없는 <div>가 싫다면? - <Fragment> 사용하기

function Modal2(){
  return(
    <> {/* <- Fragment 단축 */}
      <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </>
  )
}

 

2. 컴포넌트 사용하기 좋을 때

1. 반복적인 HTML을 축약할 때
2. 페이지 전환을 할때 사용하는 큰 페이지들
3. 자주 변경되는 것들

 

 

3. 컴포넌트 단점

• state를 가져다 쓸 때 문제가 생김 ex) not defined... <- 변수의 범위가 함수라서 가져다 쓸 수 없음..