활동 계획

• 리액트 강의 듣고 공부
• 리액트로 구구단 게임 만들기

활동 내용

1-6 함수 컴포넌트 (함수형 아님)

함수형 컴포넌트 x 함수 컴포넌트 o

리액트는 라이브러리지만 프레임워크로 이용

class 대신 function 사용

function LikeButton() {
        const [liked, setLiked] = React.useState(false);
        if (liked) {
          return "You liked this.";
        }
        return (
          <button
            onClick={() => {
              setLiked(true);
            }}
          >
            Like
          </button>
        );
      }

자바스크립트 구조분해 문법을 사용

구조분해

const [liked, setLiked] = React.useState(false); 는

const result = React.useState(false);
const liked = result[0];
const setLiked = result[1]; 과 동일

const {liked, setLiked} = React.useState(false);

객체와는 완전 다름

웹사이트에서 state 찾기 → 내용이 바뀌는 부분.

로그인 버튼 등 마우스 올렸을 때 바뀌는 부분이 모두 state