20230515

<< [[20230514]] | [[20230516]]>>

TODO

• 강의 1시간

• 포폴 1시간

---

(강의) 웹게임을 만들며 배우는 React

NOTE

• react는 데이터를 중심으로 생각해야함 -> 화면에서 달라질 부분을 state로 만들어야함

• 불변성 : 객체를 함부로 바꾸지 마라. 복사해라

  • 불변성? 참고

const array = [] // 배열도 객체다. 
// pop, push, shift, unshift, splice => 배열을 직접적으로 수정
// concat, slice => 새로운 배열을 만들어냄

-> react에서는 배열을 직접적으로 수정하는 윗줄보다는 아래줄을 이용해라. (불변성을 위함)

• react develop tools 개발자도구에서 컴포넌트의 props와 state를 확인 가능하게 해주는 툴

• class 문법에서 constructor를 사용하지 않는 방법

<script type="text/babel">
  class LikeButton extends React.Component {
	  state = {liked: false};
	  onClickButton(){
		  this.setState({liked: true})
	  }
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
  
      return (
      <button onClick={this.onClickButton}>
	      LIKE
      </button>
      )
    }
  }
</script>

=> 위 방식대로는 제대로 작동하지 않음

• constructor에서 bind해줘야 사용 가능

<script type="text/babel">
  class LikeButton extends React.Component {
	  constructor(props){
		  super(props);
		  this.state = {liked: false};
		  this.onClickButton = this.onClickButton.bind(this); // 이부분을 해줘야 밖에있는 코드들을 return에서 사용가능
	  }
	  onClickButton(){
		  this.setState({liked: true})
	  }
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
  
      return (
      <button onClick={this.onClickButton}>
	      LIKE
      </button>
      )
    }
  }
</script>

• 해결 - 화살표함수 사용

<script type="text/babel">
  class LikeButton extends React.Component {
	  state = {liked: false};
	  onClickButton = () => {
		  this.setState({liked: true})
	  }
	  
    render() {
      if (this.state.liked) {
        return 'You liked this.';
      }
  
      return (
      <button onClick={this.onClickButton}>
	      LIKE
      </button>
      )
    }
  }
</script>

=> this의 문제로 class형 컴포넌트는 사용 안함 => 함수 컴포넌트로 사용

<script type="text/babel">
  function LikeButton() {
    const [liked, setLiked] = React.useState(false); // 구조분해
    if (liked) return 'You liked this.'
    return (
      <button onClick={() => { setLiked(true); }}> LIKE </button>
    )
  }
</script>