리엑트 블로그 틀제작 컴포넌트 및 모달 제작 (4)

 오늘은 블로그 컴포넌트를 만들어보겠다. 

컴포넌트 만드는 방법은 다음과 같다. 

 

1. function을 만들고

2. return()에 html을 써준다.

3. <함수명> </함수명> 을 써주면 끝난다. 

 

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

이런 모달을 하나 만들었다.

 

      {
        // 조건식 ? 참일때 실행할 코드 : 거짓일 떄 실행할 코드 
        modal == true ? <Modal/> : null
      }

모달같은경우에는 평소에 안보여야 하니 

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

이런식으로 스테이터스를 만들어준다. 

 

리엑트를 공부할때 느꼇지만 신기했다. 

나는 제이쿼리로 HTML ID나 CLASS를 지목하고

display = none이나 

제이쿼리 hide() , show()

이런식으로 했는데 리엑트에서는 이런식으로 스위치 식으로 해야한다고 한다. 

 

파이선 독학 및 제목을 누르면

이렇게 나온다 !