React(Component, props) - 1

우선 react 강의를 찾게 되면서 아무것도 모르는 상태이기때문에 생활코딩을 들었다. 이포스팅은 따라서 생활코딩react강의를 듣는사람이나 들었던 사람들이 다시 강의 내용을 복기하는 순기능을 가졌기때문에
이포스팅을 보고 따라작성하는것은 부분부분 빠진부분이 많아 적합하지않다.

Component란 ?

class Subject extends Component{
  render() {
    return (
        <h1>Hi, React</h1>
        Im dan
    );
  }
}

위에 볼 수 있듯 Subject라는 class를 생성하는데 Component에 상속받는다.
그 내용은 render()함수를 실행시키면 아래의 문구를 리턴 받게 된다는 의미로 이해했다.

<h1>Hi, React</h1>
Im dan

이렇게 만든 Subject Class는 js파일에 import Subject from '파일경로' 로 import 해줄시

<Subject></Subject>

이렇게 간단하게 불러올 수 있다! 그리고

props란 ?

<Subject title="Hi, React" sub="Im dan"></Subject>

---

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

이렇게 Hi, React Im dan이라는 본문의 내용을 return값 안에 넣는게 아닌 Subject 태그 안에 넣음으로써 우리는 처음과 같은 틀을 유지하면서 내용만 바꿔서 넣을 수 있는 Component로 수정할 수 있는데 이를 props라고 한다.
그리고 Component를 js파일로 분리시키고 파일 마지막 코드에

export default Component(클래스명);

항상 적는데 생활코딩에서는 알려주지 않았지만 접근제어자라고 생각한다.(아니라면 추후 수정하겠다.)

내가 이해하기 편하게 생각한 것들.

아무래도 extends Component, 상속이 보이니 나는 자바의 상속 개념을 떠올리며 이해했다.
Interface는 상속받기 전에 내용이 빈 메소드를 정의하는데 상속받은 곳에서 그 메소드의 내용을 정의하는 것처럼 props또한
"일단 내가 Subject의 틀을 정의해놨는데 그 내용은 (필요에 맞게)작성할 때 적어~"
라는 느낌으로 와 닿았다.
Component는 사실 가독성을 증가시키는 엄청난 코드라고 느꼈는데 이는 react를 개발할 때 기존의 페이지 이동이 있는 웹브라우저가 아닌 한페이지에서 이동하는 react의 특성에 맞게 가독성을 증가시키기위해 만들었는것 같다.