# useTitle의 기능

import {useEffect, useState} from "react";

export const useTitle = initialTitle => {
    const [title, setTitle] = useState(initialTitle);
    const updateTitle = ()=> {
        const htmlTitle = document.querySelector("title");
        htmlTitle.innerText = title;
    };
    useEffect(updateTitle, [title]);
    return setTitle;
}

useTitle은 HTML에서 Head에 있는 title을 바꿔주는 기능이다.

상태에 따른 타이틀 변화를 주고싶을때 사용하는 Hook이다.

사용법 :  useTitle을 새로운 변수에 할당하고 컴포넌트에 넣어서 사용한다.

	const titleUpdater = useTitle("loading...");
	//타이틀의 디폴트를 "loading..." 으로 바꿔 줄 수 있다. 
    
 	setTimeout(()=> titleUpdater("Home"),5000);
 	//타임아웃을 추가하면 적용한 시간 후에(지금은 5초) 타이틀이 loading... => Home 으로 바뀐다.

useTitle은 아주 간단한 훅이기 때문에 추가 설명보다는 기본적인 useState와 useEffect의 기능적인 이해가 더 중요하다.

# useInput의 기능

import {useState} from "react";

export const useInput = (initialValue, validator) => {

    const [value, setValue] = useState(initialValue);
    
    const onChange = event => {
    
        const { target: {value} } = event;
        
        let willUpdate = true;
        
        if (typeof validator === "function") {
            willUpdate = validator(value);
        }
        if (willUpdate) {
            setValue(value);
        }
    };
    return {value, onChange};
}

react내에서 input을 사용하고자 할때 사용하는 함수(hook)이다.

인풋에 입력하는 값을 useState의 별도사용 없이 re-render시켜주는 hook이다.

사용법 :  useInput을 새로운 변수에 할당하고 컴포넌트에 넣어서 사용한다.

const inputArea = useInput("MR.", cantWord);
const cantWord = (value) => !value.includes("!");

<input placeholder="inputArea" {...inputArea} />

useInput의 첫번째 전달인자( Argument )는 해당 인풋의 초기값이 되고

두번째 전달인자는 Input의 유효성검사, 새로운 규칙의 함수를 넣을 수 있다.

현재 새로운 규칙  cantWord의 내용은 인풋안에 느낌표가 들어가면 펄스를 반환하여 re-render를 하지 않게 된다.

여기서 { ...inputArea } 는 inputArea의 모든 것을 언팩한다.

inputArea = useInput

즉 useInput의 return값인 { value, onChange }는 input의 속성이 된다.

# 설명

const inputArea = useInput("MR.", cantWord);
const cantWord = (value) => !value.includes("!");

<input placeholder="inputArea" {...inputArea} />

{ ...inputArea } 를 통해서 useInput의 반환값인 value와 onChange를 가져왔다.

onChange는 변화를 감지하는 이벤트이고 Javascript Vanilla 에서는 addEventListener("change", function) 와 같다.

리액트에서는 컴포넌트 속성내부에 넣는 것만으로도 이벤트가 실행된다.

onChange에 따로 전달인자를 정해주지 않았기 때문에

전달인자(Argument) = "해당함수가 실행되는 요소의 속성" 이 된다.

    const onChange = event => {
    
        const { target: {value} } = event;
        
        let willUpdate = true;
        
        if (typeof validator === "function") {
            willUpdate = validator(value);
        }
        if (willUpdate) {
            setValue(value);
        }
    };

그러므로 event는 input속성에 접근할 수 있는 인자가 되었고

구조분해 문법을 사용해서 event의 target: { value } 를 가져오고

이후에 쓰이는 value = "input내부의 적힌 값" 이 된다.

이후에 if문을 통해서 함수의 유효성을 검사 한 후, 함수가 맞으면

validator가 실행되고  willUpdate = validator(value) 가 됨으로 이 함수가 제대로 작동하게되면 true이고

useState의 리렌더 함수인 setValue가 실행되면 쓰는대로 글자가 적힌다.