React 라이프사이클(Life Cycle)
React의 각각의 컴포넌트는 컴포넌트의 생명주기, 라이프 사이클이 존재한다.
컴포넌트의 생명은 일반적으로 페이제이서 렌더링 되기 전 준비과정에서 시작해 페이지에서 사라질 때 끝이 난다.
이를 나타내는 LifeCycle Method는 클래스형 컴포넌트에서만 사용 하는 메서드인데 useEffect와 은근히 비슷하다고 생각하면 된다.
출처 : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
라이프 사이클의 유형
라이프 사이클은 크게 3가지 유형으로 나눌 수 있는데
- 생성 될 때(Mount)
- 업데이트 할 때(Update)
- 제거 할 때(Unmount)
로 나눌수 있다.
생성 될 때(Mount)는 DOM(Document Object Model)이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻한다.
업데이트 할 때(Update)는 다음과 같은 4가지 상황에서 발생한다.
- Props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제 렌더링 할 때
마지막으로 제거 할 때(Unmount)는 DOM에서 제거되는 것을 뜻한다.
그럼 위 사진의 내용들을 파악해 보자
리액트 사이클 메서드
constructor
컴포넌트가 처음 만들어질 때 실행되는 생성자(constructor)이다. 이 메서드에서 초기 state를 정할 수 있다.
클래스형에선 초기 state를 정할 때 constructor를 사용해야 한다.
훅에서는 useState hook를 사용하면 상태를 쉽게 생성 할 수 있다.
//Class형
class LifeCycle extends Component {
constructor(props) {
super(props);
}
//Hooks 함수형
const LifeCycle = ()=>{
const [test,setTest] = useState(0);
}
render
컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이다.
(렌더링이란 html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 말한다.)
함수형 컴포넌트에선 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.
컴포넌트의 props,state를 변경하지 않아야 하며, 호출될 때마다 같은 결과를 반환해야 한다는 특징이 있다.
// Class형
class LifeCycle extends Component {
render() {
return <h1>렌더링</h1>
}
}
// Hooks 함수형
const LifeCycle = () => {
return <h1>렌더링</h1>
}
componentDidMount
컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드이다. 이 메서드가 호출되는 시점에 우리가 만든 컴포넌트가 화면에 나타난 상태이다. DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.
이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행하며 함수형 컴포넌트에서는 useEffect를 통해 활용 할 수 있다.
//Class형
class LifeCycle extends Component {
componentDidMount() {
내용~
}
}
// Hooks 함수형
const LifeCycle = () => {
useEffect(() => {
내용~
}, []);
}
componentDidUpdate
재렌더링을 완료하고, 화면에 원하는 변화가 반영되고 난 뒤에 호출되는 메서드이다. 컴포넌트가 업데이트 되었을 떄, DOM을 조작할 떄
활용할 수 있다.
// Class 형
class LifeCycle extends Component {
componentDidUpdate(prevProps, prevState) {
내용~
}
}
// Hooks 함수형
const LifeCycle = () => {
useEffect(() => {
내용~
});
}
componentWillUnmount
이컴포넌트를 DOM에서 제거할 때 실행한다. 컴포넌트가 화면에서 사라지는 것을 의미하며 CoponentDIdMount에서 등록한 이벤트가 있다면 여기서 제거 해야한다.
// Class 형
class LifeCycle extends Component {
coomponentWillUnmount() {
내용~
}
}
// Hooks 함수형
const LifeCycle = () => {
useEffect(() => {
return () => {
내용~
}
}, []);
}
Author And Source
이 문제에 관하여(React 라이프사이클(Life Cycle)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@pomeranian91/React-라이프사이클Life-Cycle-함수편저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)