패스트캠퍼스 챌린지 47일차 (함수형 컴포넌트의 해결 방식)

22.3.11 (금) +47days

함수형 컴포넌트의 해결 방식

(물론,) 클래스 컴포넌트에서도 해결할 수 있다

비동기 콜백 내 값 변조, this 바인딩 등...

import React from "react";
import "./styles.css";

class Greeting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "students!"
    };
		**// [1] this에 직접 바인딩**
    // this.changeNameAndNotify = this.changeNameAndNotify.bind(this);
  }

	**// [2] this lexical binding(선언한 곳의 this 바인딩)
	// 3초후 컴포넌트의 현재 상태 출력**
  changeNameAndNotifyCurrentStateOfName = () => {
    this.setState({ name: "Students and Friends!" });
    setTimeout(() => alert(this.state.name), 3000);
  };

  render() {
		**// [3] 렌더링 시점의 state.name**
    const { name } = this.state;
		**// [4] 3초 후 렌더링 시점에 선언된 name 출력**
    const changeNameAndNotifyCurrentlyRendereredName = () => {
      this.setState({ name: "Students ad Friends!" });
      setTimeout(() => alert(name), 3000);
    };

    return (
      <>
        <h1>Hello, {this.state.name}</h1>
        <button onClick={this.changeNameAndNotifyCurrentStateOfName}>
          Change name to "Students and friends!" and print updated name
        </button>
        <button onClick={changeNameAndNotifyCurrentlyRendereredName}>
          Change name to "Students and friends!" and print rendered name
        </button>
      </>
    );
  }
}

함수형 컴포넌트의 구조

No lifecycle, no render method, no state

Real-world example

비동기 콜백에서 참조하는 값이 바뀌면 무슨 문제가 생길까

Ex) Dating App

다른 사용자의 카드에 “좋아요"를 표시하면, 다른 사용자도 내 카드에 “좋아요" 표시를 했는지 API 서버를 통해 확인하고 상호 간 “좋아요" 표시되었을 경우, “매칭 되었습니다" 표시한다.

구현 계획

매칭 되어쓸 경우 표시했던 카드 정보를 출력

Edge Case

매칭 여부 확인 요청이 완료되는 시점에는 다음 카드가 표시되어야 하므로 현재 카드 정보를 그대로 매칭 결과로 출력할 경우 의도치 않은 사용자와 매칭된 것처럼 출력할 수 있다.

 

 

---

 

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다