[React] 컴포넌트의 State 란?

1. State 란?

리액트를 다루는 핵심 !

State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.

props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

2. 사용하기

State 객체를 사용하고 싶다면 컴포넌트를 생성할 때 가장 윗부분(render() 함수보다 먼저)에 constructor() 함수를 적어준다. 컴포넌트 생성자에서 super를 호출하기 전에는 this를 사용할 수 없기 때문이다.

class App extends Component {
  constructor(props) {
    super(props);
      this.state={
      Subject:{title:'WEB',sub:'월드와이드웹!'}
    }
  }
  render() {
    return (
      	<div className="App">
        <Subject 
        	title={this.state.subject.title} 
    		sub={this.state.subject.sub}>
        </Subject>
      </div>
    );
  }
}

즉, 컴포넌트의 시작 부분에서 constructor() 라는 함수가 컴포넌트의 초기화를 시켜줘야 State 에 값을 넣어 사용할 수 있는 것이다.

그리고 App 클래스 내부에서는 중괄호를 이용해

title={this.state.subject.title}
와 같이 State값을 가져와 사용한다.

3. State와 Props의 차이점

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="월드와이드웹!"></Subject>
      </div>
    );
  }
}

위 코드는 State를 사용해 수정하기 전, 즉 Props만 사용했을 때 App 컴포넌트의 모습이다.

화면에 출력되는 내용은 완전히 똑같지만, props 데이터를 사용자에게 노출되는 부분에 직접 적는 것이 아니라 State를 통해 참조했다는 차이가 있다. 즉,

사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.