활동 계획

• 리액트 강의 듣고 공부
• Hooks 공부, 웹팩 설치
• 끝말잇기 게임 만들기

활동 내용

2-1 React Hooks 사용하기

setState나 ref를 쓰지 않는 component는 함수 component로 만들 수 있음 → 깔끔하고 편리함

함수 컴포넌트에도 setState와 ref 사용 → Hooks로 활용

리액트는 Hooks를 더 권장

const GuGuDan = () => {
        const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
        const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
        const [value, setValue] = React.useState("");
        const [result, setResult] = React.useState("");
        const inputEl = React.useRef(null);
        return <div>Hello, Hooks</div>;
      };

state를 하나씩 분리함

2-2 Class와 Hooks 비교하기

state가 바뀌면 class에서는 render만 다시 실행되었는데, hooks는 함수 자체가 다시 실행되기 때문에, class에 비해 조금 더 느릴 수 있음

리액트에서는 id는 가능하지만, class는 사용 불가 → className 사용

라벨의 for은 labelFor로 사용

<button classNmae="button">입력</button>