[React] props 이해하기

목표: 글 제목을 누르면 각각의 제목이 모달창에 보이도록 코딩하기

 

동적인 UI를 만드는 스텝을 따라서 한다.

1. html/css로 미리 디자인 완성

2. UI의 현재 상태를 state에 저장

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

 

1. html/css로 미리 디자인 완성

이미 되어있음

 

2. UI의 현재 상태를 state에 저장

- 나는 글제목을 눌렀을때 글제목의 순서를 입력받아 모달창을 띄워주는 기능을 구현하려한다.

- 따라서 글제목의 순서 숫자가 state에 저장되도록 해야하고 초기값을 0으로 둔다.

//useState를 생성하고 초기값 0으로 설정
let [idx, setIdx] = useState(0);

 

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

return (
    <div className="App">
      <div className="black-nav">
        <div>Jonny&Jayne Blog 🥰</div>
      </div>
      {
        title.map(function(a, i){ //map함수에서 반복횟수 숫자 i를 받아서
          return (
            <div className="list" key={i}>
            //클릭할때마다 idx를 숫자 i로 변경한다
        <h3 onClick={ () => { setModal(true); setIdx(i)} }> { title[i] } <span onClick={ () => add1Like(i) }>👍</span> { like[i] } </h3> 
        <p>7월 13일 발행</p> 
      <hr/>
      </div>
          )
        })
      }
    {  //모달 컴포넌트의 파라미터로 idx를 받는다. 이걸 props라고 부른다.
        modal == true ? <Modal idx={idx} title={title} changeTitle={changeTitle} setModal={setModal}/> : null
      }
      
    </div>
  );

부모 컴포넌트 App에서 선언한 state변수는 자식 컴포넌트인 Modal에서 사용할 수 없기때문에, 파라미터를 통해 넘겨줘야하는데, 이 파라미터를 props라고 부른다.

 

//모달 컴포넌트의 파라미터를 props라고 작명하고
function Modal(props) { 
  return (
      <div className='modal'>
      //props.idx의 형태로 받아온다.
          <h2>{ props.title[props.idx] }</h2>
          
          <p>날짜</p>
          <p>상세내용</p>
          <button onClick={ ()=> {props.changeTitle()} }>글수정</button>
          <button onClick={ ()=> {props.setModal(false)}}>닫기</button>
        </div>
    
  )
}

 

전체 소스코드

/* eslint-disable */

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

function App() {


  let [title, setTitle] = useState([
    '남자 코트 추천',
    'FC서울 직관 후기',
    '바버 레인부츠 후기, 추천!!']);
  
  let [idx, setIdx] = useState(0);
  let [like, setLike] = useState(title.map(function(a){return 0}));

  function add1Like(idx) {
    let copyLike = [...like]
    copyLike[idx] += 1
    setLike(copyLike)
  }

  function changeTitle() {
    let copyTitle = [...title]
    copyTitle[0] = '여자 코트 추천'
    setTitle(copyTitle)
  }

  let [modal, setModal] = useState(false); //현재 상태는 false -> 닫힌상태

  return (
    <div className="App">
      <div className="black-nav">
        <div>Jonny&Jayne Blog 🥰</div>
      </div>
      {
        title.map(function(a, i){
          return (
            <div className="list" key={i}>
        <h3 onClick={ () => { setModal(true); setIdx(i)} }> { title[i] } <span onClick={ () => add1Like(i) }>👍</span> { like[i] } </h3> 
        <p>7월 13일 발행</p> 
      <hr/>
      </div>
          )
        })
      }
    {
        modal == true ? <Modal idx={idx} title={title} changeTitle={changeTitle} setModal={setModal}/> : null
      }
      
    </div>
  );
}

function Modal(props) { 
  return (
      <div className='modal'>
          <h2>{ props.title[props.idx] }</h2>
          
          <p>날짜</p>
          <p>상세내용</p>
          <button onClick={ ()=> {props.changeTitle()} }>글수정</button>
          <button onClick={ ()=> {props.setModal(false)}}>닫기</button>
        </div>
    
  )
}

export default App;