Hook Basic - useState

import React, { useState } from 'react';

const [like, setLike] = useState(0);

useState

변수의 값이 변경될 때마다 페이지를 업데이트 하도록 만들어주는 것이 useState

useState Hook은 React에서 상태(state)를 관리하는 기능을 제공한다
useState Hook은 배열 형태의 반환값을 가지며, 구조 분해 할당 문법을 이용해
state 변수 - like, state 변수의 상태를 바꿔줄 수 있는 함수 - setLike에 변수와 함수를 할당하게 된다
🤔❓ -> 꼭 구조분호 할당으로 할당해야 하는가 ? (관습으로 사용한다고 한다 넘어가자)

이를 사용하여 상태값을 변경하면 React가 자동으로 랜더링 하게 되어 다시 랜더링 할 필요없는
데이터는 useState를 사용하지 않음으로 자원을 아낄 수있는 이득이 있다

useState를 알기 위해서 퀴즈를 풀어보자
click like 버튼을 눌렀을 때 '😍' 이모지가 나타나고,
다시 click like 버튼을 눌렀을 때는 ''가 되도록 해보자

import React, { useState } from 'react';

function Hello(props) {
  const [like, setLike] = useState('');

  function clickLike() {
    if (like === '') {
      setLike('😍');
    } else {
      setLike('');
    }
  }

  return (
    <>
      <button onClick={clickLike}>click like</button>
      <span>{like}</span>
    </>
  );
}

export default Hello;

결과 화면 👉

이번엔 기분의 상태를 표시하는 앱을 만들어보자 !

• 제작 가이드
  • 컴포넌트를 만들어주세요. 기본적으로 App.js, 버튼, 버튼 리스트, 정보창 등의 컴포넌트가 필요할겁니다. 다 만들어지면 화면에 잘 랜더링 되는지 배치해봅시다.
  • 스타일링을 해봅시다. 만들어진 컴포넌트마다 스타일 파일을 붙여서 구현해보세요.
  • 기능을 구현해봅시다. 버튼을 클릭 했을 때 해당 버튼의 기분이 하단 정보창에 표시되도록 해보세요.