개인 자습 내용은 여기에 적기로 한다.

공부 순서가 뒤죽박죽될 수 가 있기 때문에..!😅


1. UI 데이터 관리

웹페이지에서 UI가 변경되면 화면을 다시 그려야 한다.

리액트를 사용하지 않는다면 UI 데이터가 변경될 때마다 돔 요소를 직접 수정해야 한다...;

리액트는 화면을 그리는 모든 코드는 컴포넌트의 렌더로 작성한다.

UI데이터가 변경되면 렌더가 자동으로 화면을 갱신해준다!!!👍🏻

2. 상탯값 사용 (state)

간단하게 state를 사용하는 코드를 보자.

class MyComponent extends React.Component {
  state = { color: 'red' };
  onClick = () => {
    this.setState({ color: 'blue' });
  };
  render() {
    const { color } = this.state;
    return (
      <button style={{ backgroundColor: color }} onClick={this.onClick}>싫다고</button>
    );
  }
}

state에서 color를 지정해주고, setState로 값을 수정한다.
가장 기본적이면서, 자주 사용하는 형태이다!

3. 속성값 사용 (props)

속성값은 부모 컴포넌트가 전달해주는 데이터이다.
간단한 코드로 알아보자.
버튼을 클릭하면 count가 1씩 증가한다.

import React, { Component } from 'react';

function Title(props) {
  return <p>{props.title}</p>
}

class Todo extends Component {
  state = { count: 0 }
  onClick = () => {
    const { count } = this.state;
    this.setState({ count: count + 1 });
  }
  render() {
    const { count } = this.state;
    return (
      <div>
        <Title title={`현재 카운트: ${count}`} />        
        <button onClick={this.onClick}>증가</button>
      </div>
    );
  }
}

export default Todo;

image.png

4. React.PureComponent & React.memo

속성값이 변경될 때만 렌더링 되길 원한다면 React.PureComponent를 사용할 수 있다.

이후에 다룰 함수형 컴포넌트에서는 React.memo를 사용한다.

function Title(props) {
  return <p>{props.title}</p>
}
export default React.memo(Title);

export default class Title extends React.PureComponet {
  render() {
    return <p>{props.title}</p>;
  }
}

5. setState

위에서 몇 번 다루었던 setState는 비동기로 상탯값을 변경한다.
다음과 같이 연속으로 setState를 호출해보자.

class AboutState extends Component {
  state = { count: 0 }
  onClick = () => {
    this.setState({ count: this.state.count + 1 });
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    // 이러쿵저러쿵
  }
}

count가 2씩 증가할 것 같지만...! 1씩 증가한다...🙀
리액트가 setState를 동기로 호출하면 계속 화면을 다시 그려서 성능이슈가 발생할 수 있다.
위 문제는 아래처럼 이전 상태값을 받아와서 해결한다!
이외에도 몇 가지 방법이 있지만, 필요시 다루기로 한다.

onClick = () => {
  this.setState(prevState => ({ count: prevState.count + 1 }));
  this.setState(prevState => ({ count: prevState.count + 1 }));
}