[웹 게임을 만들며 배우는 React] - ref, props

 

출처: https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의

 

* createRef

- hooks의 useRef처럼 class에서도 ref 사용하기 = createRef

- 굳이 함수처럼 만들어서 ref를 해야 하나? ▶ 예전 작업을 가져오거나 다른 동작이 필요할 경우

- 간단하게 ref 작업 = createRef

 

 

* this.setState({})

- 사용 권장 x

- 렌더 실행 ↔  this.setState({}) 무한 반복(오류 발생 가능성 높음)

 

 

* props

- 값을 바꾸고 싶을 경우 자식 컴포넌트가 아닌 부모 컴포넌트에서 바꿔야 함

- 만약 자식 컴포넌트에서 바꿀 일이 있다면?

▶ state를 만들어서 바꿔야 함 

 

//함수 컴포넌트
import React, { memo, useState } from "react";

const Try = memo(({ tryInfo }) => {
  const [result, setResult] = useState(tryInfo.result); //따로 useState 만들기
  const onClick = () => {
    setResult("1");
  };
  return (
    <li>
      <div>{tryInfo.try}</div>
      <div onClick={onClick}>{tryInfo.result}</div>
    </li>
  );
});
Try.displayName = "Try";

export default Try;

//클래스
import React, { PureComponent } from "react";

class TryClass extends PureComponent {
  state = {
    result: this.props.result,
    try: this.props.try,
  };
  render() {
    const { tryInfo } = this.props;
    return (
      <li>
        <div>{tryInfo.try}</div>
        <div>{tryInfo.result}</div>
      </li>
    );
  }
}

export default TryClass;