우사미 코딩

import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){ const[animals, setAnimals] = useState([]); const handleClick = () =>{ setAnimals([...animals, getRandomAnimal()]); console.log(animals); } return ( Add animal {animals} ); } export default App; lin..

위와 같이 아주 심플한 페이지가 이씁니당 add animal 버튼을 클릭하면 아래 숫자가 1씩 업데이트되어 렌더링하도록 할 거예염 그럼 우리가 이때 일반 javascript라면 그냥 변수를 선언하고 값을 업데이트하면 되겠지만 ㄴㄴ 여기서는 그렇지가 않습니다 jsx에서는 state라는걸 사용해야하는거져 빨간 박스처럼 state가 component를 다시 렌더링해서 화면에 보이는 데이터를 업데이트 해준다고 합니다 state를 사용하려면 state를 import 해야겠죠? import { useState } from "react"; App.js 상단에 위 코드를 import 해줍니다 state 사용하는 방법은 const [변수명, setter함수] = useState(초기값) 입니당 setter함수가 변수값을..