State and Lifecycle

State

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

 

state는 개발자가 정의하며 Javascript 객체이다.

 

State 정의시 중요한 점

반드시 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함
왜냐하면 컴포넌트가 불필요하게 다시 렌더링되어 성능저하를 유발시킴
그렇지 않은 값은 인스턴스 필드로 정의

 

 

 

class LikeButton extends React.Component {
    // 생성자
    constructor(props) {
        super(props);

        // state 정의부
        this.state = {
            liked: false
        };
    }

    ...
}

// state는 컴포넌트의 렌더링과 관련이 있어
// 임의로 수정시 개발자의 의도대로 작동하지 않을 가능성이 있음
// 고로 setState로 state값을 변경해야 한다.

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

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

 

 

LifeCycle

리액트 Component의 생명주기

 

 

---

Referenced By

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

https://react.vlpt.us/basic/25-lifecycle.html

25. LifeCycle Method · GitBook