#props #부모 state 갖다 쓰기

 

모달창에 글제목 title state 가져다 쓰고 싶음.

but 다른 함수 이기에 갖다 쓸수 없음  = state 문법 쓰기

 

부모-> 자식에게 state 전송하는 방법

 

1. 부모컴포넌트

 <Modal 작명={state 이름}/>
 
 // 문자로 보내고 싶음 작면 = "문자"

 

2. 자식컴포넌트

-props 파라미터 등록 후 props. 사용

function Modal(props) {
  return (
    <div className='modal'>
      <h4>{props.작명[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

props 전송은 부모에서 자식만 가능

<자식 to 부모 > <자식 to 자식 > x 

 

 

// state 는 사용하는 컴포넌트들 중 최상위에 만드셈

 

완성 코드

/* eslint-disable */
import './App.css';
import { useState } from 'react';

function App() {

  let [title, titleFunction] = useState(['ㄷ일식 맛집 추천', 'ㄱ양식 맛집 추천', 'ㄴ중식 맛집 추천']);
  let [like, likeFunction] = useState([0, 0, 0]);
  let logo = 'ReactBlog';
  // false : 안보이는 상태, true : 보이는 상태 ~ 자유롭게 작성가능
  let [modal, setModal] = useState(false);
  let [titleNum, setTitleNum] = useState(2);

  [1, 2, 3].map(function (a) {
    return '1123'
  })

  return (

    <div className="App">
      <div className="black-nav">
        <h4 U>{logo}</h4>
      </div>

      <button onClick={() => {
        let copy = [...title];
        copy[0] = '한식 맛집 추천';
        titleFunction(copy);
      }}>변경버튼</button>

      <button onClick={() => {
        let copy = [...title];
        copy.sort();
        titleFunction(copy)
      }}>정렬버튼</button>

      { // state 개수만큼 생성 
        // map 함수 안의 파라미터는 2개까지 
        title.map((a, i) => {
          return (
            <div className="list">
              <h4
                onClick={() => {
                  // 토글기능
                  setModal(!modal);
                  setTitleNum(i);
                }}
              >
                {title[i]}
                <span onClick={() => {
                  let copy = [...like];
                  copy[i] = copy[i] + 1;
                  likeFunction(copy)
                }}> 👍 </span>
                {like[i]}
              </h4>
              <p>2월 17일 발행</p>
            </div>)
        })
      }


      {  // App 내에서 js 사용불가  - 삼항연산자 사용
        modal == true ? <Modal title={title} titleFunction = {titleFunction} 
        titleNum={titleNum} /> : null
      }

    </div>
  );
}

function Modal(props) {
  return (
    <div className='modal'>
      <h4>{props.title[props.titleNum]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

export default App;