[리액트] State and LifeCycle

리액트에서 중요한 부분

State

영어단어로 상태를 의미하는데 리액트에서도 컴포넌트의 상태를 의미한다.

• 리액트 컴포넌트의 상태는 컴포넌트의 데이터라는 의미
• 리액트 컴포넌트의 변경가능한 데이터를 state라 부른다.
• state는 자바스크립트 객체 형태다.
• state는 개발자가 정의한다. 정의할 때 주의할 점
  • 렌더링과 데이터 흐름에 사용되는 데이터만 state에 포함해야 한다.
  • 관심 없는 값들은 컴포넌트의 인스턴스 필드에 정의하자, 관심 없는 값들까지 state에 포함되면 재렌더링 시 성능 이슈가 발생할 가능성이 있다.

 

클래스 컴포넌트는 생성자로 현재 state를 정의하고, setState 함수로 state들을 수정한다. (직접 수정은 잘못된 방법)

class LikeButton extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			liked: false
		};
	}	

	...

}

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

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

 

함수 컴포넌트는 Hook를 이용해서 state를 정의하고 수정한다.(useState)

 

컴포넌트의 LifeCycle

• 화면에 첫 렌더링, 컴포넌트의 생성자가 실행 Mounting
• 컴포넌트 props 변경, state 변경 등으로 다시 렌더링 Updating
• 상위 컴포넌트에서 현재 컴포넌트를 표시하지 않을 경우 UnMounting

리액트 컴포넌트는 생명주기에 따라 함수가 호출된다. 생명주기 함수 접근은 클래스 컴포넌트에서만 사용가능하다 함수 컴포넌트 경우엔 훅을 이용해서 생명 주기 함수에 접근할 수 있다.

Copyright soaple(https://www.inflearn.com/users/364684/@soaple)

 

 

인프런 처음 만난 리액트

[무료] 처음 만난 리액트(React) - 인프런 | 강의