[문법] 파라미터(props) 사용 (부모 -> 자식) 2

✔ useState의 변경 함수를 props로 받아서 자식 함수에서 사용하기

처음 실행 했을 시 에러난 코드🚫

🚫코드 👇

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [modal, setModal] = useState(false);

  return (
    <>
      <div>
        <button onClick={() => {
          setModal(!modal);
        }}>모달창</button>

        {modal === true ? <Modal className="bg_yellow" 구이름={구이름[0]} 구이름변경={구이름변경('경기도')}/> : null}
        {/*
          부모 -> 자식 state 전송 방법
          1. <자식컴포넌트 작명={부모컴포넌트의 state명} />
          2. 자식컴포넌트에서 props(파라미터)로 받아서 사용
        */}
      </div>
    </>
  )
}

function Modal(props){
  return(
    <>
    <div className={`modal ${props.className}`}>
      <h2>{props.구이름}</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={() => {
        {props.구이름변경}
      }}>글 수정</button>
    </div>
    </>
  )
}

 

결과 👇

 

뭘 잘못했는지 모르겠지만 에러가 떴다!

에러가 뜬 것에 감사..

 

🚫 에러 내용 🚫
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

너무 많이 리렌더링을 한다는 문제..!!

👩🏻:

❓ 왜냐고?

렌더 과정에서 state를 변화하는 함수가 있다면 반복해서 리렌더링을 하게 됨

setState는 콜백으로 다시 렌더링을 트리거

그 과정 중에서 무한루프가 돌면서 이런 에러가 발생한다고 함!

 

👩🏻❗: 잘못된 점

1. 구이름변경은 함수라서 ()로 가져왔는데 그렇게 하면 안된다.
2. 구이름이 array로 배열로 담겨져 있어서 맞춰줘야한다.

 

수정 코드 👇

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

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [modal, setModal] = useState(false);

  return (
    <>
      <div>
        <button onClick={() => {
          setModal(!modal);
        }}>모달창</button>

        {modal === true ? <Modal className="bg_yellow" 구이름={구이름[0]} 구이름변경={구이름변경} 변경내용={'경기도'}/> : null}
      </div>
    </>
  )
}

function Modal(props){
  return(
    <>
    <div className={`modal ${props.className}`}>
      <h2>{props.구이름}</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={() => {
        props.구이름변경((prev) => {
          const copy = [...prev];
          copy[0] = props.변경내용;
          return copy;
        });
      }}>글 수정</button>
    </div>
    </>
  )
}

export default App;

 

 

결과 👇

 

 

글수정 클릭하면

경기도로 바뀜!

 

 

 

 

 

 

 

 

 

 

이 코드에서 더 개선할 사항이 있냐고 GPT에게 물어보았다!
1. 인덱스를 props로 전달하기

- Modal 컴포넌트의 재사용성 증가

- 유지보수 용이

👇 변경사항 👇

{modal === true ? <Modal
          className="bg_yellow"
          index={0}
          구이름={구이름}
          구이름변경={구이름변경}
          변경내용={'경기도'}
 /> : null}

 

2. 컴포넌트 분리하여 가독성 향상

👇 변경사항 👇

function Modal({ className, index, 구이름, 구이름변경, 변경내용 }){

 const handleUpdate = () => {
    구이름변경((prev) => ({
      ...prev,
      [index]: 변경내용,
    }));
  };

return(
    <>
      <div className={`modal ${className}`}>
        <h2>{구이름[index]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={handleUpdate}>글 수정</button>
      </div>
    </>
  )
}

 

개선 코드 👇

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

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [modal, setModal] = useState(false);

  return (
    <>
      <div>
        <button onClick={() => {
          setModal(!modal);
        }}>모달창</button>

        {modal === true ? <Modal
          className="bg_yellow"
          index={0}
          구이름={구이름}
          구이름변경={구이름변경}
          변경내용={'경기도'}
        /> : null}
      </div>
    </>
  )
}

function Modal({ className, index, 구이름, 구이름변경, 변경내용 }){
  const handleUpdate = () => {
    구이름변경((prev) => ({
      ...prev,
      [index]: 변경내용,
    }));
  };

  return(
    <>
    <div className={`modal ${className}`}>
      <h2>{구이름[index]}</h2>
      <p>날짜</p>
      <p>상세내용</p>
      <button onClick={handleUpdate}>글 수정</button>
    </div>
    </>
  )
}

export default App;