[React] Modal창 실습

만분의 일·2022년 7월 10일

JSX React component modal

React

목록 보기

4/5

Component : 많은 div들을 한 단어로 줄이고 싶을 때?

모달 component를 만들어서 상세 페이지 기능을 만들어보자

component를 만들어서 사용하면 div 덩어리들을 한 단어로 축약해서 사용할 수 있다.

컴포넌트를 만들어 사용하면 다른 사람이 봐도 이해하기 쉽다

// div modal을 컴포넌트로 만들어주자.
      <div className="modal">
        <h4>제목</h4>
        <h4>날짜</h4>
        <p>상세</p>
      </div>
    </div>

어떤 것을 컴포넌트로 만들면 좋을까?

사이트에 반복해서 출현하는 HTML 덩어리
다른 페이지를 만들고 싶다면, 그 페이지의 HTML 부분을 component로 만들면 좋다.
내용이 자주 변경되는 요소들

컴포넌트 만드는 법

function 만들고 (함수 이름은 대문자로시작해야함)
return()안에 html 담기
<함수명></함수명> 쓰기



<div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <Modal /> 	// 위의 코드의 modal div를 <Modal/>로 변경해주고. 
    </div>
  );
}

// 코드 중 function으로 시작하고 함수명이 대문자로 시작하면 컴포넌트라고 봐도 무방하다.
function Modal() {
  return (
    <>
      // <>는 JSX의 fragment문법으로 div들을 하나로 묶기 위해 사용
      // 리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트들을 반환한다. 리액트를 사용하기 위한 문법인 JSX 를 쓸 때, return 문 안에는 반드시 하나의 최상위 태그가 있어야 한다. 이는 리액트가 하나의 컴포넌트만을 리턴할 수 있기 때문이다.
      <div className="modal">
        <h4>제목</h4>
        <h4>날짜</h4>
        <p>상세</p>
      </div>
    </>
  );
}
      

// 컴포먼트 만드는 방법2
//  화살표 함수 사용해서 생성
let Modal =()=> {
	return (
		<div></div>
	)
}

🚨주의!🚨

Fragment 문법

return()안에 두개의 html태그를 나란히 사용하면 안된다.

retrun() 내부는 하나의 태그로 시작해서 하나의 태그로 시작해야한다.

따라서 < div > 2개를 나란히 적고 싶으면 하나의 < div >로 감싸거나

Fragment 문법 <> </>으로 감싸줘야한다.

// 이렇게 적으면 X
return(
	<div></div>
	<div></div>
)

// <div>로 감싸주거나 이렇게 fragment문법으로 감싸줘야한다.
<>
return(
	<div></div>
	<div></div>
)
</>

컴포넌트의 단점

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

아래의 코드에서 모달 컴포넌트의 제목의 state를

let [title, setTitle] = useState([ "남자 코트 추천", "강남 우동맛집", "파이썬 독학",]);으로 변경하려고 했는데,
변경 할 수 없다. 왜냐하면 title state는 다른 함수에 있기 때문이다.

A함수에 있던 변수는 B함수에서 사용할 수 없다.

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";

  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동맛집",
    "파이썬 독학",
  ]);
  let [like, likes] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <button
        onClick={() => {
          let ganada = [...title];
          ganada.sort();
          setTitle(ganada);
        }}
      >
        가나다순 정렬💛
      </button>
      <button
        onClick={() => {
          let copy = [...title];
          copy[0] = "여자 코트 추천";
          setTitle(copy);
        }}
      >
        정말정말 누르지마세요🚨
      </button>

      <div className="list">
        <h4>
          {/* eventhandler onclick. onClick={} 안엔 함수 이름을 담아야 한다. */}
          {title[0]}
          <span
            onClick={() => {
              likes(like + 1);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[1]}</h4>
        <h4>2월 17일 발행</h4>
      </div>
      <div className="list">
        <h4>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>

      <Modal />
    </div>
  );
}

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

동적인 UI 만드는법 (모달창)

위에서 만든 Modal 컴포넌트에 동적인 기능을 추가해보자.

동적인 UI 만드는 방법

html css로 미리 디자인 완성
UI의 현재 상태를 state로 저장
state에 따라 UI가 어떻게 보일지 작성

html css로 미리 디자인 완성

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

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

UI의 현재 상태를 state로 저장

let [modal, setModal] = useState(false); // 형식은 자유. 모달창 상태 표현만 가능하면 된다.

state에 따라 UI가 어떻게 보일지 작성

js의 if문,for문은 컴포넌트의 return()안, 즉 JSX 내에서는 사용할 수 없다.
삼항연산자를 사용해줘야함
```
```jsx
{
   modal == true ? <Modal /> : null //null은 비어있는 용으로 html에서 자주 사용
}
```
<br/>
```

제목 클릭시 모달창 띄우기? ⇒ 클릭시 state만 조절하면 된다.
하지만 아래와 같은 코드에선 state의 값이 변경되지 않는다.
왜냐하면 state의 값을 변경하려면 setState를 사용해야하는데 state값을 변경했기 때문이다.

<div className="list">
        <h4 onClick={()=>{modal=true }}>{title[2]}</h4> //state 값이 변경되지 않는다.
        <h4>2월 17일 발행</h4>
      </div>

      {
        modal == true ? <Modal /> : null //null은 비어있는 용으로 html에서 자주 사용
      }
    </div>

🚨state를 변경하려면 state의 변경 함수인 setState를 사용해야한다!!!🚨

<div className="list">
        <h4 onClick={() => {setModal(true);}}>{title[2]}</h4>
        <h4>2월 17일 발행</h4>
      </div>

Quiz. 글제목을 한번 더 누르면 모달창이 닫히는 기능 추가

내가 짠 코드

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

답안 코드

function App (){

  let [modal, setModal] = useState(false);
  return (
    <div>
      (생략)
      <button onClick={ ()=>{ setModal(!modal) } }> {글제목[0]} </button>
      { 
         modal == true ? <Modal></Modal> : null
      }
    </div>
  )
}