[TIL] 2023-04-06 DAY16

---

리액트(+테일윈드)

GIT 주소 : https://github.com/dowoo303/react-worldcup

---

• 오늘 배운것들

1. use-context
   차크라 UI, useContext와 provider(컴포넌트가 복잡해지면 사용)
2. chara-ui-2
   차크라 UI 설치해보고 간단한 동작 해보기(App.jsx, App.jsx.bak)
3. worldcup 게임 만들기
   이상형 월드컵 게임 -> react-router, useState, useEffect

• 각종 팁

1. 빠르고 간단하게 할거면 chakra-ui, 디테일하게 디자인을 만져야 하는 작업에는 테일윈드 추천
2. REACT는 최상위를 항상 div같은태그로 감싸줘야하는데, div같은 태그를 사용하고 싶지 않을 경우 React.Fragment(혹은 그냥 빈 태그<>)를 사용해서 최상위 태그로 묶어줘도 됨

차크라 UI 설치 및 간단한 동작해보기

1. npx create-react-app chakra-ui-2 -> chakra-ui-2라는 폴더에 설치하기라는 뜻
2. css 삭제
3. https://chakra-ui.com/getting-started/cra-guide -> 설치 메뉴얼
4. https://chakra-ui.com/docs/components -> 다양한 컴포넌트들을 사용하려면 설치 or import가 필요

이상형 월드컵 게임

onClickChoice 이차함수

: 밖에서 인자를 하나 받았을 경우 이차함수로 늘려서 사용


-> onClick이벤트에서 animal이라는 인자를 하나 더 추가 했기 때문에 이차함수 사용

react push 방법

: setNextRound([...nextRound, v]);
...의 의미 : 배열 펼침
...을 이용하여 배열을 펼친 후 새로운 값인 v(animal)를 배열에 추가해준다