react - [기본개념]

A Simple Component

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

 - react는 jsx이라는 문법을 사용할 수 있는데  jsx를 사용하는것은 선택사항이며 반드시 필요하진 않다

 

 - HelloMessage 클래스는 this.prop 형태로 input data를 받을 수 있는데 위의 코드에서 input data는 ReactDOM.render안에

 

   있는 <HelloMessage name = "Taylor" /> 이다! 

 

   HelloMessage는 Class HelloMessage를 call 하는 부분이고 name = "Taylor"는 key를 name으로 value를 Taylor로

 

   input data를  만드는 부분!!

---

A Stateful Component

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }
 
  tick() {    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }
  
  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);

 - 의문점

 

   <Timer / > 으로 Timer Class를 render할때 Timter 클래스의 constructor 부분이 실행되고 바로 render()가 실행되는게

 

   아니라 위에서 아래로 쭉 훑으면서 실행되는건가? 

 

      => 그럼 다시 생기는 의문점 setInterval을  componetDidMount()에서 실행하고 componentWilUnmount로

 

           clearInterval했는데  순차적으로 위에서 아래로 실행되는거면 interval이 실행이 안되야 되는게 아닌가?

 

 

  ==> 의문해결

 

     componentDidMount() 는 컴포넌트 생명주기 관련 메서드!!!

 

 

 ✅ 컴포넌트 생명주기란?

 

 1. 마운트(Mount)

 

  컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될때 순서대로 호출된다!!!

 

    * 자주 사용되는 메서들은 파란색으로 표시함

 

  1) constructor()

 

  2) static getDerivedStateFromProps()

 

  3) render()

 

  4) componentDidMount()

 

2.  업데이트(Update)

  props 또는 stater가 변경되면 갱신(update)이 발생!! 아래 메소드들이 순서대로 호출된다!

 

 1) static getDerivendStateFromProps()

 

 2) shouldComponentUpdate()

 

 3) render()

 

 4) getSnapshotBeforeUpdate()

 

 5) componentDidUpdate()

 

 3. 마운트 해제

  컴포넌트가 DOM상에서 제거될 때 호출된다

 

  componentWillUnmount()

  

       * componentWillUnmount() 메서드는 이제 사용하지말라고 react document에서 나타내는데 왜그렇지??

 

            -> componentWillUnmount() 메소드가 아니라 UNSAFE_componentWillMount() 메소드였다.. !

 

 

- react는 component의 state data가 바뀌면 바뀔때마다 감지해서

 

   렌더링을 다시 해주는 것을 알 수 있음

---

An Application

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(
  <TodoApp />,
  document.getElementById('todos-example')
);

- this.handleChange = this.handleChange.bind(this)

 

  this.handleSubmit = this.handleSubmit.bind(this) 

 

  이 두개가 .bind(this)로 바인딩 되는데 agument로 들어오는 this의 의미가 TodoApp 전체를 소유하게 되고

 

  handleChange나 handleSubmit이 실행 될때의 TodoApp 에 바인딩되어지는건지 ? 

 

  -> 그리고 submit되면 component안의 data의 상태가 바뀌니까 다시 렌더링되어 TodoList 클래스도 다시 실행되어 li가 발생하는건지