여기서 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뿐만 아니라 숫자, 객체, 배열 등의 형태를 가진 상태를 관리할 수도 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.