REACT | 처음 만난 리액트 - 6. State and Lifecycle

1. State와 Lifecycle의 정의

State(상태)

: 리액트 컴포넌트의 변경 가능한 데이터, javascript 객체

렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함

그렇지 않으면 불필요한 렌더링이 되어 성능이 저하될 수 있기 때문

(관련 없는 값은 컴포넌트의 인스턴스 필드로 정의하면 됨)

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

state는 직접 수정할 수 없음 (하면 안됨)

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

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

 

Lifecycle(생명주기)

:리액트 컴포넌트의 생명주기 (거의 사용하지 않음)

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

- 출생: 컴포넌트가 생성되는 시점(Mount)

- 인생: 컴포넌트의 변화를 겪으면서 렌더링됨(Update)

- 사망: 상위 컴포넌트에서 현재 컴포넌트를 더이상 화면에 표시하지 않을 때(Unmount)