리액트의 생명주기
리액트 컴포넌트는 각각 Mount -> Update -> Unmount 의 과정을 거칩니다. 사람처럼 태어나고, 변화하고 죽는 것이다.
리액트 생명주기(라이프사이클)란, 컴포넌트 중심 라이브러리의 집합체라고 보시면 됩니다. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있어요.
함수형 컴포넌트의 생명주기
React Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동 할 수 있게 해주는 함수이다.
React Hook은 React 16.8버전 부터 React 요소로 새로 추가되었는데, Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
React Hook을 도입한 이유
- 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어 컴포넌트를
함수 단위로 잘게 쪼갤 수 있다는 점이다. - 라이프사이클 메서드에는 관련 없는 로직이 자주 섞여 들어가는데, 이로인해 버그가 쉽게 발생한다.
자주쓰이는(?) Hook의 종류
1. useState
const [state, setstate] = useState('')- 가장 기본적인 Hook이며, 함수형 컴포넌트에서 가변적인 상태를 가지게 해준다.
- useState의 업데이트 방식은 2가지가 있으며, 각각 다르게 동작
- useState로 원시데이터가 아닌 데이터를 변경할 때는 불변성을 유지해야 한다.
2. useEffect
// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳
useEffect(()=>{
// 실행하고 싶은 함수
}, [의존성배열])-
화면에 렌더링이 완료된 후에 수행되며componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것
-
useEffect안에서의 return은 정리 함수(clean-up)를 사용하기 위해 쓰여진다.
메모리 누수 방지를 위해 UI에서 컴포넌트를 제거하기 전에 수행
컴포넌트가 여러 번 렌더링 된다면 다음 effect가 수행되기 전에 이전 effect가 정리된다.
3. useContext
Context API를 통해 만들어진 Context에서 제공하는 Value를 가져올 수 있으며 전역의 상태값을 관리할 수 있게 해준다.
const value = useContext(MyContext);컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 이 Hook은 그 MyContext provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거 합니다.
※useContext를 사용할 때, Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다.
렌더링 관리 측면에서 상당히 어렵다고 한다.
4. useRef
특정 DOM 선택할때 주로 쓰이며 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지됩니다.
const refContainer = useRef(null);최적화
- React에서 리렌더링이 빈번하게, 자주 일어나는 것은 좋지 않다.
비용이 발생하는 것을 최대한 줄여야 하는데 이러한 작업을 최적화라고 부른다.
1. React.memo
메모이제이션 된 컴포넌트를 반환합니다.
React.memo는 함수형 컴퍼넌트에서도 메모이제이션의 장점을 얻게 해 주는 훌륭한 도구다.
올바르게 적용 된다면 변경되지 않은 동일한 prop에 대해 리렌더링을 하는 것을 막을 수 있다.
하지만 콜백함수를 prop으로 사용하는 컴포넌트에서 메모이징을 주의해야한다.
그리고 같은 렌더링을 할 때 이전과 동일한 콜백 함수를 넘기는지 또한 확실히 해야한다.
2. useCallback
메모이제이션 된 콜백을 반환합니다. useMemo와 유사하게 이용되며 '함수'에 적용해준다.
의존성이 변경되었을때만 변경됩니다. 때문에 특정 함수를 새로 만들지 않고 재사용가능하게 한다.
const Callback = useCallback(
() => {
initFunction(a, b);
},
[a, b],
);3. useMemo
메모이제이션된 값을 반환합니다. 이미 연산 된 값을 리렌더링 시 다시 계산하지 않도록 한다.
의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산, 의존성 배열이 없는 경우 매 렌더링 때마다 새 값을 계산합니다.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
※useMemo를 남발하게 되면 별도의 메모리 확보를 너무나 많이 하게 되기 때문에 오히려 성능이 악화될 수 있다.
