React Life-cycle

dudgus5766·2022년 6월 19일
1

Junior Developer

목록 보기
7/18
post-thumbnail

모든 리액트 컴포넌트에는 라이프 사이클이 존재합니다.
컴포넌트는 ‘생성(mounting) -> 업데이트(updating) -> 제거(unmounting)’ 의 생명주기를 갖습니다.

클래스 컴포넌트라이프사이클 메서드를 활용하고 함수형 컴포넌트Hook을 사용합니다.

React Hook

useState

동적으로 바뀌는 값을 관리할 때 사용, 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.

const [state, setState] = useState(initialState); // 선언

setState( newState ); // 렌더링 시에 갱신

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업(effect)을 실행하도록 하는 Hook 입니다.
useEffect는 useEffect(callBackFunc, dependencies) 로 두개의 인자를 넣어 호출합니다.

1️⃣ useEffect(callBackFunc);

2️⃣ useEffect(callBackFunc,[]);

3️⃣ useEffect(callBackFunc,[state1, state2]);

4️⃣ useEffect(()=>{return(() => func())});


1️⃣ : 렌더링이 될 때마다(컴포넌트 마운트, 업데이트, 언마운트 되기 전) 실행

2️⃣ : 최초 렌더링이 실행될 때만 실행 (= ComponentDidMount)

3️⃣ : 최초 렌더링 + state1 이나 state2가 변경될 때 실행

4️⃣ : clean-up이라고 하는 함수를 return에서 실행할 수 있음. Unmount 되거나 Unscribe 해야하는 것들을 처리 (= ComponentWillUnmount)

useLayoutEffect

state의 값이 바뀌어서 화면이 깜빡거리거나 DOM을 호출하기 전에 무언가를 변경하고 싶을 때 사용.
화면을 그리기 바로 직전에 실행할 수 있는 Hook.

useEffect로 전달된 함수는 컴포넌트 렌더링 - 화면 업데이트 - useEffect실행 순으로 실행이 되기 때문에, useLayoutEffect()를 활용하여 컴포넌트 렌더링 - useLayoutEffect 실행 - 화면 업데이트 순으로 effect를 실행시킬 수 있습니다.

profile
RN App Developer

0개의 댓글