React Life cycle: 언제 state 하면 안 될까?

라이프 사이클 다이어 그램

React 구성 요소에서는 예기치 않은 동작이나 무한 루프를 방지하기 위해 특정 수명 주기 메서드에서 상태 또는 소품 업데이트를 피해야 합니다. 다음은 다양한 수명 주기 메서드에서 상태 또는 소품을 업데이트하지 않는 경우에 대한 몇 가지 지침입니다.

• constructor: 생성자는 구성 요소가 생성될 때 호출되며 그 목적은 상태 및 바인딩 메서드를 초기화하는 것입니다. 예기치 않은 동작이 발생할 수 있으므로 여기에서 상태 또는 소품을 업데이트하지 마십시오.

• shouldComponentUpdate: 이 메서드는 구성 요소가 소품 또는 상태의 변경 사항을 기반으로 다시 렌더링해야 하는지 여부를 결정하는 데 사용됩니다. 무한 재렌더링 루프가 발생할 수 있으므로 이 메서드에서 상태 또는 소품을 업데이트하면 안 됩니다.

• render: render 메서드는 표시할 JSX를 반환하는 역할을 합니다. 이 메서드에서 상태나 소품을 업데이트하지 마세요. 다시 렌더링하는 무한 루프가 발생할 수 있습니다.

• componentWillUnmount: 이 메서드는 컴포넌트가 DOM에서 제거되기 전에 호출됩니다. 여기에서 상태나 소품을 업데이트하지 마십시오. 구성 요소가 곧 소멸될 예정이며 모든 업데이트가 불필요하고 오류가 발생할 수 있습니다.

상태나 소품을 업데이트할 때는 주로 다음과 같은 적절한 수명 주기 메서드 내에서 업데이트해야 합니다.

• componentDidMount: 이 메서드는 구성 요소가 DOM에 렌더링되면 호출됩니다. 데이터를 가져오거나 구독을 설정하거나 초기 소품을 기반으로 상태를 업데이트하기에 이상적인 장소입니다.

• componentDidUpdate: 이 메서드는 구성 요소가 업데이트된 후(즉, 다시 렌더링한 후) 호출됩니다. 이 메서드를 사용하여 소품 또는 상태의 변경에 따라 데이터 가져오기 또는 DOM 업데이트와 같은 부작용을 수행할 수 있습니다. 불필요한 업데이트나 무한 루프를 피하기 위해 이전 props 또는 state를 현재 것과 비교해야 합니다.

• 이벤트 핸들러: 이벤트 핸들러를 사용하여 버튼 클릭 또는 양식 제출과 같은 사용자 상호 작용에 대한 응답으로 상태 또는 소품을 업데이트할 수도 있습니다.

성능 문제 또는 의도하지 않은 부작용을 피하기 위해 상태 또는 소품을 업데이트할 때 항상 주의하고 적절한 수명 주기 메서드 및 이벤트 핸들러를 사용해야 합니다.

In a React component, you should avoid updating state or props in certain lifecycle methods to prevent unexpected behavior or infinite loops. Here are some guidelines on when not to update state or props in various lifecycle methods:

constructor: The constructor is called when a component is created, and its purpose is to initialize the state and bind methods. Avoid updating state or props here, as it can lead to unexpected behavior.

shouldComponentUpdate: This method is used to determine if a component should re-render based on changes in props or state. You should not update state or props in this method, as it may lead to an infinite loop of re-rendering.

render: The render method is responsible for returning the JSX to be displayed. Do not update state or props in this method, as it may cause an infinite loop of re-rendering.

componentWillUnmount: This method is called before a component is removed from the DOM. Avoid updating state or props here, as the component is about to be destroyed, and any updates would be unnecessary and may lead to errors.

When it comes to updating state or props, you should primarily do so within the appropriate lifecycle methods, such as:

componentDidMount: This method is called once the component has been rendered to the DOM. It is an ideal place to fetch data, set up subscriptions, or update state based on initial props.

componentDidUpdate: This method is called after a component has been updated (i.e., after a re-render). You can use this method to perform side effects, such as fetching data or updating the DOM, based on changes in props or state. Make sure to compare the previous props or state with the current ones to avoid unnecessary updates or infinite loops.

Event handlers: You can also update state or props in response to user interactions, such as button clicks or form submissions, using event handlers.

Always be cautious when updating state or props to avoid performance issues or unintended side effects, and make sure to use the appropriate lifecycle methods and event handlers.