[React] 5. Component(컴포넌트)

지금까지 만들었던 페이지 하단에 페이지 상세정보를 만들어보자

.
.
.
 <h3>{글제목[2]}</h3>
        <p>1월 21일 발행</p>
        <hr />
      </div>

      <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세 내용</p>
      </div>

/*css*/
.modal{
  padding: 20px;
  background: #eee;
  margin-top: 20px;
}

주의할점 : return 태그 안에 태그 여러개 불가능!! 꼭 하나의 태그 안에서 이루어 져야함(하나의 div태그 안에서만 가능)

return ( //옳은 예
<div>....</div>

return ( //이거 안됌
<div>...</div>
<div>...</div>
<div>...</div>

하지만 태그가 너무 많다면 꼴뵈기 싫을거임 이때 쓸 수있는 리액트의 Component 문법 -> html을 한 단어로 줄여서 쓸수있다!!!!!

컴포넌트 만들기

1. App() 바깥(App도 일종의 컴포넌트)에다 함수 만들듯이 함수 선언해주기
   (웬만하면 대문자로 시작하자)
2. 축약을 원하는 HTML 작성
3. 원하는 곳에서 <컴포넌트 이름/> 선언

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

.
.
.
<h3>{글제목[2]}</h3>
        <p>1월 21일 발행</p>
        <hr />
      </div>

      <Modal /> //컴포넌트 넣어줌
    </div>
  );
}

동일하게 작동한다ㅎㅎ

어떤걸 컴포넌트로 만들면 좋을까
-반복으로 나오는 HTML 덩어리들
-자주 변경되는 HTML UI들

이제 글제목을 누르면 modal 창이 뜨도록 해보자

리액트에서 ui를 만들때 state 데이터 이용

state 하나 만들기
(모달창을 켜고 닫는 일종의 스위치라고 볼수 있음)

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

우리가 만든 state가 false값을 가지기 때문에 if문 else문으로 제어해주면 어떨까
이때 if-else문 대신 주로 쓰는게 삼항연산자

{modal === true ? <Modal /> : null}

방금 만든 modal이라는 스위치(state)가 true값을 가지면 직전에 만들어놓은 컴포넌트를 보여주고 false값을 가지면 빈 html을 보여달라는 의미

앱 실행시 현재 modal값이 false를 가지므로 null값(빈 html)을 가져오게 된다

이제 '부평 마라탕 맛집' 제목을 눌러 modal창을 띄우고 싶다면 onclick 이벤트와 state를 적절히 사용하면 될거같다!!!!!

<h3
          onClick={() => {
            setModal(true);
          }}
        >
          {글제목[2]}
        </h3>

제목 클릭시 직전에 만든 modal state변경 함수에게 state값을 true값으로 바꾼다 요청, 삼항연산자 조건에 의해 Modal 컴포넌트가 나올것임!!!!!

클릭했더니 잘나온다ㅎㅎ

버튼을 하나 만들고 버튼을 눌렀을때 모달창이 보이고 다시 버튼을 눌렀을때 사라지게 하고싶다면?

<button
        onClick={() => {
          modal === true ? setModal(false) : setModal(true);
        }}
      >

버튼을 하나 만들어주고 onClick 옵션을 주자

(클릭시 modal state값이 true이면 state값을 false로, false이면 true로 바꿔줌)

따라서 버튼을 누를때마다 state값이 바뀔것임

<button
        onClick={() => {
          modal === true ? setModal(false) : setModal(true);
        }}
      >
        버튼
      </button>
      {modal === true ? <Modal /> : null}

다음으로 modal값이 true이면 Modal 컴포넌트를 출력해주고 false라면 null값을 출력 하는 삼항 연산자 작성

버튼을 누를때마다 state값이 바뀌기 때문에 Modal컴포넌트도 true, false값에 따라 출력될것이다!!!!

굳ㅎㅎ

다른 방법

<button
        onClick={() => {
          setModal(!modal);
        }}

        버튼
      </button>

클릭할때마다 느낌표 연산에 의해 modal값을 반대로 바꿔준다(true이면 false로, false이면 true로)

출처 : https://codingapple.com/ (코딩애플님 리액트 강의)