[React공식문서읽기] State 와 Lifecycle

React 컴포넌트의 상태(State)와 생명주기(Lifecycle)

State

React는 트리형태이고, 자식 컴포넌트는 필요한 데이터를 부모 컴포넌트로부터 Props(Properties)를 받아서 사용을 할 수 있다. 하지만 Props는 읽기전용(props를 수정하면 안된다)이므로 컴포넌트 내에서 데이터의 수정이 필요한 경우에 state에서 변경할 데이터를 관리한다. 따라서 모든 컴포넌트는 state를 가지고 있다. state에서 데이터의 변경을 감지하면 데이터가 변경된 컴포넌트와 그 자식컴포넌트는 Rerendering하여 화면에 출력한다.

state는 React의 컴포넌트 내에서 관리되는 일반 Javascript객체이다.

 

클래스 컴포넌트에서 state 키워드로 데이터를 할당하고, 데이터 변경이 필요하면 setState키워드로 데이터를 변경할 수 있다.

state = {
	data : ""
};

setState({
	data : "변경된값"
});

함수 컴포넌트에서 setState Hook을 이용하여 state를 관리할 수 있다.

const [data, setData] = useState("");
setData("변경된 데이터");
console.log(data);

 

setState 호출은 비동기적으로 이뤄지며 setState 호출 직후 새로운 값이 바로 화면에 반영되지는 않는다. 따라서 연산이 연달아 일어날 경우 잘못된 값을 전달할 수도 있다.

이러한 일을 방지하기 위해 setState에 update하는 함수를 전달하면 해결할 수 있다.

//작동시 increamentCount()함수는 3번 호출되었지만, state의 count는 1으로 Rendering된다.
class Components extends React.Component{
	state = {
    	count : 0
    };
	increamentCount(){
    	this.setState({
        	count : this.state.count + 1
        });
    }
    
    somethingEvent(){
    	this.increamentCount();
        this.increamentCount();
        this.increamentCount();
	}
}

//작동시 state의 count는 3으로 Rendering된다.
class Components extends React.Component{
	state = {
    	count : 0
    };
	increamentCount(){
    	//this.state가 아닌 이전의 state값을 읽어오고, 순차적 처리되므로 3으로 출력.
    	this.setState((state) => {
        	return {
            	count : state.count + 1
            };
        });
    }
    
    somethingEvent(){
    	this.increamentCount();
        this.increamentCount();
        this.increamentCount();
	}
}

 

Lifecycle Method

클래스 컴포넌트에서 생명주기 메소드를 사용할 수 있다.

컴포넌트에서 변화가 발생할 때 마다 생명주기 메소드를 호출한다.

출처 :  https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

클래스 컴포넌트가 화면에 생성될 때 Monting, 화면을 업데이트할 때 Updating, 화면에서 제거할 때 Unmounting 된다고 한다.

Mounting

 - constructor : 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 Method

 - getDerivedStateFromProps : props를 state에 넣을때 사용

 - render : 컴포넌트를 Rendering할때 사용

 - componentDidMount : 컴포넌트의 첫번째 Rendering이 끝나면 호출되는 Method(화면에 컴포넌트가 나타난 상태),

주로 외부 라이브러리 연동, Server에 Request, dom의 속성을 읽거나 변경함.

 

Updating

 - getDerivedStateFromProps : props를 state에 넣을때 사용

 - shouldComponentUpdate : 컴포넌트의 Rerendering여부를 결정함. 최적화 필요시 사용

 - render : 컴포넌트를 Rendering할때 사용

 - getSnapshotBeforeUpdate : 컴포넌트의 변화가 일어나기 직전의 DOM상태의 값을 return하여 componentDidUpdate 함수에서 받아서 사용할 수 있도록 해주는 Method

 - componentDidUpdate : Rerendering 후 호출되는 Method, 3번째 parameter에서 getSnapshotBeforeUpdate Method에서 return한 값(직전의 상태 값)을 가져올 수 있다.

 

Unmounting

 - componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출, 해제해야 할 event가 있다면 여기서 해제할 것.

 

참고1 : ko.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

참고2 : react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook