[React.js] props()에 대하여

 

❗ props( )란?

부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체.

 

✔ props( ) 사용방법

1. <자식 컴포넌트 변수명 = {state명}>

2. props 파라미터 등록 후 props.작명 사용

*파라미터 이름은 아무거나 상관 없음

  let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);

  return (
  <ModalUI modal_title = {제목1} /> //제목1 = 맛있는 우동
  )
  
  function ModalUI(props) {
  return (
    <div className='modal'>
      <h4>{props.modal_title[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

(참고1) props는 <Modal 이런거={이런거}  저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능하다.

(참고2) 꼭 state만 전송할 수 있는건 아니다. 

<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고 

<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 된다.

 

✔ props() 주의사항

1. 부모 -> 자식 가능

2. 자식 -> 부모 불가능

3. 자식1 <-> 자식2 불가능

 

✔ props() 응용

modal == true ? <ModalUI color = {'skyblue'} modal_title = {제목1} onClickEvent={changeTitle}/> : null


function ModalUI(props) {
  return (
    <div className='modal' style={{background : props.color}}>
      <h4>{props.modal_title[0]}</h4>
      <p>내용</p>
      <p>상세내용</p>
      <button onClick={props.onClickEvent}>글 수정 버튼</button>
    </div>
  )
}

props()를 사용하여 자식 컴포넌트의 style도 바꿀 수 있고 버튼에 함수 전달도 가능하다 ! 

 

✔ props() 예제

1. 0번 글을 누르면 0번 글제목이 모달창안에 등장

2. 1번 글을 누르면 1번 글제목이 모달창안에 등장

/* eslint-disable*/

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

function App() {

  let [title, settitle] = useState('부산 우동 맛집');
  let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);

  let [logo, setlogo] = useState('React Blog');

  let [like, setlike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);
  let [putindex, setputIndex] = useState(0)

  function likeBtn(i) {
    let copy = [...like];
    copy[i] = like[i] + 1;
    setlike(copy);
  }

  function changeTitle() {
    settitle("서울 우동 맛집")
    seoulNoddles()
  }

  function seoulNoddles() {
    let copy = [...제목1];
    copy = ["맛있는 서울 우동", "맛없는 서울 우동", "나쁘지않은 서울 우동"];
    제목1변경(copy);
  }

  function arraySort() {
    let array_sort = [...제목1].sort()
    제목1변경(array_sort)
  }

  function modalViewControl(index) {
    setputIndex(index)
    if (modal == true) {
      setModal(false)
    }
    else {
      setModal(true)
    }
  }

  return (
    <div className="App">
      <div className="black-nav">
        <h4>{logo}</h4>
      </div>
      <h3 style={{ color: 'black', fontSize: '56px' }} onClick={modalViewControl}>{title}</h3>

      <button style={{ marginBottom: "20px" }} onClick={changeTitle}>서울 우동 추천</button>
      <br></br>
      <button style={{ marginBottom: "20px" }} onClick={arraySort} >가나다순 정렬</button>

      {
        제목1.map(function (value, index) {
          return (
            <div className='list' key={index}>
              <h4 onClick={() => modalViewControl(index)}>{value}
                <span onClick={() => { likeBtn(index) }}> / 좋아요 👍</span> {like[index]}
                <p>2월 17일 발행</p>
              </h4>
            </div>
          )
        })
      }

      {
        modal == true ? <ModalUI title_rename={제목1변경} title={제목1[putindex]} color={'skyblue'} modal_title={제목1} content="HI" /> : null
      }

    </div>
  );
}

function ModalUI(props) {
  return (
    <div className='modal' style={{ background: props.color }}>
      <h4>{props.title}</h4>
      <p>{props.content}</p>
      <p>상세내용</p>
      <button onClick={() => props.title_rename(['수정된 맛있는 우동', '수정된 맛없는 우동', '수정된 나쁘지않은 우동'])}>글 수정 버튼</button>
    </div>
  )
}

export default App;

👍 풀이 

1. 필요 index를 받기위한 useState인 [putindex, setputIndex] 를 생성

2. map() 반복문 안에서 onClick 이벤트 시 클릭하는 리스트의 index값을 setputIndex(index)을 이용하여 담기

3. modal창을 띄우는 함수에 props()를 이용하여 index값을 전달받기

4. 끝