State와 Lifecycle의 정의 [처음 만난 리액트 #20]

6강. State and Lifecycle

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

State와 Lifecycle은 주로 클래스 컴포넌트와 관련된 내용

● State라는 개념은 함수 컴포넌트에서도 사용하기 때문에 개념을 확실히 이해하고 넘어가야 함

● Lifecycle는 클래스 컴포넌트에서만 사용하는 개념 - 최근에는 클래스 컴포넌트를 거의 사용하지 않기 때문에 이런 개념이 있다 정도만 알아두면 됨

 

---

State

리액트 Component의 상태 (= 리액트 Component의 데이터)

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

 

● state는 사전에 미리 정의된 것이 아니라, 리액트 컴포넌트를 개발하는 개발자가 정의함

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

(state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에 렌더링이나 데이터 흐름에 관련없는 값을 포함하면 불필요한 경우에 컴포넌트가 재렌더링되어 성능을 저하시킬 수 있기 때문)

렌더링이나 데이터 흐름에 사용되지 않는 값은 컴포넌트의 인스턴스 필드로 정의

 

---

state는 JavaScript 객체이다

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

 

▲ LikeButton이라는 리액트 컴포넌트

모든 클래스 컴포넌트에는 constructor(생성자)라는 이름의 함수가 존재

constructor(생성자): 클래스가 생성될 때 실행되는 함수 

 

생성자에 this.state가 현재 컴포넌트의 state를 정의하는 부분

 

● 클래스 컴포넌트의 경우 state를 생성자에서 정의 

● 함수 컴포넌트는 state를 useState라는 hook을 사용해서 정의

 

---

State는 직접 수정할 수 없다 (하면 안된다)

state는 정의된 이후 일반적인 자바 스크립트 변수를 다루듯이 직접 수정할 수 없음

(수정이 가능하기는 하지만, 그렇게 해서는 안됨)

 

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

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

 

리액트에서의 state는 컴포넌트의 렌더링과 관련이 있기 때문에 마음대로 수정하게 되면 개발자가 의도한 대로 작동하지 않을 가능성이 있음

-> 클래스 컴포넌트에서 state를 변경하고자 할 때에는 꼭 setState라는 함수를 사용해야 함

 

---

Lifecycle

리액트 컴포넌트의 생명주기

 

 

● 리액트 클래스 컴포넌트의 생명주기는 출생, 인생, 사망으로 나누어짐

● Liftcycle method (생명주기 함수) : 각 과정 하단에 초록색으로 표시된 부분, 생명주기에 따라 호출되는 클래스 컴포넌트의 함수

 

단계별 생성주기 

● 출생

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

- 이 때 컴포넌트의 constructor(생성자)가 실행됨 : 생성자에서는 컴포넌트의 state를 정의 

- 이후 컴포넌트가 렌더링되고, componentDidMount 함수가 호출

 

● 인생 

- Udate 과정: 생애동안 변화를 겪으면서 여러 번 렌더링됨

- 컴포넌트의 props가 변경되거나, setState() 함수 호출에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링됨

- 렌더링 이후에 componentDidUpdate 함수가 호출

 

● 사망

- 컴포넌트가 사라지는 과정 (Unmount)

- 컴포넌트는 언제 unmount될까? 상위 컴포넌트가 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 

- unmount 직전에 componentWillUnmount 함수가 호출

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