Component 문법

📌컴포넌트 만드는 3 STEP

• 함수 만들고 : 다른 함수 바깥에 만들어줘야함.
• return( )안에 html 담고
• <함수명></함수명> 쓰면 끝.

1. 함수 만들어서 return()안에 html 담기

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

2. <함수명></함수명> or <함수명/> 형식으로 써주면 끝!

1. <Modal></Modal>
2. </Modal>
// 원하는 위치에 이렇게 태그형식으로 쓰면 된다. 
// 둘 중에 원하는 방식으로 쓰면 된다. 

참고사항
=return()안에는 html을 병렬 형태로 기입할 수 없다.

function Modal() {
    return (
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
	  <div></div> // 이런식으로 div가 병렬이 되어있으면 안된다.
    );
  }

But! 어쩔 수 없이 병렬 기입을 해야하는 상황이라면 div를 추가해서 감싸주면 된다.

function Modal() {
    return (
	<div>
      	<div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      	</div>
		<div></div> 
	</div> 
      // 감싸준 div는 의미없는 div이므로 <></>로 감싸줘도 된다. 
    );
  }

<Component는 언제 쓸까?>

• 반복적인 html을 축약할 때
• 자주 변경되는 html UI에

<Component를 많이 쓰면 발생하는 단점>

• state를 가져다쓸 때 문제가 발생한다.

function App() {
  let [shoes] = useState(data);
  return (
  ~~~~~~~  
    <Card/>
  )
function Card() {
  return (
    ~~~
  );
}

shoes라는 state는 App이라는 함수에서 선언되었기 때문에 Card에 가져다쓸 때 오류가 발생할 수 있다. (물론 props 문법을 사용하면 가져다 쓸 수 있긴 하다)

출처. 코딩애플