React 구성 요소 수명 주기

ReactJS는 사용자 인터페이스를 구축하는 데 사용되는 자바스크립트 라이브러리입니다.

구성 요소의 수명 주기를 이해하는 것은 사용자 친화적인 응용 프로그램을 구축하는 데 있어 기본입니다.

반응 구성 요소에는 초기화, 마운트, 업데이트 및 마운트 해제의 4가지 주요 단계가 있습니다.

INITIALIZATION
- The set-up phase where we set the state. It is usually done within the constructor method.

MOUNTING
- The process of placing elements onto the DOM.
- This will be the first time an element will be rendered on a page.

UPDATING
- occurs whenever there is a change to a component's STATE or PROPS.

UNMOUNTING
- As the name implies, this is when a component is REMOVED from the DOM

React 구성 요소에는 호출 시 수명 주기의 특정 단계에서 호출되는 메서드가 있습니다. 이들 중 대부분은 선택 사항이며 대부분 자명하지만 중요한 기능을 제공합니다.

하나씩 분해해 보겠습니다.

초기화

• constructor() - (optional**) Similar as using constructor in JS classes, constructor is used the same way in React passing in 'props' as an argument. Within the constructor scope is the invocation of super(props). Calling super will allow us access to variables from the parent class while passing in props will allow us to pass data from one component to another [3]

**constructor() 호출은 기술적으로 선택 사항이지만 일반적으로 다음 두 가지 이유로 호출하려고 합니다.

개체를 this.state에 할당하여 로컬 상태를 초기화합니다

.

이벤트 핸들러 메서드를 인스턴스에 바인딩하기 위해 [5]

class Example extends React.Component {
    constructor(props) { 
    super(props);
    this.state = {
     };
}

설치

• getDerivedStateFromProps() - (optional) called before render. Here we can set the state based on the initial props.[1]
• componentWillMount() - (optional) called before render. After this method, the component will get mounted.
• render() - (required) this method is what actually puts our HTML on the page. Once it is run, you will be able to see your component. When changes are made to the props/state this method will be invoked again to re-render the page.
• componentDidMount - (optional) called after render(). can be used to change the state after it has successfully rendered onto the page.

업데이트 중

• getDerivedStateFromProps() - (optional) same functionality when used in mounting. see above.
• shouldComponentUpdate() - (optional) returns a boolean. if set to false, the component will not update when a state/prop is changed. If true or not called, it will allow updates to occur. Essentially, this method makes a re-render optional.
• componentWillUpdate() - accepts two arguments: next props and next state. It is called once after shouldComponentUpdate and before a re-render.
• getSnapshotBeforeUpdate - (optional) accepts two arguments: previous props, and previous state. It allows the access to any props and stats before the component was updated. If using this method, you are required to have componentDidUpdate() called as well, otherwise there will be bugs on your app.
• componentDidUpdate() - (optional) called after a component is updated in the DOM [3].

마운트 해제

구성 요소를 마운트 해제하려고 할 때 실행되는 메서드는 componentWillUnmount()뿐입니다.

• componentWillUnmount() - (required) immediately after removing component from DOM, this will invoke. This denotes the end of a component's lifecycle and is required when properly trying to remove a component from the app.

[1] https://www.w3schools.com/react/react_lifecycle.asp
[2] https://www.javatpoint.com/react-constructor#:~:text=The%20constructor%20is%20a%20method,before%20the%20component%20is%20mounted .
[3] https://www.geeksforgeeks.org/whats-the-difference-between-super-and-superprops-in-react/
[4] https://www.freecodecamp.org/news/how-to-understand-a-components-lifecycle-methods-in-reactjs-e1a609840630/
[5] https://reactjs.org/docs/react-component.html#:~:text=If%20you%20don't%20initialize,props)%20before%20any%20other%20statement .