모달창과 컴포넌트 바로 쓰는 사용법 Modal and Component, React 기초

https://www.youtube.com/watch?v=uab4P-0Gpzk 

 

 

 

<Modal/>

import './App.css';

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

모달컴포넌트 코드와 css 코드 / import 잊지말기

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

 

---

import './App.css';

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

컴포넌트 만드는법

1. funcuton 만들고

2. return() 안에 html 넣고

3. <함수명><함수명/> === <함수명 />

 

 

꿀팁 

의미없는 <div>대신 <> </> 사용

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

    <div></div>

    </>
  )
}

 

함수아래 하나의 return만 가능하고 하나의 <div>만 가능하다

<div>를 중복으로 못쓰니 다같이 묶을때 쓰는 <div>를 쓰지말고 편하게 <>를 처음과 끝에  </> 묶어준다.

 

 

그럼 어떤걸 컴포넌트로 만들면 좋은가?

 

1. 반복적인 html 축약할 때

2. 큰 페이지들

3. 자주 변경되는 것들

 

단점

내가 B함수안에 있다면 state 가져갈 때 A함수 안에 있는 변수를 못가져옴

 

깔꼼했다