-
[React] 컴포넌트의 생명 주기Programing/React 2023. 7. 31. 12:21
리액트 컴포넌트의 생명주기(Life Cycle)는 컴포넌트가 생성되고, 업데이트되거나, 제거될 때 특정한 이벤트들을 호출하는 것을 의미한다. 리액트 컴포넌트는 다음과 같은 생명주기를 가지고 있다:
- constructor(): 컴포넌트가 처음 생성될 때 호출.
- getDerivedStateFromProps(): 컴포넌트가 처음 생성되거나 props가 변경될 때 호출된다. 이 메서드에서 state를 업데이트할 수 있다.
- render(): 컴포넌트가 렌더링될 때 호출된다. 이 메서드에서 컴포넌트의 HTML을 생성한다.
- componentDidMount(): 컴포넌트가 DOM에 마운트된 후 호출된다. 이 메서드에서 컴포넌트가 DOM과 상호작용하기 위한 작업을 수행할 수 있다.
- componentDidUpdate(): 컴포넌트가 업데이트된 후 호출된다. 이 메서드에서 컴포넌트의 상태가 변경된 후 수행할 작업을 구현할 수 있다.
- componentWillUnmount(): 컴포넌트가 DOM에서 언마운트되기 전에 호출된. 이 메서드에서 컴포넌트가 DOM과 상호작용하는 작업을 중지할 수 있다.
이 외에도 리액트 컴포넌트에는 다음과 같은 생명주기 메서드가 있습니다:
- static getDerivedStateFromProps(): constructor() 메서드와 비슷하지만, static으로 선언해야 한다.
- shouldComponentUpdate(): 컴포넌트가 업데이트되어야 하는지 여부를 결정하는 메서드이다.
- getSnapshotBeforeUpdate(): render() 메서드가 호출되기 전에 DOM의 상태를 가져오는 메서드이다.
리액트 컴포넌트의 생명주기 메서드는 컴포넌트의 특정 단계에서 특정 작업을 수행하기 위해 사용된다. 예를 들어, componentDidMount() 메서드는 컴포넌트가 DOM에 마운트된 후 통신을 시작하기 위해 사용될 수 있다.
리액트 컴포넌트의 생명주기 메서드는 선택적으로 구현할 수 있다. 하지만 특정 작업을 수행하기 위해 생명주기 메서드를 사용해야 하는 경우에는 반드시 구현해야 한다.
https://www.w3schools.com/react/react_lifecycle.asp
'Programing > React' 카테고리의 다른 글
[React Native] Enable/Disable debugging mode in android emulator (0) 2024.02.14 [React Native] Lifecycle of Class Component (0) 2024.02.13 [troubleshooting] Icon was not shown when using react-native-vector-icons (0) 2023.10.31 [React] Event.stopPropagation() (0) 2023.07.25 [React] Box (0) 2023.07.14