[React]Component

chxxrin·2022년 5월 20일
0

React

목록 보기
6/11

컴포넌트 만드는 법
1. function 만들고
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기 or <함수명 />

  • 다른 function의 바깥에 만들어야함
  • 영어는 대문자로 써야함
  • 한 return문 안에는 하나의 큰 부모 div만 있어야함 (자식div는 많아도 됨)
  • 의미없는
    대신 <></> 사용가능
function Modal() {
  return (
    <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

컴포넌트 만드는 문법2

const Modal = () => { } 

Q. 컴포넌트로 만들면 좋은 경우
1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

Q. 컴포넌트의 단점

  • state 가져다 쓸 때 문제가 생김 (A함수에 있던 변수는 B함수에서 마음대로 가져다 쓸 수 없기 때문에 ㅠㅠ)
  • 예를 들어서 반복되는 내용이 담긴 div가 여러개 있어서 이거를 component로 바꿔쓰고 싶다. 근데 그 함수에 있는 state들을 가져올 수 없기 때문에 문제가 생긴다. 그래서 앞서 ㅈ어의한 state를 안써도 되는 경우에 component를 사용하자!

컴포넌트는 const로 하는 것보다 function으로 만들자~~~

0개의 댓글