props => 로컬/전역 에러핸들링

내가 겪은 문제점은 card를 뒤집을 때 ㅣocal에서 될때는 카드 전체 뒤집기가 안되고,
전체 뒤집기가 될 때는 local에서 안된 점이다.

처음에 Local에서 안된 이유는 카드를 감싸고 있는 div의 class를 정해주는 곳에 props인 isFlipped를 줬기 때문이다. 여기에는 props가 아닌 로컬의 상태관리를 넣어줘야한다.

export const Card: React.FC<CardProps> = ({ isFlipped }) =>~
 <div
        className={`card ${isFlipped ? "flipped" : ""}`}
        onClick={handleClick}
      > //X

export const Card: React.FC<CardProps> = ({ isFlipped }) =>~
 <div
        className={`card ${localFlipped ? "flipped" : ""}`}
        onClick={handleClick}
      > //O

그리고나서 로컬과 전체 flipped를 모두 활성화 하기 위해서는

useEffect가 필요하다.

react component는 부모로부터 받은 props로 자신의 상태값을 관리하면, 처음 렌더링 될때의 값으로만 설정된다.이 후 props로 새로운 상태 변경을 시도할 때, 자동으로 컴포넌트의 내부 상태값이 변하지 않는다.

그래서 Card 컴포넌트가 isFlipped 값으로 자신의 상태를 설정하고 나면, 이후 부모가 props로 새로운 상태값을 주려고 해도 받지 않는 것이다 ㅜㅜ

그래서 useEffect 훅으로 -내가 이 값을 지켜보고 있어 ㅇ0ㅇ! 이 상태가 바뀔 때마다 업데이트 해줘!- 라고 조르는것!

아무튼, 왜 local값과 전체값이 따로 노는지에 대해서 확인해보고 경험할 수 있어서 좋은 기회였다! ㅇㅅㅇb