useRef (feat. useState)

useRef로 작업하는 것이 state로도 작업하는 것과 어떤 것이 다를까?

리렌더링(클라이언트의 작업과 동기화)
state로 작업을 하게 되면 리액트가 액션에 대한 관리를 하게 된다.
즉 이말은 setState를 통한 변화가 있을 때마다 리렌더링하는 과정을 거친다는 말이다.
검색창의 검색단어 자동완성 기능이나 input에 글을 작성할 때 그 글을 토대로 검색결과를 가져오는 것은 state를 이용하면 쉽게 구현할 수 있는 기능이다.

그렇다면 useRef는 완전 쓸모없는 기능일까?

반대로 리렌더링하지 않고 DOM요소의 속성을 조회하거나 수정할때에는 오히려 useRef가 유용할 수도 있다.
예를 들어 게시글의 항목의 key값을 useRef를 통해 지정하고 이를 1씩 증가하면서 key값을 제공할 수도 있고 간단히 초기화과정에 포커스를 이동시키는 경우에는 사용할 수 있다.

근데 결론적으로 느낀점은 state를 통해 리액트가 그 친구를 관리하도록(바라보도록) 해주는 것이 더 편하다라는 것, 그리고 Bug나 Runtime Error를 발생시키지 않을 수 있다는 것(예측불가능한)을 알게되었다.

특히나 state를 묶음으로 관리하는 방법을 보게되면서 확실히 state로 관리하는 것이 편하겠다는 생각이 들었다.

 

import React from 'react'

const loginFormInitial = {

  username: '',

  password: '',

  passwordCheck: '',

}

const Shot = (props) => {

  const [loginForm, setLoginForm] = React.useState(loginFormInitial)

  const isAmuguna = loginForm.username && loginForm.password

  const changeHandler = (e) => {

    const { name, value } = e.target

    // 동적 키값 밸류 변경하기

    setLoginForm({ ...loginForm, [name]: value })

  }

  return (

    <form>

      <input

        value={loginForm.username}

        name="username"

        onChange={changeHandler}

      />

      <input

        value={loginForm.password}

        name="password"

        onChange={changeHandler}

      />

      <button type="submit" disabled={!isAmuguna}>

        제출

      </button>

    </form>

  )

}

export default Shot

매니저님께 배운 코드 객체 분할과 동적인 객체 키밸류 변경을 적절히 이용하면 state로 이런기능까지 가능하구나 했다.

1. loginForm state로 묶어서 상태관리하기

2. state를 통한 버튼 disabled 기능 구현