React Hook

* 리액트 소스한번보기!

 

const [state, setState] = useState(false);

//이것의 문제점은 타자를 칠때마다 컴포넌트 전체를 다시 render()하게된다.
<input value={state} type='text' onChange={(e)=>setState(e.target.value}/> 


// rendering과 painting이 있다.
// react는 render를 vertual DOM에 값을 set한다.
// 그다음 painting한다.

//props는 리액트 내부에서는 state로 되어있다.
//그래서 props가 바뀌면 랜더링을 다시해야한다.

const useState = (initValue)=>{ //useState는 대충 이런느낌으로 구성되어있다..

	return [this.state, 
    (v)=> {this.state = v}] //리액트 문서에서 이부분은 action이라고 되어있다.
}

 

<Custom Hook>

const defaultState = ""
const [state, setState] = useState(defaultState);

const resetState = () => setState(defaultState);



/**
* 위의 훅스가 아래처럼 바뀐다.
*/

const useInput = ( defaultValue ) => {

	const [value, setValue] = useState(defaultValue); //작성하는 시점에서 상태를 갖는 커스텀훅이된다.

	return [
    	{value, onChange: e => setValue(e.target.value)}
        ,() => setValue(default)
    ]
}

export useInput;


const [stateProps, resetState] = useInput(''); //useInput은 export한것을 가져오자

<input {...stateProps} type="text"/>

<input {...nameProps} type="text"/>

hooks는 registry에 다 등록이 된다.

 

registry가 바뀌면 render하도록 옵저버 패턴으로 이루어져 있다.

 

가장많이 커스텀훅을 쓰는것이 useState와 useRef이다.

 

react-Hook-form 을 사용하면 여러 form에 대한 커스텀훅까지 넣을수있다.

react-slick은 캐러셀을 이용할때

axios는 비동기요청

 

 

컴포넌트의 소멸은 2가지가 있다 

1. GC가 돌때

2. transition(변환)이 일어났을때 return을 탄다.

 

transition과 destroy는 will transition과 will destroy이후에 일어난다.

will transition일때 registry가 return문을 실행시킨다.

 

그래서 setInterval같은것들을 사용할때 return에  clearInterval을 적어주므로서 페이지 전환전에 return을 실행시켜서

닫아준다.