[React] State

 

📌 State

---

State는 Props와 비교해서 공부를 해야 하는 것이에요.

제품을 기준으로 이용자의 입장이 있고, 이를 구현하는 제작자 입장이 있을 것이에요. 예를 들어 핸드폰의 경우 버튼들이 있을건데, 이것을 UI (User Interface)라고 하고, 컴포넌트를 만드는 리엑트에서는 이용자가 이용하는 장치 즉, UI라고 생각할 수 있답니다.

그러면 제품을 만드는 사람들은 내부적인 구현을 위해 다양한 상태들, 내부적 조작장치들을 가지고 사용하는데, 이걸 State라고 할 수 있답니다.

즉, 이용자가 컴포넌트를 사용하는데 관점을 맞춘것이 Props이고, 제품을 만드는 사람들의 관점에 맞춘것이 State라고 할 수 있답니다.

컴포넌트에 props를 이용한다는 것은 아래 코드를 보았을 때,

반응형

<Component props_name = "props_value">

가 있다면 props를 통해 컴포넌트를 조작할 수 있게 된답니다. 따라서 Props는 이용자에게 컴포넌트를 이용할 수 있는 정보인 것이에요.

컴포넌트 내부적으로 사용되는 것들을 State라고 하고, 이용자는 이를 알아서도 안되고, 알 필요도 없답니다.

결국 State와 Props는 철저하게 분리되어야 한답니다.

 

 

 

컴포넌트가 실행 될 때, Constructor는 초기화를 할 때 사용을 하는데, render() 보다 먼저 실행이 되면서 그 컴포넌트를 초기화 시켜주고 싶은 코드는 이 Constructor 안에다가 코드를 작성하면 된답니다.

Constructor 기본 틀

Constructor(props) {
  super(props);

  // 코드 작성

}

Constructor(props) {
  super(props);
  this.state = {
      subject:{title:'Web', sub:'World Wide Web!'}
  }
}

위의 this.state 안에 subject라는 컴포넌트에 title은 web이고, sub는 World Wide Web으로 설정한다는 뜻이다.

상위 컴포넌트 (Constructor)에서 하위 컴포넌트 

            <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>
                <Nav></Nav>
                <Content title="HTML" desc="HTML is HyperText Markup Language."></Content>
            </div>

(위의 Subject Tag로 상위 컴포넌트 내용을 하위 컴포넌트의 props로 전달)로 내용을 전달하는 것은 얼마든지 가능

예를 들어 자동차에 엔진이 항상 보이게 툭 튀어 나와있다면 이용자는 엔진을 알 필요가 없는데, 이게 과연 좋은 제품일까요? 아니에요!

이용하는 쪽과 구현하는 쪽을 철저히 분리하는 것이 좋은 제품이고, 리엑트도 마찬가지인 것이에요.

 

 

---

 

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