뉴스피드 만들기 -2

 const nicknameRef = useRef(null);

  const signUp = useCallback(

    event => {

      event.preventDefault();

      const nickname = nicknameRef.current.value;

}

 

<input

          onKeyUp={ActiveIsSignUp}

          ref={nicknameRef}

          placeholder="닉네임"

          value={nickname}

          onChange={nameHandler}

        />

코드 안에서 단적인 부분만 긁어왔는데

처음에는 useCallback으로 랜더링을 막아볼 생각이었으나,

디펜더시에 값을 넣으면 그 값이 바뀔때마다 랜더링 되는 걸 생각하면 

접근을 잘 못 한 것이었고, 

input 창에 값을 입력할때마다 state가 변경되어서 리랜더링 되는 것을 막으려고 

useRef를 활용하여 하였으나, 사용법을 잘못 숙지하고 있었고,

        <input

          // onKeyUp={ActiveIsSignUp}

          ref={nicknameRef}

          placeholder="닉네임"

          // value={nickname}

          // onChange={nameHandler}

        />

이런 식으로 바꿔주니 input에 값을 입력해도 리랜더링을 방지 할 수 있었다. 

그러나 문제가 하나 생겼는데

 <button

disabled={nickname === '' || email === '' || password === '' || twicePw === '' ? true : false}

      onClick={signUp}>

          회원가입

        </button>

유효성 검사를 하는 부분이 value값을 가져오지 못해 버튼활성화가 안된다.

이건 다시 알아봐야겠다