우선 함수형 컴포넌트는 호출이 될 때 마다 모든 내부 변수가 초기화 된다라고 이해했는데 이 말이 맞는지 먼저 여쭤보고 싶습니다.
만약 위 말이 맞다면,
import React, { useState } from 'react';
import Name from './Name';
function App() {
const [name, setName] = useState('');
const [num, setNum] = useState(1);
const changeName = (e)=>{
setName(e.target.value);
}
const changenum = (e)=>{
setNum(e.target.value);
}
return (
<div>
<input
type="number"
value={num}
onChange={changenum}
/>
<h3>{num}</h3>
<Name name={name} changeName={changeName} num={num}/>
</div>
)
}
export default App;
<Name>
import React, { useState } from 'react';
function Name(props) {
let { name , changeName ,num} = props
const [ person, setPerson] = useState("kim")
const randNum = ()=>{
return Math.random()
}
console.log('name render')
return (
<div>
<input
type="string"
value={name}
onChange={changeName}
/>
<h3>{name}</h3>
<h1>{ person }</h1>
<button onClick={()=>{
setPerson(randNum())
}}>Clcik</button>
</div>
)
}
export default Name;
위 프로젝트에서,
Click 버튼을 여러번 눌러 person의 값을 변경한 뒤,
input의 value를 변경하면 랜더링이 되며 Name 컴포넌트를 다시 호출하는데,
왜 useState에 초기 설정된 Person 값인 kim으로 변경되지 않는지 여쭤보고 싶습니다.
