const name= useInput("Mr."); //custom Hook
return~~
<input placeholder="name" value={name.value} onChange={name.onChange} />
===
<input placeholder="name" {...name} />
{...name} 로 태그 안 속성들을 퉁칠 수 있다는 것... 배웠다
const useInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const onChange = () => {
console.log(onChange);
};
return [value,onChange]; // 1
1// 각각 state 와 함수를 할당해서 할당된 값을 이용해서 UI를 구현한다.
const useTabs = (initial)=>{
const [currentIndex, setCurrentIndex] = useState(initial);
return { currentItem= allTabs(currentIndex),
changeItem= setCurrentIndex
} //1
}
1// return을 객체로 나타낼시 UI 쪽 코드에서 구조분해할당하여 useTabs에서 정의된 값들을 사용할 수 있음
const { currentItem, changeItem } =useTabs(0, content)