useEffect( ) 란 ?

* useEffect( ) 는 변수값, 오브젝트등이 달라지면 그것을 인지하고 변경해주는 함수이다.

* useEffect( ) 는 콜백함수를 가지며, Dependency는 있을수도 없을수도 있다.

* useEffect( ) 는 무조건 한번 실행된다.

리액트 훅이다.

 

결과론 적으로 보면 로딩하는데 시간이 많이 걸리는 함수나,

서버에서 가져와야하는 데이터, 타이머들을 useEffect 안에 

작성해주면 조금더 사용자가 느끼기에 빠르다 라는 느낌을 줄수있다. 

html이 먼저 작동하고 그 이후 useEffect안에 있는 코드가 작성되니까!

 

 

종류와 쓰임새로는

 

> useEffect( ( ) => { } )

   시시때때로 사용되어져서 불필요한 것까지 인지하는 단점이 있음.

> useEffect( ( ) => { }[ ] )

단한번만 실행하고 싶을때 사용하는 함수다.

> const [name, setName] = useState( );

   useEffect( ( )  => { }, [ name ] );  

배열안의 값이 변할때마다 실행하는 코드이다.

 

여기서 궁금한 리액트 훅이란

 

리액트 프레임 워크는 컴포넌트 기법으로 사용되어지는데 가상 DOM을 만들고나서 가상 객체에 어떤 변화가 생기게 되면 해당 변화만 화면에 재랜더링 하여 빠르게 나타나게 해주는 기능이다.

근데 1회당 60회의 재 랜더링을 실행할때면 정상적인 랜더링 작업이 안되는 버그를 가지고 있다.

 

이부분의 복잡함을 덜고자 컴포넌트를 함수형태로 만들고자 하였는데 새로운 데이터 캐시 시스템을 만들었다.

쉽게 사용하여 use라는 접두사로 사용할수있는 API를 만들었고 이 API가 리액트 훅 함수라고 한다.

 

 

용도	훅
컴포넌트 데이터 관리	useMemo
	useCallback
	useState
	useReduser
컴포넌트 생명주기 대응	useEffect
	useLayoutEfeect
컴포넌트 정보공유	useContext
컴포넌트 메서드 호출	useRef