다시 리액트를 공부하는 시점에서 정리를 해 봅시다:)

virtual Dom

Actual Dom이 바뀐 node만을 찾아내어 바꾸는 것은 비효율적이고 느리므로, react에서는 virtual Dom을 만들어서 효율적이고 빠르게 Dom을 바꿉니다. javascript로 말이죠!

단방향 data flow

위에서 아래로 흐르는 수직적인 data flow를 정함으로써, 코드를 파악하기가 한결 쉽습니다. 이 규칙에 맞게 코딩을 했다면 말이지요.

비동기 state update

리액트에서는 state로 데이터의 상태를 보관하여 사용합니다. 이 state를 업데이트 시키는 기능은 비동기로 동작합니다. 따라서 바로 state의 값을 확인하고 싶다면, setState의 두 번째 인자의 콜백 함수 안에서 확인해야 합니다.

class App extends Component {
	
  handleChange = () => {
	this.setState({ num: this.state.num++ }, () => {
      console.log(this.state.num);
    });
  }
   
};

setState의 다른 표현

class App extends Component {
	
  handleChange = () => {
	this.setState((prevState, prevProps) => {
      return {num: prevState.num++ }
    }, 
    () => {
      console.log(this.state.num);
    });
  }
   
};