초보자는 먼저 useState()를 살펴봅니다.

자바스크립트를 처음 배울 때 누군가가 버튼을 클릭하거나 웹 페이지의 특정 지점에 마우스를 올렸을 때 특정 작업이 발생하도록 하는 방법을 알고 싶을 수 있습니다. 이것이 addEventListeners로 수행된다는 사실을 알게 된 후 저는 react.js로 이동했고 사용자 상호 작용에 대해 동일한 기능을 사용할 것이라고 무식하게 가정했습니다. addEventListener 대신 React에는 useState()라는 사용자 상호작용 기능이 있습니다.

useState는 코드의 상태를 변경할 수 있도록 코드의 다른 기능에 연결할 수 있는 "후크"라고 하는 가장 유용한 기능 중 하나일 수 있습니다.

예를 들어, 버튼을 코딩하고 있고 onClick 함수를 사용하여 버튼의 내부 텍스트를 변경하기로 결정한 경우 간단히 다음과 같은 상태를 설정하면 됩니다.

const [isClicked, setIsClicked] = useState(false)

이 예제에서는 버튼을 클릭했는지 여부에 대한 상태를 만든 다음 해당 상태를 변경하기 위한 setter 함수(setIsClicked)를 만들었습니다. 버튼을 실제로 변경하려면 상태를 변경하는 핸들 클릭 기능을 만들어야 합니다...

const handleClick = () => {
    setIsClicked(isClicked => !isClicked)
}

이 콜백 함수는 단순히 setter 함수를 호출하고 setter 함수 내에서 상태의 부울을 변경하므로 처음에 useState를 false로 설정했으므로 이제 true가 됩니다. 그러나 useState 설정 프로세스를 완료하는 데 한 단계가 더 있습니다.

다음으로 우리는 버튼을 if 문으로 설정해야 하며 우리의 경우 if, else 문의 더 최소 버전인 삼항을 사용할 것입니다. 삼진법을 코딩해 봅시다...

{isClicked ? <button>In Cart</button> : <button>Add To Cart</button> }

우리의 삼항에서 우리는 버튼이 클릭된 경우(상태가 true로 전환된 경우) 버튼이 "장바구니에 있음"을 표시하기를 원한다고 간단히 썼습니다. 상태가 변경되지 않고 여전히 false인 경우 버튼에 "장바구니에 추가"라는 텍스트가 포함됩니다.

이것은 반응 상태를 설정하는 매우 간단하고 쉬운 방법입니다. 무섭게 보일 수 있고 믿을 수 있습니다. 처음에는 무서웠지만 시간이 지남에 따라 더 이해하기 시작하고 사용자가 할 수 있기를 원하는 코드가 있으면 언제든지 알 수 있습니다. 상호 작용하려면 useState를 사용하십시오.

웹 애플리케이션에는 사용자 상호작용을 위한 수십 개의 지점이 있을 수 있기 때문에 useState가 왜 그렇게 중요한지 알 수 있습니다.

버튼 외에도 useState를 사용하여 검색 표시줄, 입력, 데이터베이스 또는 API 정보 표시, 마우스오버 이벤트 및 기타 전체 목록과 같은 항목을 변경할 수 있습니다. useState는 react.js의 매우 효율적이고 강력한 후크이므로 학습이 매우 중요합니다. 따라서 몇 가지 연습을 하여 웹 애플리케이션을 시작하십시오!

오! 그리고 행복한 코딩!