[React] 라이프 사이클

이번에는 리액트 컴포넌트의 라이프 사이클에 대해 알아보겠습니다!

 

라이프 사이클

컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 라이프 사이클이라고 합니다.

[http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/]

위의 이미지는 리액트의 라이프 사이클을 보여주는 그림입니다. 

각각 어떤 역할을 하는지 알아보겠습니다.

 

라이프 사이클 유형

라이프 사이클을 크게 3가지 유형으로 나눌 수 있습니다. 

이는 생성될 때(Mount), 업데이트 할 때(Update), 제거할 때(Unmount) 입니다.

 

Mount

먼저, 마운트(Mount)에 대해서 설명하겠습니다. 

마운트는 DOM이 생성되고 웹 브라우저에 나타나는 것을 의미합니다.

 

Update

업데이트(Update)는 4가지 상황에 의해 발생합니다.

1. props가 변경될 때 (New props)
2. state가 변경될 때 (setState())
3. 부모 컴포넌트가 리렌더링 될 때
4. forceUpdate()로 강제렌더링 할 때

Unmount

언마운트(Unmount)는 마운트와 반대로 DOM에서 제거되는 것을 말합니다.

 

라이프 사이클 메서드

라이프 사이클 메서드는 주로 사용하는 것들만 보고 넘어가겠습니다.

또한, 함수형 컴포넌트에서는 어떻게 대체되는지 함께 확인하겠습니다.

 

constructor

constructor는 컴포넌트가 만들어질 때 가장 먼저 실행되는 생성자 메서드 입니다.

클래스형에서 초기 state를 정하기 위해 사용합니다.

// class
class LifeCycle extends React.Component {
  constructor(props) {
    super(props);
  }
}

// Hooks
const LifeCycle = () => {
  const [item, setItem] = useState('');
}

 

render

컴포넌트를 렌더링하는 메서드로 필수적이고 가장 중요한 메서드 입니다.

함수형 컴포넌트에선 render을 쓰지 않고 렌더링할 수 있습니다.

render 메서드에선 props나 state를 변경하지 않아야 합니다. (state가 바뀌면 다시 Update!)

// class
class LifeCycle extends React.Component {
  render() {
    return <div>렌더링!</div>
  }
}

// Hooks
const LifeCycle = () => {
  return <div>렌더링!</div>
}

 

componentDidMount

컴포넌트가 첫 번째 렌더링이 끝나면 호출되는 메서드입니다.

이 메서드가 호출이 될 때, 브라우저의 화면에서 컴포넌트를 볼 수 있습니다.

이 메서드는 주로 ajax 요청을 하거나, DOM 속성을 읽고, 직접 변경하는 작업을 수행합니다.

//class
class LifeCycle extends React.Component {
    componentDidMount() {
        // 마운트 로직
    }
}

// Hooks
const LifeCycle = () => {
    useEffect(() => {
       // 마운트 로직
    }, []);
}

 

componentDidUpdate

컴포넌트가 리렌더링이 된 이후에, 화면이 모두 그려지고 호출되는 메서드입니다.

이 메서드는 컴포넌트가 업데이트 되었을 때, DOM을 조작하는데 사용됩니다.

// class
class LifeCycle extends Component {
    componentDidUpdate(prevProps, prevState) {
        // 업데이트 로직
    }
}

// Hooks
const LifeCycle = () => {
    useEffect(() => {
        // 업데이트 로직
    });
}

 

 

componentWillUnmount

컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드입니다.

이 메서드는 주로 DOM에 직접 연결한 이벤트를 제거하고,

setTimeout이 있다면, clearTimeout 메서드로 제거하는 것과 같은 작업을 수행합니다.

// class
class LifeCycle extends React.Component {
    coomponentWillUnmount() {
        // 언마운트 로직
    }
}

// Hooks
const LifeCycle = () => {
    useEffect(() => {
        return () => {
            // 언마운트 로직
        }
    }, []);
}

 

정리

여기까지 리액트의 라이프 사이클에 대해 알아보았습니다.

또, 클래스형과 함수형 컴포넌트의 라이프 사이클 메서드 사용방법도 보았습니다.

함수형 컴포넌트의 useEffect가 완벽하게 같은 역할을 하는 것은 아니지만 유사하게 

수행하는 것 만큼 꼭 알아두시면 좋을 것 같습니다.!