후킹: useState()

JavaScript를 사용하는 첫 번째 프로젝트에서 이중 기능을 가진 버튼을 만들려고 했습니다. 첫 번째 클릭 시 이 버튼은 양식을 반환하고 두 번째 클릭 시 양식을 숨깁니다. 몇 시간 동안 조사하고 다른 사람들과 이야기를 나눈 후, 궁극적으로 내 버튼이 이 작업을 수행할 수 있는 방법이 없으며 양식을 숨기려면 두 번째 버튼이 필요하다는 결론을 내렸습니다. 이 기능을 만들 수 있는 방법이 있어야 한다고 확신했기 때문에 실망스러웠습니다.

React를 배우기 시작한 지 몇 주 만에 우리는 hooks에 대해 알게 되었고 우리가 배운 첫 번째 hook은 useState() 였습니다. UseState , "함수 구성 요소에 React 상태를 추가할 수 있는 후크"이며 이를 사용하는 방법의 예는 이중 버튼 기능에 대한 것입니다.

예를 들어 JavaScript를 엄격하게 사용하여 만든 버튼을 살펴보십시오.

gameButton.addEventListener('click', createGameForm)
  function createGameForm(e){
    addGameForm.innerHTML = `
      <ul>
      <form id = 'gameform'>
        ...
      <button id = 'back_btn'> Hide </button>
      </ul>` 
      const gameform = document.querySelector('#gameform')
      gameform.addEventListener('submit', (e) => {
        e.preventDefault() 
        let game = {
          ...
          }
          renderGame(game)
          createAGame(game)
          hideGame()
        })
        const backButton = document.querySelector('#back_btn')
        backButton.addEventListener('click', hideGame)
  }

React와 이 코드에 대한 후크를 도입하면 코드가 정리될 뿐만 아니라 이중 기능도 추가됩니다.

import react, {useState} from react

function formButton(){

return(
<div>
</div>

)

원래 코드를 분해하는 첫 번째 단계는 react 및 useState를 가져오고 이를 구성 요소로 분해하는 것입니다.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>

return(
<div>
</div>
)

다음으로, 숨기기 버튼을 없애기 위해서는 분해된 변수const [setButtonActive, isSetButtonActive] = useState(false)를 추가하여 useState를 구현해야 합니다. 첫 번째 값은 상태 변수이고 두 번째 값은 상태를 변경하는 함수입니다. 이 경우 상태를 false로 설정하지만 문자열, 정수 및 배열과 같이 상태를 설정할 수 있는 몇 가지 다른 항목이 있습니다.

import react, {useState} from react

function formButton(){

const [setButtonActive, isSetButtonActive] = useState(false)

const gameForm = (
<div>
   <form id = 'gameform'>
     ...
   </form id = gameform>
</div>
function handleClick(){
setButtonActive((setButtonActive) => !isSetButtonActive)
}

const showForm = setButtonActive ? {gameForm} : null;

return(
<div>
 <button onClick = {handleClick}> Click Me </Button>
 {showForm}
</div>
)

그런 다음 상태를 true에서 false로 변경하는 버튼onClick 이벤트에 연결되는 함수를 만드는 최종 단계를 설정합니다. 마지막으로 양식과 null 사이를 전환하여 아무것도 표시하지 않는 삼항 조건const showForm = setButtonActive ? {gameForm} : null;을 따릅니다. UseState는 원래 양식 버튼을 만들 때 찾고 있던 답이었습니다. 이것은 아마도 useState를 사용하는 가장 간단한 방법이며 사용할 수 있는 더 많은 고급 방법이 있습니다.