State와 Lifecycle의 정의

• react component 중 class component와 관련된 내용

state 상태

• JavaScript의 객체
• 리액트 component의 상태를 의미 -> 리액트 Component의 변경 가능한 데이터

• 개발자가 직접 정의함
• 중요한 점! 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함 / 그렇지 않은 값은 컴포넌트의 인스턴스 필드로 정의하면 됨

-> state가 변경될 경우 컴포넌트가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면 불필요한 경우에 컴포넌트가 다시 렌더링되어 성능을 저하시킬 수 있기 때문

 

모든 클래스 컴포넌트에는 Constructor 함수가 존재함 -> 생성자 함수이며 클래스가 생성될 때 실행되는 함수

 

class component -> state를 생성자에서 정의함

함수 컴포넌트 -> state를 useState라는 hook을 사용해서 정의

 

state는 직접적인 변경이 불가하기 때문에

setState함수를 사용해 수정한다.

 

Lifecycle 생명주기

: 컴포넌트가 생성되는 시점과 사라지는 시점이 정해져 있다는 의미

 

출생 Mount

• 컴포넌트의 Constructor 생성자가 실행됨 / 생성자에서는 컴포넌트의 state를 정의하게 됨
• 컴포넌트가 렌더링됨
• componentDidMount 함수가 호출됨

인생 Update

• 컴포넌트의 props가 변경
• setState함수 호출에 의해 state가 변경
• falseUpdate라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링됨
• 렌더링 이후 componentDidUpdate 함수 호출

사망 Unmount

• 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 unmount됨
• unmount 직전에 componentWillUnmount 함수가 호출됨

 

Con.

component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트 되다가 사라짐 -> 함수 컴포넌트에도 해당하는 내용임