여기서 visible은 상태 값을 가리킵니다. setVisible은 상태 값을 변경할 수 있는 함수입니다. 만약 setVisible(true)를 호출하면 visible 값이 true로 바뀝니다. 그리고 useState 함수에 넣어준 파라미터는 상태 값의 초깃값입니다.
이 코드에서 사용한 문법은 배열 구조 분해 할당입니다. 이전에 배운 객체 구조 분해 할당과 비슷한데요. 예를 들어, 다음과 같은 배열이 있다고 가정해봅시다.
const people ['John', 'Jake', 'Jane']; const john people[0]; const jake people[1]; const jane people[2];
이 코드는 배열 구조 분해 할당을 사용해 다음과 같이 작성할 수 있습니다.
const people ['John', 'Jake', 'Jane']; const [john, jake, jane] people;
결국 useState가 호출되면 두 가지 원소가 들어있는 배열을 반환하는데, 그 배열에는 첫 번째 원소에 상태 값, 두 번째 원소에 상태를 업데이트하는 함수가 들어있습니다. 그리고 우리가 배열 구조 분해 문법을 통해 각 원소들을 배열에서 편하게 추출해 사용하는 것입니다.
참고로 지금은 useState를 사용해 Boolean 형태의 값을 사용하고 있지만, useState를 사용해 Boolean뿐만 아니라 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수도 있습니다.