React Hooks에서 componentWillMount ()를 사용하는 방법?

React Hooks에서 componentWillMount ()를 사용하는 방법?

---

React의 공식 문서에서 언급합니다-

React 클래스 수명주기 메서드에 익숙하다면 useEffect Hook을 componentDidMount, componentDidUpdate 및 componentWillUnmount가 결합 된 것으로 생각할 수 있습니다.

내 질문은- componentWillMount()후크에서 라이프 사이클 방법을 어떻게 사용할 수 있습니까?

---

후크에서 기존 수명주기 메서드 (componentDidMount, componentDidUpdate, componentWillUnmount 등)를 사용할 수 없으며 클래스 구성 요소에서만 사용할 수 있습니다. 그리고 후크는 기능적 구성 요소에서만 사용할 수 있습니다. React 문서의 아래 줄

React 클래스 수명주기 메서드에 익숙하다면 useEffect Hook을 componentDidMount, componentDidUpdate 및 componentWillUnmount가 결합 된 것으로 생각할 수 있습니다.

기능적 구성 요소의 클래스 구성 요소에서 이러한 수명주기 메서드를 모방 할 수 있습니다.

componentDidMount 내부의 코드 는 구성 요소가 마운트 될 때 한 번 실행됩니다. 이 동작에 해당하는 useEffect 후크는 다음과 같습니다.

useEffect(() => {
  // Your code here
}, []);

여기에서 두 번째 매개 변수 (빈 배열)를 확인하십시오. 이것은 한 번만 실행됩니다.

두 번째 매개 변수 가 없으면 위험 할 수있는 구성 요소의 모든 렌더링에서 useEffect 후크가 호출됩니다.

useEffect(() => {
  // Your code here
});

componentWillUnmount는 정리에 사용됩니다 (이벤트 목록 작성기 제거, 타이머 취소 등). 아래와 같이 componentDidMount에 이벤트리스트 너를 추가하고 componentWillUnmount에서 제거한다고 가정 해 보겠습니다.

componentDidMount() {
  window.addEventListener('mousemove', () => {})
}

componentWillUnmount() {
  window.removeEventListener('mousemove', () => {})
}

위 코드에 해당하는 후크는 다음과 같습니다.

useEffect(() => {
  window.addEventListener('mousemove', () => {});

  // returned function will be called on component unmount 
  return () => {
    window.removeEventListener('mousemove', () => {})
  }
}, [])

---

reactjs.org에 따르면 componentWillMount는 향후 지원되지 않습니다. https://reactjs.org/docs/react-component.html#unsafe_componentwillmount

componentWillMount를 사용할 필요가 없습니다.

컴포넌트가 마운트되기 전에 무언가를하고 싶다면 constructor ()에서하세요.

네트워크 요청을 수행하려면 componentWillMount에서 수행하지 마십시오. 이렇게하면 예기치 않은 버그가 발생하기 때문입니다.

네트워크 요청은 componentDidMount에서 수행 할 수 있습니다.

도움이 되었기를 바랍니다.

---

업데이트 : 08/03/2019

componentWillMount를 요청하는 이유는 아마도 렌더링 전에 상태를 초기화하기 때문일 것입니다.

useState에서 수행하십시오.

const helloWorld=()=>{
    const [value,setValue]=useState(0) //initialize your state here
    return <p>{value}</p>
}
export default helloWorld;

또는 예를 들어 원본 코드가 다음과 같은 경우 componentWillMount에서 함수를 실행하려고 할 수 있습니다.

componentWillMount(){
  console.log('componentWillMount')
}

후크를 사용하면 라이프 사이클 메소드를 제거하기 만하면됩니다.

const hookComponent=()=>{
    console.log('componentWillMount')
    return <p>you have transfered componeWillMount from class component into hook </p>
}

useEffect에 대한 첫 번째 답변에 무언가를 추가하고 싶습니다.

useEffect(()=>{})

useEffect는 모든 렌더링에서 실행되며 componentDidUpdate, componentDidMount 및 ComponentWillUnmount의 조합입니다.

 useEffect(()=>{},[])

useEffect에 빈 배열을 추가하면 구성 요소가 마운트 될 때만 실행됩니다. useEffect가 전달한 배열을 비교하기 때문입니다. 따라서 빈 배열 일 필요는 없으며 변경되지 않는 배열 일 수 있습니다. 예를 들어 [1,2,3] 또는 [ '1,2'] 일 수 있습니다. useEffect는 구성 요소가 마운트 된 경우에만 실행됩니다.

한 번만 실행하거나 매 렌더 후에 실행할지 여부는 사용자에 따라 다릅니다. 수행중인 작업을 알고있는 한 어레이를 추가하는 것을 잊은 경우에는 위험하지 않습니다.

후크 용 샘플을 만들었습니다. 그것을 확인하시기 바랍니다.

https://codesandbox.io/s/kw6xj153wr

---

21/08/2019에 업데이트 됨

위의 답변을 쓴 이후로 흰색이었습니다. 주의해야 할 점이 있습니다. 사용할 때

useEffect(()=>{},[])

react는 배열 []에 전달한 값을 비교할 때 Object.is ()를 사용하여 비교합니다. 다음과 같이 객체를 전달하는 경우

useEffect(()=>{},[{name:'Tom'}])

This is exactly the same as:

useEffect(()=>{})

It will re-render every time because when Object.is() compares an object, it compares its reference not the value itself. It is the same as why {}==={} returns false because their references are different. If you still want to compare the object itself not the reference, you can do something like this:

useEffect(()=>{},[JSON.stringify({name:'Tom'})])

---

useComponentDidMount hook

In most cases useComponentDidMount is the tool to use. It will run only once, after component has mounted(initial render).

 const useComponentDidMount = func => useEffect(func, []);

useComponentWillMount

It is important to note that in class components componentWillMount is considered legacy. If you need code to run only once before component has mounted, you can use the constructor. More about it here. Since functional component doesn't have the equivelant of a constructor, using a hook to run code only once before component mounts might make sense in certain cases. You can achieve it with a custom hook.

const useComponentWillMount = func => {
  const willMount = useRef(true);

  if (willMount.current) {
    func();
  }

  useComponentDidMount(() => {
    willMount.current = false;
  });
};

However, there is a pitfall. Don't use it to asynchronously set your state (e.x following a server request. As you might expect it to affect the initial rendering which it won't). Such cases should be handled with useComponentDidMount.

Demo

const Component = (props) => {
  useComponentWillMount(() => console.log("Runs only once before component mounts"));
  useComponentDidMount(() => console.log("Runs only once after component mounts"));
  ...

  return (
    <div>{...}</div>
  );
}

Full Demo

---

useLayoutEffect could accomplish this with an empty set of observers ([]) if the functionality is actually similar to componentWillMount -- it will run before the first content gets to the DOM -- though there are actually two updates but they are synchronous before drawing to the screen.

for example:

function MyComponent({ ...andItsProps }) {
     useLayoutEffect(()=> {
          console.log('I am about to render!');
     },[]);

     return (<div>some content</div>);
}

The benefit over useState with an initializer/setter or useEffect is though it may compute a render pass, there are no actual re-renders to the DOM that a user will notice, and it is run before the first noticable render, which is not the case for useEffect. The downside is of course a slight delay in your first render since a check/update has to happen before painting to screen. It really does depend on your use-case, though.

I think personally, useMemo is fine in some niche cases where you need to do something heavy -- as long as you keep in mind it is the exception vs the norm.

---

I wrote a custom hook that will run a function once before first render.

useBeforeFirstRender.js

import { useState, useEffect } from 'react'

export default (fun) => {
  const [hasRendered, setHasRendered] = useState(false)

  useEffect(() => setHasRendered(true), [hasRendered])

  if (!hasRendered) {
    fun()
  }
}

Usage:

import React, { useEffect } from 'react'
import useBeforeFirstRender from '../hooks/useBeforeFirstRender'


export default () => { 
  useBeforeFirstRender(() => {
    console.log('Do stuff here')
  })

  return (
    <div>
      My component
    </div>
  )
}

---

https://reactjs.org/docs/hooks-reference.html#usememo

Remember that the function passed to useMemo runs during rendering. Don’t do anything there that you wouldn’t normally do while rendering. For example, side effects belong in useEffect, not useMemo.

참고URL : https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks