component State (부제. state와 props의 차이점)

 

 

State와 props의 차이점은 무엇인가?

---

props("properties"의 줄임말)와 state는 일반 JS객체이다. 

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지고 있으나, 

한 가지 중요한 방식에서 차이가 있다. 

 

props : (함수 매개변수처럼) 컴포넌트에 전달됨.

state: (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됨.

 

 

 

더 자세히 알아보자. 

 

Props

---

props는 properties의 줄임말로써, Component로 데이터를 전달한다.

 

render (
    <div>
      <MoviePoster posterUrl="[image_url]" title="title"/>
      <h1>Hello movies!</h1>
      <h6>{this.props.title}</h6>
    </div>
)


class MoviePoster extends Component {
    render() {
        return (
            <img src={this.props.posterUrl}/>
            <h6>{this.props.posterUrl}</h6>
        );
    }
}

 

위 코드와 같이 props는 데이터를 컴포넌트 간 전달하기 위해 쓰여진다.

props는 단지 데이터를 전달 하기 위해 쓰일뿐, 데이터를 변경하지는 않는다.

(setProps, relaceProps로 변경이 가능했지만 지금은 지원하지 않음)

즉, props가 입력되면 항상 동일한 출력으로 렌더링 되어야 한다. 

 

 

 

state

---

state는 데이터를 유지하고 저장한다.  (담는 그릇같은 느낌)

데이터를 유지한다는 측면에서는 props와 같다. 

차이점은 state는 컴포넌트 내에서 생성하고 활동한다. 그리고 데이터를 변경할 수 있다. 

아래 코드는 클릭을 하면 클릭 수를 카운트 하는 코드이다. 

 

class Button extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }

  render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }
}

 

위 코드를 보면 알 수 있듯이 state는 컴포넌트 내에 state={} 이와 같이 초기화 할 수 있으며, 

중간에 setTimeout안에서 사용된 setState() 함수를 사용하여 업데이트 시킬 수 있다.

 

참고로 this. 키워드는 this가 어디에 위치하느냐에 따라 가리키는게 달라지는데 

지금 코드상에서는 현재 컴포넌트를 가리키고 있다고 보면 된다. 

 

 

코드를 부분으로 나누어서 보자. 

 

state 생성

---

  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

위 코드는 state를 생성하는 코드이다. 

원문에서는 constructor을 생성하여야 한다고 나와있으나

constructor없이도 바로 state 초기값을 설정 할 수 있다. 

 

 

 

state를 변경할 수 있음

---

  
  updateCount() {
    this.setState((prevState, props) => {
      return { count: prevState.count + 1 }
    });
  }
  
   render() {
    return (<button
              onClick={() => this.updateCount()}
            >
              Clicked {this.state.count} times
            </button>);
  }

 

 

버튼이 클릭되면 updateCount()가 호출되고,

setState()를 통해 state가 업데이트됨을 알 수 있다. 

 

그리고 state가 업데이트되면 render()가 실행되면서 다시 렌더링된다. 

State가 변화가 일어나면 항상 자동으로 render()가 실행되고, 렌더링 되는 것이다. 

 

여기서 두 가지 주의할 점이 있다.

 

 

1) 코드를 보면서

this.state.count = this.state.count +1

이렇게 state를 직접 변경하면 되는거 아냐? 라고 생각할 수 있다.

하지만 이렇게 하게되면 react는 state의 변화를 감지하지 못하게되어, 

다시 렌더하지 않는다.

그렇게 되면 state가 변경되었다 해도, 화면상으로는 렌더링되지 않아서 값이 변경되지 않게 보인다.

 

2)

// DO NOT USE
    this.setState({
        count: this.state.count + 1
 });

위 코드는 문제가 없는 코드라 느낄 수 있겠지만, 

이는 setState()의 비동기 성질을 고려하지 않았으며, 

동기화 되지 않은 상태의 데이터를 사용할 수 있기 때문에 오류를 발생시킬 수 있다.

 

 

 

 

출처 : https://seungwoohong.tistory.com/21

Props 와 State