컴포넌트

리액트는에서 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법

컴포넌트 만드는 법.

1. function 만들기
   • 다른 function 밖에 만들기
   • 첫글자 대문자로 만들기
2. return()안에 html 담기
3. <함수명></함수명>쓰기

.
.
.

      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <Modal/>
    </div>
  );
}

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

그래서 컴포넌트 언제 쓰나요

1. 반복적으로 출현하는 html. 코드재사용성 증가.
2. 큰 페이지들에서. 큰 페이지를 여러 작은 컴포넌트로 나누어 동작하게 하는게 좋다는 것 같은데, 아직 뭔소린지 모르겠음.
3. 자주 변경되는 html ui들. 성능상 좋을수 있다는데 이것도 아직 뭔소린지 모르겠음.

너무 남발하면 안됨

다른 함수에서 정의한 변수(state등)를 가져다 쓰기 불편함.
값을 넘기거나 하는 방법이 있다는데, 아직은 잘 모르겠음.
일단 너무 많이 만들지 말고, 반복적으로 사용하는 html을 템플릿처럼 만들어 쓰면 좋을듯 함.