다음 컴포넌트는 ageFirst의 값에 따라 useState를 선언하는 순서가 바뀐다.
ageFirst
useState
function App() { const [ageFirst, setAgeFirst] = useState(true); let age, setAge, name, setName; if (ageFirst) { [age, setAge] = useState(20); [name, setName] = useState("John"); } else { [name, setName] = useState("John"); [age, setAge] = useState(20); } return ( <div> <p>age: {age}</p> <p>name: {name}</p> <button onClick={() => setAgeFirst(!ageFirst)}>change</button> </div> ); }
버튼을 누를 때 화면에 어떤 변화가 생기는지 유추하라.