localStorage, debounce, useReducer, useContext , forwardRef, useImperativeHandle

1. 키워드 값이 바뀔 때
2. 서버에서 키워드로 자동완성 된 데이터를 받아왔을 때

useEffect

Synchronizing with Effects

• 로컬스토리지

localStorage.setItem(“isLoggedIn”,”1”)
localStorage.removeItem(“isLoggedIn”)

• 유효성 검사

• debounce

: 일정 시간 안에 동일 이벤트가 다시 발생하면 마지막 발생 시점부터 일정 시간을 지연한다.

useEffect(()=>{

const identifier= setTimeout(()=>{
	console.log(“Check Validity”)
},500)

return ()=>{
	clearTimeout(identifier)	
} 
},[enteredEmail,enteredPassword])

• useReducer

const emailReducer =(state, action)=>{

	if(action.type === “USER_INPUT”){
		return {
			value:action.val,
			isValid:action.val.includes(“@”)
		}
	}

	if(action.type===“”INPUT_BLUR){
		return{
			value:state.value,
			isValid:state.value.includes(“@”)
		}
	}

	return {
		value:””,
		isValid:null
	}


}

const [emailState,dispatchEmail]=useReducer(emailReducer,{
	value:””,
	isValid:null
})

const emailChangeHandler=(event)=>{
	dispatch({type:””USER_INPUT, val:event.target.value})
}

Const validateEmailHandler=()=>{
	dispatchPassword({type:”INPUT_BLUR”})
}

복잡한 상태 다룰 때 useState로 하게 되면 side effect 발생
useReducer 하나의 복잡한 상태를 여러 타입으로 dispatch 하기에 적합

• useContext

state,props의 한계

const AuthContext= React.createContext({
	isLoggedIn:false
})

const [isLoggedIn,setIsLoggedIn]=useState(false)

<AuthContext.Provider value={{isLoggedIn:isLoggedIn}}>

</AuthContext.Provider>

const context =useContext(AuthContext)

전역상태관리
Context 한계
잦은 변화가 일어나는 상태를 다루기에 적합하지 않음=>성능 떨어짐
모든 컴포넌트 간 통신을 다 context에서 다루면 안됨

• useContext 심화

const AuthContext=React.createContext({

	isLoggedIn:false,
	onLogin:(email,password)=>{},
	onLogout:()=>{}

})

export const AuthContextProvider=(props)=>{
	const [isLoggedIn,setIsLoggedIn]=useState(false);
    
	const loginHanlder=(email,password)=>{
		setIsLoggedIn(true)
	}
    
	const logoutHandler=()=>{
		setIsLoggedIn(false)
	}

	return (
	<AuthContext.Provider value={{
		isLoggedIn:isLoggedIn,
		onLogOut:logoutHandler,
		onLogin:loginHandler
	}}>
		{props.children}
	</AuthContext.Provider>
)
} 

• forwadRef, useImperativeHandle

function ParentComponent(){
	const inputRef=useRef();

	return (

	<>
		<FancyInput ref={inputRef}/>
		<button onClick={()=>inputRef.current.reallyFocus()}>포커스</button>
	</>

	)
}


function FancyInput = React.forwadRef((props,ref){
	const inputRef=useRef(null);
	
	useImperativeHandle(ref, ()=>({
		reallyFocus:()=>{
			inputRef.current.focus();
			console.log(“Being focused!” )
		}

	return <input ref={inputRef}>


}))
})

Ref 가 클래스 컴포넌트에 사용되는 것과 유사하게, 내부 메소드를 외부에 보낼 수 있음