• MVC, MV* 패턴에서 View만 신경쓰는 라이브러리

• 가상의 DOM 객체와 변경된 데이터로 생성된 Virtual DOM을 비교
• 변경된 요소에 대해서만 기존의 DOM 객체에 적용하는 방식을 사용

1. 데이터를 업데이트하면 전체 UI를 virtual dom에 리렌더링
2. 이전 vitrual dom에 있던 내용과 현재 내용을 비교
3. 바뀐 부분만 실제 dom에 적용

특정 부분이 어떻세 생길지 정하는 선언체

• 리액트는 사용자 환경에 제공하는 View를 여러 개의 구성요소 (Component)로 쪼개서 구현
• Component 하나하나는 View의 모습과 동작 방식을 정의하며 전체적인 앱은 이러한 Component들이 합쳐져 만들어지게 됨
• Component는 재사용이 가능한 API로 다른 Component에서 재사용이 가능하며 또는 다른 앱에서도 재사용이 가능

• 함수형 컴포넌트를 사용하는 경우는 state나 component Life Cycle API를 사용하지 않고 props를 받아 뷰를 렌더링하는 Component에 한해서 함수형 컴포넌트를 사용

• 함수형 컴포넌트의 경우 state나 일부 불필요한 기능들을 제거한 형태라 class 형태로 정의하는 Component보다 메모리 소모량이 적고 성능이 좋음..

• state도 사용할 수 있음..

• props는 특정 컴포넌트의 속성을 지정할 때 사용
• props는 특정 컴포넌트를 불러와 사용하는 부모 컴포넌트(Component)에서 설정할 수 있음

import React, { Component } from 'react';
import MyComponent from "./MyComponent";

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent name = "Soongsil"/>
      </div>
    );
  }
}

export default App;

    import React, { Component } from 'react';

    class MyComponent extends React.Component
    {
        render(){
            return(
                <h1>Hello {this.props.name}</h1>
            )
        }
    }

    export default MyComponent;

• App컴포넌트 = 부모, MyComponent = 자식
• App컴포넌트에서 MyComponent에 대한 name이라는 props를 Soongsil이라는 value로 정해줌
• MyComponent에서는 해당 props를 읽기 전용으로만 사용가능

import React, { Component } from 'react';

class Counter extends React.Component {
  state = {
    number: 0
  }

  add = () => {
    this.setState({
      number: this.state.number + 1
    });
  }

  minus = () => {
    this.setState({
      number: this.state.number - 1
    });
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.add}>+</button>
        <button onClick={this.minus}>-</button>
      </div>
    );
  }
}

export default Counter;

• 주체가 되는 컴포넌트(Component)에서 직접 값을 변경하고 읽을 수 있는 state

• 클래스 컴포넌트에서 사용 가능

• state값을 변경하려면 반드시 setState함수를 이용 (this,setState())

• setState함수가 호출이 되야 render함수가 실행됨 -> state값을 변경가능

마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미

• constructor

  • 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수
  • state의 초기값을 지정할 때 사용

• getDerivedStateFromProps

  • props와 state 값을 동기화할 때 사용하는 함수

• render

  • 컴포넌트의 기능과 모양새를 정의하는 함수
  • html형식의 문장을 반환하지 않고, 뷰가 어떻게 생겼고 작동하는지 정보를 지닌 객체(리액트 요소)를 반환

• componentDidMount

  • • 컴포넌트를 생성하고 첫 렌더링이 끝났을 때 호출되는 함수

컴포넌트가 업데이트되는 경우는 props 값 변경, state 값 변경, 부모 컴포넌트가 리렌더링 될 때, this.forceUpdate로 강제로 리렌더링 되는 경우

• getDerivedStateFromProps

  • 마운트(Mount) 과정에서도 호출되었던 함수

• shouldComponentUpdate

  • 컴포넌트를 리렌더링 할지 말지를 결정하는 함수

• render

  • 새로운 값을 사용하여 View를 리렌더링합니다.

• getSnapshotBeforeUpdate

  • 변경된 요소에 대하여 DOM 객체에 반영하지 직전에 호출되는 함수

• ComponentDidUpdate

  • 컴포넌트 업데이트 작업이 끝난 리렌더링 후에 호출되는 함수

컴포넌트가 DOM에서 제거되는 것

• componentWillUnmount
  • 해당 컴포넌트가 제거되기 직전에 호출