48일 차 회고

• customHook

CustomHook

반복되는 로직이나 중복되는 코드를 우리만의 커스텀 훅을 톧해서 관리할 수 있다.
리액트에서 제공하는 useState, useEffect와 같은 내장 훅을 사용해서 우리만의 훅을 만든다.

Hook 만들기.

1. 커스텀 훅을 만들때는 파일앞에 use라는 키워드를 붙여 줘야 한다.
2. hooks 라는 폴더를 만들어 관리한다.
3. 함수를 생성한다.

import React,{useState} from 'react'

const useInput = () =>{
	//useState 
	const [value, setValue] = useState('');

	//이벤트핸들러
	const handler = (e) => {
		setValue(e.target.value)
	}

	// 배열로 반환한다. (사용할)
	return [value, handler]
}

export default useInput

4. 사용.

import React from 'react'
import useInput from './hooks/useInput'

const App = ()=>{
	// 훅 사용
	const [title, onChangeTitleHandler] = useInput();
	const [body, onChangeBodyHandler] = useInput();
	
	return(
		<div>
			<input 
				type="text"
				name= "title"
				value= {title}
				onChange={onChangeTitleHandler}
			/>

			<input 
					type="text"
					name= "body"
					value= {body}
					onChange={onChangeBodyHandler}
			/>
		</div>
	)
}

export default App;