[React] 함수분리하기, 파라미터전달방법

* 함수형식

const Record= ( {매개변수들 } ) =>{

return(   )

}

 

Main함수 : 

<Record> //하면 Record함수의 return내 태그로 대체된다.

단, 태그는 1개만 리턴가능 -> 전체를 div 로감싸서 리턴하면된다.

 

※ setNumList (   [   배열  ]  )  안에 배열([])을 넣어야된다. 

 

* (자식에서 공통으로 사용해야할) 파라미터전달방법

1. 부모함수 App에서 선언후

2.자식에게 전달한다.

3. 자식을 매개변수에 선언하고

4. 부모 아래처럼 전달하면 된다.

<Record 파라미터 = { 전달할 변수 } >

<RecordForm numList={numList} setNumList={setNumList}>

 

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

//함수 첫글자는 대문자여야
const RecordForm = ({ numList, setNumList }) => {
  
  const [num, setNum] = useState(0);

  return (
    <div>
      <div>현재숫자 : {num}</div>
      <button onClick={() => setNum(num + 1)}>증가</button>
      <button onClick={() => setNum(num - 1)}>감소</button>
      <button onClick={() => setNum(0)}>초기화</button>
      <hr></hr>
      <button onClick={() => setNumList([...numList,num])}>숫자기록</button>
      <button onClick={() => setNumList([])}>기록초기화</button>
    </div>
  )
}

//파라미터를 {}로 감싸라.
const RecordList = ({ numList }) => {
  
  return (
    <div>
      <h2>리스트</h2>
      {numList.map((num) => (
        <li>{num}</li>
      ))}
    </div>
  )
}

const App = () => {
  //부모함수에서 선언하고 
  //자식속성 = {부모변수} 해서 넘겨라
  const [numList, setNumList] = useState([]);

  return (
    <div style={{margin: "40px auto",
                width: "800px",
                textAlign:"center",
                }}>
      
      <RecordForm numList={numList} setNumList={setNumList}></RecordForm>       
      <RecordList numList={numList}></RecordList>

    </div>
  )
}

export default App;