📝 오늘 한 것

1. react state

📖 학습 자료

1. 컴포넌트 State

2. setState()

3. State and Lifecycle

4. 이벤트 처리하기

📚 배운 것

새롭게 알게 된 내용이거나 이해하기 어려웠던 부분만 정리

1. state

1) setState()

setState()는 이벤트 핸들러 내에서 비동기적으로 수행된다.
setState()가 같은 주기 동안 여러 번 호출됐다면 다음과 같이 일괄적으로 처리될 수 있다.

const handleClick = () => {
  this.setState({quantity: this.state.quantity + 1});
  this.setState({quantity: this.state.quantity + 1});
};

이는 다음 코드와 동일한 결과를 출력한다.

// Object.assgin()은 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣은 후 이를 반환하는 메서드이다
Object.assign(
  previousState, // 대상 객체
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1}, // 계속 덮어쓰기할 뿐이다
  ...
);

원하는 대로 다음 state 값이 이전 state 값에 기반하도록 하기 위해서는 setState()의 인자로 함수를 넣어줘야 한다.

const handleClick = () => {
  this.setState((state) => {
    return {quantity: state.quantity + 1};
  });
};

2) State and Lifecycle

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

위와 같은 함수 컴포넌트를 class로 변환했다. (React 컴포넌트와 this 참고)

cf. 콜백 함수 내부에서의 this는, 해당 콜백함수의 제어권을 넘겨받은 함수(아래 예제의 경우에는 setInterval)가 정의한 바에 따르며, 정의하지 않은 경우에는 전역 객체를 참조한다.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
    this.handleState = this.handleState.bind(this); // 3. this를 바인드해줬다
    
    console.log(this); // Clock {...}
  }

  componentDidMount() { // 💡 컴포넌트가 처음 렌더링 되면 호출됨
    this.timer = setInterval(this.handleState, 1000);
    // 4. this를 바인드하지 않으려면 여기서 화살표 함수를 사용해야 한다
    // () => this.handleState()
  }
  
  handleState() {
    console.log(this); // 1. 여기서 this는 전역 객체이기 때문에
    
    this.setState((state) => { // 2. 여기서 코드가 문제없이 실행되도록 하기 위해
      return { date: new Date() };
    });
  }
  
  UNSAFE_componentWillUnmount() { // 💡 컴포넌트에 의해 생성된 DOM이 삭제되면 호출됨
    clearInterval(this.timer);
    
    console.log(this); // cf. 다른 생명주기 메서드들 내부의 this는 Clock {...} 이다
  }

  render() { // 💡 컴포넌트 내에서 반드시 구현되어야 할 유일한 필수 메서드
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById("root")
);

혹은 다음과 같이 작성할 수도 있다.

const Clock = () => {
  const [date, setDate] = useState(new Date());
  
  const updateDate = () => {
    setInterval(() => setDate(new Date()), 1000);
  };
  
  useEffect(updateDate, []); // 컴포넌트가 처음 렌더링 되면 실행됨
  
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {date.toLocaleTimeString()}.</h2>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Clock />
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

3) 이벤트 처리하기

ES6 class의 본문은 기본적으로 strict mode에서 실행된다.
이벤트 핸들러 함수 내부에서의 this는 바인딩 해주지 않는 한 undefined의 값을 가진다.

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
    this.handleClick = this.handleClick.bind(this); // this를 바인드해줬다. 만약 this를 바인드하지 않았다면
  }

  handleClick() {
    console.log(this); // 여기서 this는 undefined가 되어

    this.setState(prevState => ({ // 이 코드를 실행할 때 문제가 발생했을 것이다
      isToggleOn: !prevState.isToggleOn
    }));
  }

  add() {
    console.log(this);
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

✨ 내일 할 것

1. react controlled

2. react 강의 듣기