4. useState in if statement
다음 컴포넌트는 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>
);
}
버튼을 누를 때 화면에 어떤 변화가 생기는지 유추하라.