리액트 컴포넌트 마운트란?
지난 시간에는 '렌더링'에 대해서 살펴봤습니다.
리액트 컴포넌트 렌더링이란?
함수형 컴포넌트를 코딩할 때 JSX로 만듭니다. 이렇게 만들어진 컴포넌트는 프로그램이 실행되면 가상 돔(Virtual Dom)에 탑재되는데요. 이것을 렌더링(Rendering)이라고 합니다.가상 돔에 탑재된 컴포
hoazzinews.tistory.com
지난 시간에 이어서 이번시간에는 컴포넌트 '마운트(mount)'에 대해서 살펴보겠습니다.
1. 마운트(mount), 업데이트(update), 언마운트(unmount) 란?
가상 돔(Virtual DOM)에 렌더링된 컴포넌트가 실제 돔으로 최초 커밋되는 것을 '마운트(mount)'라고 합니다.
마운트와 함께 알아되는 내용으로 '업데이트(update)'와 '언마운트(Unmount)'가 있는데요, 업데이트는 컴포넌트의 상태가 변경된 후 재 렌더링 되어 실제 돔에 다시 커밋되는 것을 뜻합니다. 그리고 언마운트는 컴포넌트가 실제 돔에서 제거되는 것을 뜻합니다.
- 마운트(mount): 가상 돔의 컴포넌트가 실제 돔에 '커밋' 되는 것
- 업데이트(update): 컴포넌트의 상태가 변경되어 재 렌더링 되고 실제 돔에 업데이트 되는 것
- 언마운트(mount): 컴포넌트가 실제 돔에서 제거되는 것
2. 컴포넌트 생명주기(Life cycle)
위에서 살펴본 컴포넌트의 마운트, 업데이트 그리고 언마운트를 '컴포넌트의 생명주기'라고 합니다.
생명 주기(Life cycle)란, 마치 사람이 태어나서 성장과정을 거쳐 생을 마감하듯이 컴포넌트도 처음 생성돼서 업데이트를 하다가 사라지는 과정을 뜻합니다.
- 컴포넌트 생성(마운트): 컴포넌트가 생성되는 것
- 컴포넌트 업데이트(업데이트): 컴포넌트가 변화는 것
- 컴포넌트 사라짐(언마운트): 컴포넌트가 사라지는 것
3. useEffect 훅
개발자는 각각의 생명 주기 시점에 특정 함수(콜백)를 등록하고 실행할 수 있는데요, 이때 사용되는 훅이 useEffect입니다.
다음은 useEffect 훅의 기본 코드입니다.
useEffect(() => {
// 컴포넌트가 마운트된 직후 실행
// 컴포넌트가 업데이트된 직후 실행
});
useEffect()에 파라미터로 익명 함수(Anonymous function)를 이용해서 콜백 함수를 등록했습니다. 이렇게 하면 컴포넌트가 처음 생성되는 시점(마운트)에 콜백 함수를 호출합니다. 그리고 이후 컴포넌트의 상태가 변경되어 업데이트될 때마다 계속해서 콜백 함수를 호출합니다. 결과적으로 개발자는 컴포넌트가 마운트될 때, 그리고 업데이트될 때마다 특정 작업을 실행하려면 콜백 함수를 이용하면 됩니다. 또한 콜백 함수는 비동기(Asynchronous) 방식으로 실행됩니다.
더 이상 컴포넌트가 필요 없어서 화면에서 삭제되는 시점(언마운트)에 특정 작업을 하려면 useEffect() 에서 또 다른 익명 함수를 반환(return) 하면 됩니다.
useEffect(() => {
// 컴포넌트가 마운트된 직후 실행
// 컴포넌트가 업데이트된 직후 실행
return () => {
// 컴포넌트가 언마운트 되기 직전 실행
}
});
4. 의존성 배열(Dependency Array)
useEffect 훅을 사용할 때 컴포넌트가 생성되는 시점(마운트)과 제거되는 시점(언마운트)에만 특정 작업을 하거나 또는 특정 상태 값이 변화할 때만 특정 작업을 하려면 의존성 배열을 사용하면 됩니다. 의존성 배열은 useEffect의 두 번째 파라미터에 명시하면 됩니다.
useEffect(() => {
// 컴포넌트가 마운트될 때 실행
// 컴포넌트가 업데이트될 때 실행
return () => {
// 컴포넌트가 언마운트될 때 실행
}
}, []); // 의존성 배열이렇게 길이가 0인 의존성 배열을 명시하면 useEffect의 콜백 함수는 컴포넌트가 마운트 될 때와 언마운트될 때만 실행하고 업데이트 될때는 실행하지 않습니다.
만약 특정 상태값이 변경될때 useEffect의 콜백 함수를 실행하려면 의존성 배열에 추가하면 됩니다.
const [flag, setFlag] = useState(false);
useEffect(() => {
// 컴포넌트가 마운트될 때 실행
// 컴포넌트가 업데이트될 때 실행
return () => {
// 컴포넌트가 언마운트될 때 실행
}
}, [flag]); // 의존성 배열의존성 배열에 flag 값을 명시하면 useEffect의 콜백 함수는 마운트될 때 한번 실행하고, flag 상태 값이 변경될 때마다 매번 실행됩니다. 그리고 컴포넌트가 언마운트될 때 반환하는 콜백 함수가 한번 실행됩니다.
처음 프로그램을 경험하는 입문자의 경우 useEffect 훅의 사용방법이 조금은 어려울 수 있습니다. 다음 상황들을 통해서 이해하면 쉽게 이해될 수 있습니다.
※ 참고. 사실 어려운 게 아니고 처음 접하는 내용이다 보니 낯선 거예요. 자주 사용해서 익숙해지면 됩니다.
상황1: 컴포넌트 마운트와 업데이트 시 특정 작업을 하겠다.
useEffect(() => {
// 마운트, 업데이트 시 작업
});
상황2: 컴포넌트 마운트와 업데이트 그리고 언마운트 시 특정 작업을 하겠다.
useEffect(() => {
// 마운트, 업데이트 시 작업
return () => {
// 언마운트 시 작업
}
});
상황3: 컴포넌트 마운트 시에만 특정 작업을 하겠다.
useEffect(() => {
// 마운트 시 작업
}, []);
상황4: 컴포넌트 마운트와 언마운트 시 특정 작업을 하겠다.
useEffect(() => {
// 마운트 시 작업
return () => {
// 언마운트 시 작업
}
}, []);
상황5: 컴포넌트 마운트와 특정 상태(state1)값 변경 시 특정 작업을 하겠다.
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
useEffect(() => {
// 마운트 시 작업
// state1 변경 시 작업
}, [state1]);
상황6: 컴포넌트 마운트와 특정 상태(state1, state2)값 변경 시 특정 작업을 하겠다.
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
useEffect(() => {
// 마운트 시 작업
// state1 또는 state2 변경 시 작업
}, [state1, state2]);
상황7: 컴포넌트 마운트와 특정 상태(state1, state2)값 변경 그리고 언마운트 시 특정 작업을 하겠다.
const [state1, setState1] = useState(0);
const [state2, setState2] = useState(0);
useEffect(() => {
// 마운트 시 작업
// state1 또는 state2 변경 시 작업
return () => {
// 언마운트 시 작업
}
}, [state1, state2]);
리액트에서 컴포넌트 생명 주기의 개념과 이를 이용한 useEffect 훅은 기본이면서 중요한 내용입니다. 꼭 익숙해지세요.