Study React - 클래스형 컴포넌트

클래스형 컴포넌트

class Square extends React.Component {
	render() {
    	return {
        	<button
          		className="square"
          		onClick={() => this.props.onClick()}
  			>
              {this.props.value}
			</button>
        };
    }
}

class Board extends React.Component {
	constructor(props) {
    	super(props);
     	this.state = {
        	squares: Array(9).fill(null)
        };
    }
  
  	handleCkick(i) {
    	const squares = this.state.squares.slice(); //객체 복사본
      	squares[i] = 'X';
      	this.setState({squares: squares});
    }
  	
  	renderSquare(i) {
    	return (
        	<Square
          		value={this.state.squares[i]}
  				onClick={() => this.handleClick(i)}
          	/>
        );
    }
    
    render() {
    	const status = 'Next player: X';
      
      	return (
          <div>
            <div className="status">{status}</div>
            <div className="board-row">
              {this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}
            </div>
            <div className="board-row">
              {this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}
            </div>
            <div className="board-row">
              {this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}
            </div>
          </div>
        );
    }
}

불변성

const squares = this.state.squares.slice(); //객체 복사본

기존 배열을 바로 수정하는 것이 아니라 .slice() 연산자를 사용해 사본을 만들었다.
기존 데이터를 변경하지 않았을 때의 이점

1. 복잡한 특징들을 단순하게 만듦
   • 이전 버전의 데이터 이력을 유지하고 나중에 재사용할 수 있도록 함
2. 변화 감지
   • 객체일 때, 참조하고 있는 불변 객체가 이전과 다른지 비교하여 변화 감지 가능
3. React에서 다시 렌더링하는 시기를 결정
   • 순수 컴포넌트를 만드는 데 도움이 됨. 변하지 않는 데이터는 변경이 이루어졌는지 쉽게 판단할 수 있고, 이를 바탕으로 렌더링 여부를 결정할 수 있음