React기초 정리

안녕하세요. youngKoala입니다.

오늘은 1편에 이어 modal창을 중점적으로 다루어보려고 합니다.

• 수도의 이름을 누르면 아래에 해당 수도의 이름이 표시되는 보라색 modal창이 열린다.
• x 표시를 눌렀을 때 모달창이 닫힌다.
• 날짜와 상세 내용이 useState에 의해 관리된다.

 

1. 길지 않으니 컴포넌트 전체 코드를 보여드리고 설명하겠습니다. 

(CSS스타일을 위한 className은 어지러우니 여기서는 생략하겠습니다.)

//부모 컴포넌트(App.js)에서 Modal컴포넌트 실행에 관한 부분
//popModal값이 true인 경우에만 Modal창을 띄우겠다.
{popModal ? <Modal list={list} num={number} setPopModal={setPopModal}/> : null}

import React, { useState } from 'react';
import './App.css';

 //props의 type정의
  type Props = {
    list: listType;
    num: number;
    setPopModal: true;
  };


const Modal = ({list, num, setPopModal}:Props):JSX.Element => {

    //날짜 데이터를 저장하는 state
    const [nowDate, setNowDate] = useState<Date>();
    //상세내용 데이터를 저장하는 state
    const [content, setContent] = useState<string>('');
    
    //modal창을 닫는 함수
    const closeModal = ():void => {
      setPopModal(false);
    }
    
    //상세내용에 입력된 내용을 content state에 저장하는 함수
    const handleContent = (e:React.MouseEvent<HTMLDivElement>):void => {
      setContent(e.target.value);
    }
    
    //날짜를 nowDate state에 저장하는 함수
    const handleDate = ():void => {
      const fixedDate:Date = document.getElementById('now_date').valueAsDate ;
      setNowDate(fixedDate);
    }
    
    return(
      <>
        <div>
          <div>
            <button onClick={closeModal}>x</button>
          </div>
          <p>{list[num].text}</p>
          <div>
            <span>날짜 :</span>
            <input type='date' id="now_date" onChange={handleDate}></input>
          </div>
          <div>
            <p>상세 내용 : </p>
            <textarea onChange={(e) => handleContent(e)}/>
          </div>
          <div>
          </div>
        </div>
      </>
     )
   }
    
   export default Modal;

 

2)  props destructuring

modal창을 구현한 이유는 props를 부모컴포넌트(App.js)로부터 어떻게 받고 어떻게 그 값들을 쓰는지에 대해서 보여드리고 싶어서인데요. props(properties)란 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주는 객체입니다.

여기서는 props를 destructuring을 하고 있습니다. 쉽게 말해서 props라고 뭉뚱그려 데이터를 받아오는 게 아니라, 어떤 데이터가 들어오는지를 한 눈에 알 수 있게끔 구조 분해 할당을 하고 있어요. 

이렇게 props라고 받아 온 데이터는 'props.데이터명' 이런 형식으로 쓰여야 합니다. 

const Modal = ({list, number, setPopModal}:Props):JSX.Element => {

//현재 코드(destructuring을 이미 한 데이터를 쓸 때)
 <p> {list[num].title} </p>

const Modal = (props:Props):JSX.Element => {

//데이터를 props라고 받아올 때의 코드(destructuring을 하지 않은 데이터를 쓸 때)
 <p> {props.list[props.num].title} </p>

destructuring을 통해 받아온 데이터가 훨씬 더 데이터를 한 눈에 볼 수 있으므로 현업에서는 대부분 이 방식을 이용해 코드를 쓰고 있습니다.

 

 

3) 그리고 한 가지 더!

const fixedDate:Date = document.getElementById('now_date').valueAsDate ;

이 부분은 id값이 now_date라고 쓰인 곳의 값을 날짜 형식으로 가져와 fixedDate에 담겠다는 코드입니다.

 

이렇게 Modal 컴포넌트 구현까지 포스팅을 해보았습니다.

공부에 도움이 되셨으면 합니다. 앞으로 계속해서 React에 관한 포스팅을 해보려고 합니다.

읽어주셔서 감사합니다.