useState 후크 작동 방식

나는 최근에 useState 후크가 React에서 어떻게 작동하는지 친구에게 설명하려고 했습니다. 나는 내 비유가 꽤 좋은 것이라고 생각했습니다. 그래서 시작합니다!

React가 뷰를 업데이트할 때마다 재설정하고 싶지 않은 정보를 저장할 수 있는 큰 창고가 있다고 상상해보세요. 이 창고를 Central Storage라고 부르겠습니다.

중앙 저장소에 정보를 저장하려면 선반 공간을 예약해야 합니다. useState로 전화하여 선반 공간을 예약합니다. useState는 선반 공간에 저장되는 기본 정보가 될 값을 취합니다.
useState는 두 항목이 있는 배열을 반환합니다.

선반 공간에 저장된 정보의 최신 사본입니다. React가 뷰를 업데이트할 때마다 새로운 사본을 받게 됩니다.

선반 공간에 저장된 정보를 덮어쓸 수 있는 기능입니다. 1에서 받은 정보를 영구적으로 변경하려면 새 정보로 이 함수를 호출해야 합니다.

우리의 코드는 다음과 같을 것입니다:

const shelfSpace = useState("Hello World!");// ^ ^ ^ // | | | // ∟ Array containing a copy of the information stored in your shelf space, and a function to overwrite // the information stored in your shelf space // | | // ∟ "Reserve shelf space" // | // ∟ Store "Hello World!" in the shelf space when reserving the shelf spaceconst message = shelfSpace[0];// ^ ^ // | | // ∟ Store the copy of the information in your shelf space in a more conveniently named variable. It has a // name which better describe the information. // | // ∟ The copy of the information will always be the first item in the array returned by // useState. At index 0, in other wordsconst overwriteMessage = shelfSpace[1];// ^ ^ // | | // ∟ Store the function for overwriting the information in your shelf space in a more conveniently // named variable. It better describes what the function does. // | // ∟ The function for overwriting the information in your shelf space will always // be the second item in the array returned by useState. // At index 1, in other words

모든 예약 i Central Storage에 대해 세 줄의 코드를 사용할 필요가 없습니다. 다음과 같이 단축할 수 있습니다.

const [message, overwriteMessage] = useState("Hello World!");// ^ ^ // | | // ∟ "Unpack" the list returned by useState and store the first item in the array (index 0) // in a variable named `message` // | // ∟ Store the second item in the array (index 1) in a variable named `overwriteMessage`

중앙 저장소에서 받은 정보 사본을 변경할 때 해당 변경 사항은 중앙 저장소의 선반 공간에 자동으로 표시되지 않습니다. 중앙 저장소의 선반 공간에 있는 정보를 덮어쓰도록 명시적으로 요청해야 합니다.

코드에서 변수message를 업데이트하더라도...

const [message, overwriteMessage] = useState("Hello World!");message = "Hello Programming!";

... 중앙 저장소의 선반 공간에 있는 정보는 변경되지 않습니다. 방금 정보 사본을 수정했습니다. 다음에 React가 보기를 업데이트하면 방금 변경한 내용이 포함되지 않은 중앙 저장소에 있는 정보의 새로운 복사본을 가져올 것입니다.

변경 사항을 저장하려면 중앙 저장소의 선반 공간에 있는 변경 사항을 명시적으로 덮어써야 합니다.

const [message, overwriteMessage] = useState("Hello World!");message = "Hello Programming!";overwriteMessage(message)// ^ // | // ∟ Overwrite the information in your shelf space in Central Storage with our changed copy

이것이 누군가가 useState 후크의 개념을 더 잘 이해하는 데 도움이 되기를 바랍니다.

즐거운 코딩!