함수를 분리할 때 함수 명은 대문자로 시작!
App이 모든 함수의 부모
다른 함수에서 변수를 사용하고자 할 때에는 부모(App)안에 변수 선언!
예제
import React, {useState} from 'react';
import './App.css';
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/>
<button onClick={ () => setNumList([...numList, num])}> 숫자 기록 </button>
<button onClick={ () => setNumList([])}> 기록 초기화 </button>
</div>
)
}
const RecordList = ({numList}) => {
return (
<div>
<h2> 기록된 숫자 </h2>
{numList.length > 0 ?
<ul>
{numList.map((num) => (
<li>{num}</li>
))}
</ul>
: <div>기록 없음</div>}
</div>
)
}
const App = () => {
// 모든 함수에서 사용하기 위해 부모에 선언
const [numList, setNumList] = useState([]);
return(
<div style={{margin : "40px auto",
width : "800px",
textAlign : "center",
}}>
<RecordForm numList={numList} setNumList={setNumList}/>
<RecordList numList={numList}/>
</div>
)
}
export default App;