오늘의 React

1. Props

• modal 안에 다른 함수에 작성했던 state를 쓰고 싶은데? 모든 변수는 함수탈출 불가다.
• App 함수는 부모 Modal은 자식
• 이러면 자식이 부모가 가지고 있던 state 사용 가능하다.
• 부모 -> 자식 state 전송하는 법
  • <자식컴포넌트 작명={state이름}>
    • 작명이 귀찮으면 똑같은 이름을 쓰거라
  • props 파라미터를 자식 함수에 등록 후 props.작명 사용
• props 전송은 오로지 부모 -> 자식만 가능(자식-> 부모 (x) , 같은 자식끼리(x) 전송 안 됨)
• 파라미터 문법은 다양한 기능을 하는 함수를 만들 때 사용

let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);
// 배경색 바꾸고 싶을때  
{
     modal == true ? <Modal color={"yellow"} 메뉴={메뉴}/> : null
}

function Modal(props) {
  return (
    <div className="modal" style={{background: props.color}}>
      <h4>{props.메뉴[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
};

• 부모 state의 상태변경함수를 사용하는 법 

let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);
// 배경색 바꾸고 싶을때  
{
     modal == true ? <Modal 메뉴={메뉴} 메뉴변경={메뉴변경}/> : null
}

function Modal(props) {
  return (
    <div className="modal">
      <h4>{props.메뉴[0]}</h4>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={ () => {
        let copy = [...props.메뉴];
        copy[0] = "빵";
        props.메뉴변경(copy) 
        }} >
        글수정</button>
    </div>
  )
};

• 지금 누른 글 제목이 모달창 안에 뜨게 하려면?
  • 글제목 인덱스에 대한 상태를 추가하고
  • 글제목이 클릭될 때, 선택된 글제목 인덱스를 변경하는 함수를 호출하고 함수는 인자로 글제목의 인덱스를 받아 상태를 변경한다
  • 선택된 글제목 인덱스를 Modal 컴포넌트에 prop으로 전달하자.
  • Modal 컴포넌트에서 전달받은 prop을 사용하여 선택된 글제목 인덱스에 해당하는 글제목만 렌더링하자.
  • 하나의 state가 두 개의 컴포넌트 둘 다 사용된다면 그 중에서 부모 컴포넌트에 만들자.
    • 왜 오직 부모 => 자식 컴포넌트에만 props를 전달할 수 있다.

/* eslint-disable */

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

function App() {

  let [메뉴, 메뉴변경] = useState(["김밥", "라면", "떡볶이"]);

  let [modal, setModal] = useState(false);

  let [따봉, 따봉변경] = useState([0, 0, 0]);


  let [title, setIndex] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>blog</h4>
      </div>

      <button onClick={ () => {
        let copy = [...메뉴];
        copy[0] = "삥";
        메뉴변경(copy)} }>
          메뉴수정
      </button>



     {
      메뉴.map(function(a, i) {
        return (
          <div className="list" key={i}>
            <h4 onClick={() => {setModal(!modal); setIndex(i)}}> { 메뉴[i] } <span onClick={ () => {
              let copy = [...따봉];
              copy[i] = copy[i] + 1;
              따봉변경(copy);
             } }>👍</span> { 따봉[i] } </h4>
            <p>2월 17일 발행</p>
          </div>
        )
      })
     }

    {
      modal == true ? <Modal
      메뉴={메뉴} 메뉴변경={메뉴변경} title={title}/> : null
    }

    </div>
  );
}

function Modal(props) {
  return (
      <div className = "modal">
        <h4>
          { props.메뉴[props.title] }
        </h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button>글수정</button>
      </div>
  )
};

export default App;