[React] state 사용하기 (단일속성)

State의 이해
props가 사용자에게 중요한 정보라면(외부의 값), state는 구현자에게 중요하다고(내부의 값) 할 수 있다.
state는 많은 언어에서 그런 것처럼 은닉의 효과가 있다.
문장만 봐서는 사실 이해가 어렵고, 예제를 하면서 알아 갈 수 있을 것 같다.

src > App.js

 class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wider web!"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is Markup Language"></Content>
      </div>
   );
  }
 }

 export default App;

 

해당 코드는 전차수의 내용을 복사해온 것이다.
props를 통해서 리펙토링을 했지만, 여전히 뭔가 살짝 지저분해 보이는 감이 있다.
그리고 값이 App안에 훤히 들어가있기 때문에 보호가 되지 않는 것도 같다.
그래서 해당 값을 state로 만들고, 그 값을 Subject의 props로 전달하는 것을 통해 이를 개선해보기로 한다.


State의 기본 코드

 class App extends Component {
  constructor(props) {
    super(props);
      this.state = {
    	//초기화
      }
  }

  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wider web!"></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is Markup Language"></Content>
      </div>
   );
  }
 }

constructor라는 이해할 수 없는 구문이 하나 생겼다. 
이게 state를 사용하는 방법이지만 무슨 의미인지 깊게 생각하면 피곤해지고,
state를 사용하려면 이 구문이 필요하다고 생각하자.

이 구문은 render() 보다 먼저 실행되어 초기화를 하기 위한 코드이다.
그러므로 컴포넌트를 초기화하고 싶은 부분을 this.state= {  }  안에 담으면 된다.

State의 사용방법 (단일 속성의 경우)

 class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject:{title:"WEB" sub:"world wider web!"}
    }
  }

  render() {
    return (
      <div className="App">
        <Subject title={this.state.subject.title}
                 sub={this.state.subject.sub}></Subject>
        <TOC></TOC>
        <Content title="HTML" desc="HTML is Markup Language"></Content>
      </div>
   );
  }
 }

 export default App;

순서
1. state의 기본코드인 constructor구문을 App컴포넌트 안의 render() 위에 적어준다.
2. this.state = {  }를 통해서 state로 만들 예정이므로,  
   안에 subject:{title:'WEB', sub:'world wider web!'} 라고 태그이름, props와 내용을 적어준다.
3. Subjet 태그의 title, sub에 직접적으로 적어주었던 내용은 this.state.subject.title 형태로 적어준다.

=> 이렇게 하면 그냥 props를 사용했을 때와 어떻게 다를까?
내부적으로는 직접적으로 값을 써주지 않고 this.state 안으로 값을 은닉할 수 있고,
외부에서는 어차피 같은 값이므로 신경을 쓸 필요가 없게 된다.
즉, this.state= {}를 통해 어떤 값을 내부적으로 보호해서 쓸 수 있다고 이해하면 된다.

또한, 상위 컨퍼넌트인 App의 값을 하위 컨퍼넌트인 Subject에 props의 값으로 전달하기 위한 방법이라고 생각하면 된다.

+
이렇게 상위(App)에서 사용된 컴포넌트를 하위(TOC, Subject, Content)에서 꺼내쓰는 방법은
this.props.상위컴포넌트에서 정의된 props이름 으로 사용할 수 있다.

예를 들어, this.props.title의 결과는 WEB이고, this.props.sub는 world wider web!이다.