React의 R자도 몰랐던 내가 항해99 3주차 주특기 심화주차를 수강하며 이번 주차의 키워드인
라이프사이클과 react hooks에 대해 배운 것과 느낀점에 대해 기록하려고 남기는 글.
주특기 심화 진행기간: 2021-09-30 ~ 2021-10-08 (진행 중)
라이프사이클이란 컴포넌트가 렌더링 되고부터 사라지는 순간까지 즉, 말 그대로 컴포넌트의 생명주기를 뜻한다.
클래스형 컴포넌트에서 사용되는 개념이다.
출처:(https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)
위 사진은 클래스형 컴포넌트의 라이프사이클을 표현한 그림인데, 각각 생성, 업데이트, 소멸단계를 보여준다.
위 챕터에서 언급했듯이 클래스형에서는 컴포넌트가 생성, 업데이트, 소멸 되는 일련의 과정을 라이프사이클의 메소드(componentDidMount(),componentDidUpdate(), componentWillUnmount()등)를통해 관리한다.
별도로 React hook인 useEffect를 통해서 라이프사이클 구현이 가능하다.
useEffect(()=>{
//코드 작성
})
위처럼 라이프 사이클을 생성,
렌더링이 완료된 후 호출되는 메소드인
componentDidMount()는 아래 예시와 같이 위의 상태에서 2번째 파라미터를 주면 된다(주지 않고 위 상태로 사용 시 컴포넌트가 리렌더링 될 때마다 실행)
useEffect(()=>{
//코드 작성
},[])
그렇다면 컴포넌트 업데이트 작업 완료 후 실행되는 메소드인 componentDidUpdate() & getDerivedStateFromProps()는?
useEffect(()=>{
//코드 작성
},[props,state,...])
위와같이 두 번째 파라미터에준 props, state 등의 명시한 변수가 변경 될 때에 실행되도록 해주면 된다.
그렇다면 라이프사이클의 마지막 단계인 소멸은? (componentWillUnmount())
useEffect(()=>{
//코드 작성
return()=>{
//unmount 또는 unsubscribe 코드 작성
}
},[props,state,...])
위처럼 작성이 가능하다! (필요 없어 졌을 시 return함수를 실행하여 메모리를 반환해버림)