React 기본적인 회원가입 구현하기 -2 (목차 2번 feat. custom Hooks 알아보기)

목차 2번

 

그 전 게시글을 통해서 기본적인 React 회원가입 코드를 구현하였다.

 

이번엔 좀 더 심화과정을 통해서 회원가입 코드를 짜보겠다. 심화과정이긴 하지만 코드량은 훨씬 줄여서 작성할 수 있다.

 

 

먼저 완성된 코드를 보여주도록 하겠다.

import React,{useState} from 'react'

const useInput = (defaultValue) => {
    const [value,setValue] = useState(defaultValue)
    const onChange = e => {
        setValue(e.target.value)
    }
    return{
        value,
        onChange,
    }
}

const Form = () => {
   
    const id = useInput('')
    const pw = useInput('')

    const handleSubmit = e => {
        e.preventDefault()     
    } 
    
    return(
        <form onSubmit={handleSubmit}>
            <h2>회원가입</h2>
            <ul>
                <li>
                    <label htmlFor="userid">아이디</label> 
                    <input type='text' name="userid" {...id} />
                </li>
                <li>
                    <label htmlFor="password">패스워드</label>
                    <input type='password' name="password" {...pw} />
                </li>
                <li>
                    <input type='submit' value="가입" />
                </li>
            </ul>
        </form>
    )
}

export default Form

 

1.

원래 있던 코드들은 그 전 게시글에서 설명을 다루었기 때문에 생략하도록 하겠다. 우리는 먼저 useInput 이라는 함수를 Form 컴포넌트 밖에다가 만들도록 하자.

 

Form 컴포넌트 밖에다가 둔 이유는 이 useInput 이라는 함수를 Form 컴포넌트 뿐만이 아닌 다른 컴포넌트에서도 이 코드를 재사용하기 위해서 따로 빼둔 것이다. 우리는 이러한 행위를 custom Hooks이라고 한다.

 

Custom Hooks?

우리는 리액트를 사용할 때 상태에 관해서 신경을 많이 쓰게 됩니다. 왜냐하면 리액트의 컴포넌트들은 상태에 따라서 유동적으로 바뀌고 변화해야하기 때문입니다. 그렇기에 우리는 함수형 컴포넌트에서 useState를 자주 사용하게 되는데 한 코드의 로직을 계속 사용하게되는 경우가 있습니다. 그러면 엄청 귀찮아지죠. 

 

그렇기 때문에 우리는 이러한 귀찮음을 해소하기 위해 중복되는 코드를 하나의 로직으로 묶어서 언제나 쉽게 import하여 사용할 수 있게 준비해주는 것이 좋습니다. 이것을 우리는 Custom Hooks라고 부릅니다. 

 

그렇다면 Custom Hooks는 언제 주로 사용하나?? 앞서 제가 말한 것처럼 반복되는 로직과 코드를 해소하기 위해 사용되고 우리는 input을 관리할 때 주로 사용할 것입니다. 

 

Custom Hooks를 사용할 때 주의해야할 점은 Custom Hooks를 작성할 시 꼭 use로 먼저 시작해야하는 점입니다.use를 쓰지 않으면 인식을 하지 못하기에 앞에 use를 쓰는 것을 잊지 않도록 합시다. ex) useInput, useState..

 

 

 

2.

자 다시 코드로 돌아가보도록 합시다. 우리는 useInput 함수에다가 useState를 구조분해할당을 통해서 value와 setValue를 배열로 변수를 주었습니다. 

 

그리고 onChange 함수도 만들어서 setValue(e.target.value)를 통해 값이 변할때마다 onChange를 통해서 최신화된 값을 가져올 수 있도록 설정했습니다.

 

그 다음 return값을 통해서 valeu와 onChange함수가 실행이 되도록 설정했습니다.

 

 

3. 

그리고 우리는 useInput 이라는 함수를 Form 컴포넌트에서 id와 pw라는 변수명에 각각 담아두고 인자값은 빈 값으로 설정했습니다.

 

 

4.

id와 pw를 return에 담겨있는 input 엘리먼트 속성에다가 jsx문법으로 스프레트 연산자를 통해 담아줬습니다-> {...id}, {...pw} 

 

그러면 id와 pw에 담겨있는 useInput 함수가 실행이 되면서 return 값인 value, onChange가 적용이 됩니다.

 

 

5.

그러면 input 박스안에 값이 제대로 작성이 되고 검사 키에서 Components를 보면 Hooks 안에 Input이 생겨있는 것을 볼 수 있고 그 안에 State로 값이 넣어져 있는 것을 확인할 수 있습니다.