[React] State and Lifecycle

!해당 포스트는 처음 만난 리액트(React) - 소플 강의를 수강하면서 정리한 내용임.

State and Lifecycle

State

State는 React에서 중요한 개념

State - 리액트 Component의 변경 가능한 데이터

• state는 개발자가 직접 정의해서 사용
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함
  • state가 변경 될 경우 component가 재렌더링 되기 때문에 렌더링과 데이터 흐름과 관련 없는 값을 포함하면 불필요하게 컴포넌트가 다시 렌더링되어 성능이 저하된다.
  • 사용되지 않는 값은 컴포넌트의 인스턴스 필드로 정의
• state는 javascript 객체이다

 

class LikeButton extends React.Component{
	constructor(props){
		super(props);
		
		this.state={
			liked: false
		};
	}
	...
}

• 모든 클래스 컴포넌트에는 constructor(생성자)라는 함수가 존재
  • 클래스가 생성될 때 실행되는 함수
• this.state - 현재 컴포넌트의 state를 정의하는 부분
• 클래스 컴포넌트의 경우 state를 생성자(constructor)에서 정의
• 함수 컴포넌트의 경우 useState라는 hook을 사용해서 정의

 

//state를 직접 수정 (잘못된 사용법)
this.state = {
	name: 'Inje'
};

//setState 함수를 통한 수정 (정상적인 사용법)
this.setState({
	name: 'jiwon'
});

• state는 직접 수정할 수 없음
  • 리액트의 state는 컴포넌트 렌더링과 관련이 있기 때문에 수정하게 되면 개발자가 의도한 대로 작동하지 않을 가능성이 있음.
• setState 함수를 통해서 수정

 

Lifecycle

리액트의 컴포넌트는 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 소멸될 때 까지 일련의 과정을 말한다.

초록색 박스 - 생명주기에 따라서 호출되는 클래스 컴포넌트의 함수: Lifecycle method

 

Mounting

• 컴포넌트의 생성자가 실행됨
• 컴포넌트가 렌더링되며 이후에 componentDidMount 함수가 호출됨

 

Updating

• 컴포넌트의 props가 변경되거나 setState함수 호출에 의해 state가 변경되거나 forceUpdate() 함수를 통해 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링된다.
• 렌더링 이후에 componentDidUpdate 함수가 호출된다.

 

Unmounting

• 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않을 때 Unmount 된다고 한다.
• Unmount 직전에 componentWillUnmount 함수가 호출된다.

 

컴포넌트가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.