[Reacte] Event setState 함수

 

 

 

📌 Event setState 함수 이해하기

---

반응형

return (
            <div className="App">
                {/* State화 하기 전 코드 */}
                {/*<Subject title="WEB" sub="word wide web!"></Subject>*/}

                {/*State화 한 뒤 코드*/}
                {/*<Subject title={this.state.subject.title} sub={this.state.subject.sub}></Subject>*/}

                <header>
                    <h1><a href ="/" onClick={function (e) {
                        // this.state.mode = 'welcome'
                        this.setState({
                            mode:'welcome'
                        });
                    }.bind(this)}>{this.state.subject.title}</a></h1>
                    {this.state.subject.sub}
                </header>

                <Nav data = {this.state.contents}> </Nav>
                <Content title={_title} desc={_desc}> </Content>
            </div>

 

위와 같은 코드에서 컴포넌트가 이미 생성된 이후에 [this.state.mode = 'welcome']처럼 State 값을 직접 변경하면 안되고, 함수 형태로 변경해야 하는 이유를 알아볼 것이에요.

 

 constructor(props) {
        // State 값을 초기화 시키기 위함이고, 그 초기값으로 'title="WEB" sub="word wide web!"'을 설정하려 한다.
        super(props);
        this.state = {
            mode : 'read',
            subject:{title:'Web', sub:'World Wide Web!'},
            welcome : {title:'Welcome', desc : 'Hello, React!!!'},
            contents: [
                {id:1, title:'HTML', desc: 'HTML is for information'},
                {id:2, title:'CSS', desc: 'CSS is for desing'},
                {id:3, title:'JavaScript', desc: 'JavaScript is for interative'}
            ]
        }
    } // constructor() 끝

 

먼저 위에서 생성자가 App이라는 컴포넌트가 생성될 때 가장 먼저 실행되는 
Constructor에서는 this.state = { ... }와 같이 이런식으로 설정하면 되는 것이에요.

하지만, 이미 컴포넌트가 생성이 끝난 뒤에 동적으로 State 값을 바꾸고자 할 때는 위와 같이 하면 안된답니다!


그것이 바로 [this.state.mode = 'welcome']과 같이 하는 것이에요.
이렇게 하면 안되는 것이에요.

이럴 때 this.setState()에 Body부에 내가 설정하고자 하는 내용을 객체 형태로 줘야 한답니다!

그 이유는 무엇일까? 리엑트 입장에서는 [this.state.mode = 'welcome']처럼 바꿔버리면 리엑트 모르게 몰래 바꾼것과 같은 것이에요.
그래서 모르는 거닌까 랜더링을 할 수 없는 것이에요.

그렇기 때문에 State 값이 바뀌면 setState를 써야한답니다!

 

 

---

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글 그리고 방명록은 주니하랑에게 많은 힘이 됩니다.