props

property의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에게 주는 값이다.

• 하위 컴포넌트에서는 porps를 상위 컴포넌트로부터 받아오기만하고 받아온 props를 직접 수정할수는 없다. 받아온 props값은 this.로 접근할 수 있다.

props만 이용한 컴포넌트 예시

//App.js 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject //props 값 
          title="Web"
          sub="World Wide Web">
        </Subject>
      </div>
    );
  }
}

//Content.js 
import React, { Component } from "react";

class Subject extends Component {
  render() {
    return (
      <header>  
        <h1><a href="/">{this.props.title}</a></h1> 
        {this.props.sub} 
      </header>
    );
  }
}

export default Subject;

---

state

state는 컴포넌트 내부에서 선언되며, 선언된 값은 변경될 수 있다.

• props를 초기화시켜주기 위해서 constructor를 사용하며 이 함수는 컴포넌트 안에서 가장 먼저 실행되어 state의 초기화를 담당한다.
• 부모컴포넌트의 props를 state화 시키고 그 state값을 자식컴포넌트의 props로 전달한다.
• state가 수정되면 다시 render된다.

props+state까지 이용한 컴포넌트 예시

//App.js 
class App extends Component {
  constructor(props) {  //초기화 
    super(props);
    this.state = {  //props의 state 화
      Subject: { title: "WEB", sub: "World Wide Web" },
    };
  }
  render() {
    
    }
    return (
      <div className="App">
        <Subject //state값 넣기 
          title={this.state.subject.title}
          sub={this.state.subject.sub}>
        </Subject>
      </div>
    );
  }
}

//Content.js 
import React, { Component } from "react";

class Subject extends Component {
  render() {
    return (
      <header>
        <h1><a href="/">{this.props.title}</a></h1>
        {this.props.sub}
      </header>
    );
  }
}

export default Subject;

state결정하기

1. 상위 컴포넌트로부터 props를 통해 전달되지 않아야한다.
2. 시간이 지나면서 변하는 정보여야한다.
3. 컴포넌트 안의 다른 state나 props를 가지고 계산가능하다면 중복되므로 state로 만들면 안된다.

state가 포함될 컴포넌트 결정하기

1. state를 기반으로 렌더링하는 모든 컴포넌트를 찾는다.
2. 공통 소유 컴포넌트를 찾는다.
   공통 소유 컴포넌트는 계층 구조 내에서 특정 state가 있어야하는 모든 컴포넌트들의 상위에 있는 하나의 컴포넌트를 말한다.
3. 공통 혹은 더 상위에 있는 컴포넌트에 state를 준다.
4. state를 줄 컴포넌트를 찾지 못하였다면, state를 소유하는 컴포넌트를 만들어 공통 소유 컴포넌트의 상위 계층에 추가한다.

---

props 와 state의 차이

props 와 state 는 모두 JavaScript 객체이며 두 객체 모두 렌더링 결과물에 영향을 주는 데이터를 갖고 있다는 공통점이 있다.

그러나,

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 뚜렷한 차이점을 가지고 있으니 유의하자!

---

이제 state에 대한 윤곽이 잡힌 것 같다. 프로젝트 진행하면서 본 개념들을 뚜렷하게 이해하고 그 후 글을 좀 더 수정해야겠다.

(혼잣말 정리)
결국, 하드코딩으로 무언가를 삽입했다가, 그 틀을 props로 만들어 불러왔다가, 다시 props를 state로 만들어서 다시 불러온것! 상위컴포넌트 첫부분에서 Constructor로 state초기화를 시켜주고, 그 값을 같은 컴포넌트의 return 안에서 불러준다. 그때, 하위 컴포넌트에서 만들어준 기본틀이 있을것이고 그 틀을 상위 컴포넌트 return 안에 넣어뒀을 때, Constructor에서 초기화해준 state를 상위컴포넌트에서 불러온 하위컴포넌트에 넣는것이다.