React 걸음마_ 컴포넌트만들기/모달창 구현하기

html이 길어져서 복잡할 땐 컴포넌트 만들어 사용하기

컴포넌트를 작성할 때는 약간의 규칙을 지켜야 한다

❗ 함수 작명은 대문자로 시작해야함

❗ retrun 안에 html은 하나의 태그로 감싸져야 함

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

원하는 위치에 태그형식으로 사용하면 됨~

<Modal></Modal>

컴포넌트는 언제 만들어 쓰면 좋을까?

1. 반복적인 html 축약할 때 ( ex. map함수 사용 가능한 것들..)

2. 큰 페이지들

😈  < 동적인 UI 만들기 > 😈

1. html 미리 완성하기

2. UI 현재상태 state로 저장

3. state에 따라 UI 변화주기 

=> 어렵게 생각하지말고 차근차근 step밟아나가자!

 

😈 모달창 구현하기

1. Modal 컴포넌트 만들기 

  const Modal = () => {
    return (
      <div className='modal-text'>
        <h5>제목</h5>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    )
  }

2.  UI 현재 상태 state에 저장 

let [modal, setModal] = useState(false);

3.  state에 따라 UI 변화주기 

<div className="list">
    <h5 onClick={()=>{setModal(true)}}>{title[2]}</h5>
    <p>10월 18일 발행</p>
</div>
  { modal == true ? <Modal></Modal> : null }

=> 삼항 연산자를 사용해서 true일경우 모달창이 뜨도록 함

삼항연산자 같은경우는 아래와 같이 쓸 수도 있음

{ modal && <Modal></Modal>  }

modal이 true면 <Modal> </Modal> 을 반환함