[TIL] 2020-03-09

[노마드 코더]

ReactJS로 웹 서비스 만들기 #3.3 Planning the Movie Component 까지 수강

 

[배운 내용]

[code]

 class App extends React.Component{
   constructor(props){
     super(props);
     console.log("Hello");
   }
   state = {
     count: 0
   };
  add = () => {
    this.setState(current => ({ count: current.count + 1 }));
  };
  minus = () => {
    this.setState(current => ({ count: current.count -1 }));
  };
  componentDidMount() {
    console.log("component rendered");
  }

  componentDidUpdate(){
    console.log("I just updated");
  }
  
  componentWillUnmount(){
    console.log("Goodbye, cruel world");
  }
  render(){
    console.log("I'm rendering");
  return (
  

export default App;

[ 수업 내용 필기 ]

// class App은 react component를 의미하며 이 단계는 필수이다.
// react component는 뒤에 많은 것을 가지고 있고, 그중 하나가 state이다.
// 매번 우리가 component를 만들 때마다 모든 것을 다 구현하고 싶지 않다. 
// 이게 extend from을 한 이유이다.
// 예를 들면, 아기는 인간에서 확장되고, 인간의 모든 특징을 가져올 수 있고 그것으로부터 확장된 것이다.
// 만약, camera, screen, charger를 cell phone class에 넣은 다음 cell phone class에서 확장한 samsung class, apple class를 가지게 됨
// samsung class나 apple class는 cell phone class로부터 모든 것을 가져오게 됨
// 여기서 기본적으로 react class component에서 가져오고, 우리는 거기서 extends(확장)하고, 그리고 이제 우리의 App component는 react component이다. 
// class react component는 return을 가지고 있지 않음, 함수가 아니기 때문이다. 
// 대신 render method를 가지고 있다. 
// 원래는 render method는 react component에서 확장된 것이다.
// extends(확장)를 했기 때문에 App component에서도 쓸 수 있다.

/*
 -두 컴포넌트의 차이-
  Function component는 function이고 뭔가를 return 하고, 그리고 화면에 표시됨
  class component는 class이고, react component로부터 확장되고 화면에 표시됨
  대신 화면에 표시하기 위해서 class에 render method를 안에 넣어줘야 한다
  react는 자동적으로 모든 class component의 render method를 실행하고자 함.
 */

 // 즉, react는 자동적으로 나의 class component의 render method를 자동으로 실행한다.
 // Function component 대신에  class component를 써야 하는 이유는?
 // class component가 가진 state라고 불리는 녀석 때문이다.
 // state는 객체(object)이며, data를 넣을 공간이 있고 수시로 변할 수 있다.
 
// JavaScript에서는 다른 onClick이나 eventListener를 등록해야 한다.
// 하지만, react에서는 자동으로 onClick을 가지고 있다.
// state의 상태를 변경할 때, 직접 this.state.count = 1; 이렇게 접근하면 실행이 안된다.
// 즉, 매번 state의 상태를 변경할 때, react는 render function을 호출해서 바꿔주길 원한다.
// 나는 내 state의 상태를 바꾸고 싶고 또한 react가 어떤 것이든 refresh 해주길 원한다.
// 기억해라 state는 object이다.
// 따라서, state에는 setState()라는 것이 있고, 그것을 이용해 값을 변경한다.
// 왜냐면 react는 충분히 똑똑한다.
// 만약 내가 setState를 호출하면 react는 state를 refresh 하고 또한 render function을 호출할 거다.
// 우리가 setState를 사용하는 이유는 만약 사용하지 않으면 새 state와 함께 render function이 호출되지 않기 때문이다.
// 매 순간 setState를 호출할 때마다 react는 새로운 state와 함께 render function을 호출할 거다. 
// react class component는 단순히 render 말고 더 많은 것을 가지고 있다. 
// react component에서 사용하는 유일한 function은 render 함수이다.
// 이들은 life cycle method를 가지는데, life cycle method는 기본적으로 react가 component를 생성하고 없애는 방법이다. 
// component가 생성될 때, render 전에 호출되는 몇 가지 function이 있다.
// component가 render 된 후, 호출되는 다른 function들도 존재한다. 
// 제일 먼저 호출되는 function이 하나 있는 constructor이고, react가 아닌 자바스크립트이다.
// constructor는 Javascript에서 class를 만들 때 호출되는 것이다. 
// component가 시작될 때, component가 screen에 표시될 때, component가 너의 website로 갈 때, constructor를 호출한다.
// 그러고 나서, render()를 호출함 이후에, component가 render 할 때 componentDidMount()로 이 component가 처음으로 render 됐다고 알려준다. 
// setState를 호출하면, component를 호출하고, 먼저 render를 호출한 다음 업데이트가 완료되었다고 말하면 componentDidUpdate가 실행된다.
// componentWillUnmounts는 component가 떠날 때 호출된다.