[멋쟁이 사자처럼 블록체인 스쿨 3기] 23-04-06

chakra UI

chakra UI

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

터미널에서 인스톨.

import { Box } from "@chakra-ui/react"

// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />

// raw CSS color value
<Box color='#f00' />

// background colors
<Box bg='tomato' />

// verbose prop
<Box backgroundColor='tomato' />

다양한 UI 디자인이 이미 만들어져있는 상태.

그냥 가져와서 쓰면 되기에 매우 빠른 개발 가능.

하지만 디테일한 부분을 설정할 수 없다는게 단점.

---

React spread

리액트에서는 useState 로 상태 관리를 한다.

useState 내의 set 값은 함수이므로 .push

사용이 불가능하다. 그렇다면?

const [nextRound, setNextRound] = useState([]);

 const onClickChoice = (v) => () => {
   setChoice(choice + 2);
   setNextRound([...nextRound, v]);
 };

[...nextRound, v] 로 배열에 넣어줄 수 있다.