[15]_state Lifecycle, useRef, useEffect

1. State Lifecycle이란?

react 컴포넌트 안의 state와 생명주기를 말하며 각각의 라이프 사이클에 대해 원하는 동작을 써 넣을 수 있음.

2. State Lifecycle 순서

가. 그리기

render()

나. Mount

componentDidMount()

다. Updating

componentDidUpdate()

라. UnMounting

componentWillUnmount()

3. useRef()란?

react에서 DOM을 직접 선택해야 하는 상황이 발생하는데 useRef()함수를 사용한다. 예를 들어 특정 요소의 크기를 가져오거나 포커스를 설정해야 한다는 경우에 사용함

4. useRef()사용법

가. useRef를 import 해오고 변수를 선언해준다

const aaa = useRef()

나. useEffect를 하나 설정해주고

useEffect(() => {
	aaa.current?.focus()
}.[])

다. input태그에 바인드해준다

<input type = 'text' ref={aaa}/>

5. useEffect란?

앞서 말한 lifecycle을 함수형 컴포넌트에서 구현할 때 useEffect훅을 사용해서 구현한다.

6. useEffect 사용법

가. componentDidMount(), componentWillUnmount()

useEffect(() => {
didmount될시 실행코드
return () => {
unmount될시 실행코드
}
},[])

나. componentDidUpdate()

useEffect(() => {
didupdate될시 실행코드
})

7. 주의사항

가. 불필요한 렌더링

useEffect(() => {
    setCount(10);
 });

useEffect 내부에 setState를 쓰면 실행되고 재렌더링이 되므로 권장하지 않음

나. 무한루프

useEffect(() => {
    setCount((prev) => prev + 1);
    }, [count]);

이전의 값이 불러오면서 +1을 하는데 +1을 하면 다시 useEffect가 실행되므로 무한루프가 됨