[React] React의 라이프사이클

References

https://kyun2da.dev/react/리액트-라이프사이클의-이해/

https://velog.io/@minbr0ther/React.js-리액트-라이프사이클life-cycle-순서-역할

https://react.vlpt.us/basic

 

 

서론

React에서 데이터가 업데이트 되는 상황은 기본적으로 4가지이다.

1. props가 바뀌는 경우
2. state가 바뀌는 경우
3. 부모 Component가 다시 렌더링 되는 경우
4. Force Update 기능으로 인해 강제로 다시 렌더링 되는 경우

이러한 이벤트를 원활하게 처리하기 위해선 라이프사이클(Life-Cycle)이 필요한데 React에서는 어떤 방식으로 흘러가는지 기술한다.

 

 

React의 라이프사이클 (Hooks)

React의 라이프사이클은 크게 Mounting(생성) ⇒ Updating(변경) ⇒ UnMounting(삭제) 으로 이루어진다.

 

useState

컴포넌트 내부의 데이터 상태를 관리하는 기능으로 state와 setState의 형식으로 처리된다.

function App() {
    const [number, setNumber] = useState(0);

    // setState를 통한 데이터 변경
    return (
        <button onClick={() => setNumber(number + 1)}>숫자 증가</button>
        <button onClick={() => setNumber(number - 1)}>숫자 감소</button>
    );
}

 

useEffect

화면이 렌더링 된 후 수행되는 기능으로, 컴포넌트의 최적화를 목적으로 사용된다.

// DOM이 업데이트 될 때 호출
useEffect(() => {}); 

// DOM이 최초로 생성될 때만 호출
useEffect(() => {}, []); 

// 특정 DOM만 최초로 생성될 때 호출, 특정 DOM 중 하나라도 변경되어도 다시 호출
useEffect(() => {}, [DOM 1, DOM 2]); 

useEffect의 경우 기존 클래스 형 에서의 componentDidMount와 componentDidUpdate , componentWillUnmoun 기능이 합쳐졌다.

 

useContext

Context API*를 이용한 상태 값을 가져오는데 사용된다.

const value = useContext(사전에 정의한 Context 기능);

Context API : React에서 전역적으로 상태를 관리하는 API. 과도한 props로 인한 로직 추적의 어려움을 개선해준다.

 

useReducer

useState와 비슷한 기능으로, 컴포넌트 상에서 업데이트하는 상태 로직을 외부로 분리할 수 있다.

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

function Counter() {
    const [number, dispatch] = useReducer(reducer, 0);

    const onIncrease = () => {
        dispatch({ type: 'INCREMENT' });
    };

    const onDecrease = () => {
        dispatch({ type: 'DECREMENT' });
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>숫자 증가</button>
            <button onClick={onDecrease}>숫자 감소</button>
        </div>
    );
}

reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

 

useRef

특정 DOM를 가리킬 때 사용되며 useRef의 .current로 전달된 인자로 초기화된 변경 가능한 ref 객체로 반환한다. 이때, 반환된 객체는 라이프사이클에 따라 유지되어 사라진다.

function InputSample() {
    const [name, setName] = useState('');
    const nameInput = useRef();

    const onReset = () => {
        setInputs(name = '');
        nameInput.current.focus();
    };

    return (
        <div>
            <input
              name="name"
              placeholder="이름"
              value={ name }
              ref={ nameInput }
            />
            <button onClick={ onReset }>초기화</button>
        </div>
    );
}

 

useMemo

메모이제이션 된 값을 반환하는 기능으로, 이미 연산 된 값을 재활용한다.

// 메모이제이션 된 특정 데이터가 없는 경우 렌더링 될 때마다 다시 계산
useMemo(() => computeExpensiveValue(state), []);

// 메모이제이션 된 특정 데이터가 변경될 때 다시 계산
useMemo(() => computeExpensiveValue(state1, state2), [state1]);

메모이제이션 : 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

 

useCallback

메모이제이션 된 Callback을 반환하는 기능으로, 이미 연산 된 함수를 재활용한다.

useCallback(() => { 함수(a, b); },
    [a, b],
);