• User Interface
  사용자의 입장에서 장치는 버튼, 화면을 터치하는 것 같은 이 제품을 조작하는 것

대부분 제품들은 사용자의 입장과 구현자의 입장이 있다고 한다.

리액트에서는 "props"가 사용자가 제품을 조작하는 장치라고 생각할 수 있다.

제품을 만드는 사람이 제품의 내부적인 구현을 위해서, 다양한 상태들을 사용하기 위해서 다양한 내부 장치들이 있다.
이를 비유적으로 이야기하면 "state"라고 할 수 있다.

---

state는 ...

• "props" : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이며, "props"를 제공하여 컴포넌트를 조작할 수 있다.
• "state" : props의 값에 따라 내부의 구현에 필요한 데이터

리액트로 만든 컴포넌트가 좋은 부품이 되기 위해서는 props와 state는 철저하게 분리되어 있어야 한다.
사용과 구현을 격리시겨 양쪽의 편의성을 도모하는 것이 좋은 부품을 만드는 것의 핵심이다.

실제로 컴포넌트를 구현할 때 좀더 복합적으로 다양한 일들을 하는 컴포넌트를 만들 때 필요한 "state"를 알아보자.
그리고 이 과정에서 자연스럽게 "props"도 더 잘 이해할 수 있다.

---

state 사용하기

<App/>이라고 하는 컴포넌트에는 <Subject>라고 하는 하위 컴포넌트가 있다.

<Subject title = "NEW REACT" sub = "this text changed"></Subject>

이 하위컴포넌트인 <Subject>컴포넌트의 "props"의 값들은 하드코딩 되어있다.

이 "props"값을 초기화시키고 그 값을 <Subject>의 title, sub에 들어가는 값으로 세팅해보자.

---

• App.js

constructor(props){
	super(props);
    this.state ={
    	subject : {title : 'SAMPLETITLE', sub : 'this is sub text!'}
    }
}

"props"를 사용하기 위해선 위의 코드가 필요하다
컴포넌트가 실행될 때 constructor라는 함수가 render()라고 하는 함수보다 먼저 실행되서 초기화를 담당한다.
this.state={}라는 코드를 통해 "state"값을 초기화 한다.
<Subject>의 값을 state화 시키기 위해 this.state에 Subject(props)의 값으로 객체를 부여한다.
이렇게 state객체는 --> title.'SAMPLETITLE', sub = 'this is sub text!' 해당 값이 설정된다.

그러면 이런과정을 거쳐 만든 state를 어떻게 사용할 수 있을까?

• App.js App 컴포넌트의 render 영역
  <Subject title = {this.state.subject.title} sub = {this.state.subject.sub}></Subject>

결과화면

똑같은 결과를 보여주지만 "props"의 데이터는 "state"에서 가져온 것이라는 차이점이 생기게 된다.

정보 은닉

index.js에는 <App/>컴포넌트를 실행하는 코드가 있다.
하지만 코드만을 통해 내부적으로 staet값이 subject가 있는지 알 수 없다.
외부에서 알 필요가 없는 정보를 철저하게 은닉하는 것은 좋은 사용성을 만드는 핵심이다.

---

요약하자면

• <App/>컴포넌트를 내부적으로 사용할 상태는 "state"라는 형태를 사용한다.
• 만들어진 "state"값을 <Subject>컴포넌트의 props값으로 부여함
• 즉, 상위 컴포넌트인 <App/>의 상태를 하위 컴포넌트로 전달하고 싶을 때 상위 컴포넌트의 state값을 하위 컴포넌트의 props의 값으로 전달하는 것은 얼마든지 가능하다.

<Arti> 컴포넌트도 <Subject>컴포넌트처럼 state화 시켜보자.

App.js

class App extends Component {
  constructor(props){
    super(props);
      this.state ={
      subject : {title : 'SAMPLETITLE', sub : 'this is sub text!'},
      artsub : {title : "NEW ARTICLE", sub : "this Arti has been updated"}
    }
  }
  render() {
    return (
      <div className='App'>
        <Subject title = {this.state.subject.title} sub = {this.state.subject.sub}></Subject>
        <Navi></Navi>
        <Arti title = {this.state.artsub.title} sub = {this.state.artsub.sub}></Arti>
      </div>
    );
  }
}