React - State & Lifecycle

React에서의 State

• 리액트 Component의 상태를 의미한다.
• 상태가 좋은지 나쁜지의 의미가 아닌 리액트 Component의 변경 가능한 데이터를 의미한다.
• state는 리액트 Component를 개발하는 개발자가 정의해서 사용한다.
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
• state가 변경될 경우 component가 리렌더링되기 때문에 렌더링과 데이터 흐름에 관련없는 값을 포함시키면 불필요하게 Component가 다시 렌더링되어 성능 저하의 원인이 되기 때문이다.
• 렌더링과 데이터 흐름에 관련없는 값은 Component에 인스턴스 필드로 정의하면 된다. 
• state는 자바스크립의 객체이다.

 

class LikeButton extends React.Component {
	constructor(props) {
    	super(props);
        
        this.state = { // Component의 state를 정의하는 부분
        	liked: false
        };
    }
    
    ...
}

• 모든 클래스 Component에는 constructor라는 생성자 함수가 존재한다.
• 이 생성자 함수는 클래스가 생성될 때 실행된다.
• 클래스 Component의 경우 state를 생성자에서 정의한다.
• 함수 Component는 state를 useState라는 hook을 사용해서 정의한다.
• state는 정의된 이후 일반적인 자바스크립트 변수를 다루듯이 직접 수정하면 안된다.
• 리액트의 state는 Component의 렌더링과 관련이 있기 때문에 직접 수정하게 되면 개발자의 의도와는 다르게 작동할 가능성이 있다.

 

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

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

 

 

Lifecycle

• 리액트 Component 역시 생성부터 소멸까지의 생명주기를 가진다.
• 생성(Mount) - 활동(Update) - 소멸(Unmount)
• Component는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.

 

 

 

참고

인프런 - 처음 만난 리액트