Day : 16
React : 6

1. Chakra UI

: tailwind와 같은 디자인 프레임워크
: 리액트에서 사용할 수 있는 UI 라이브러리
: UI Tool이기 떄문에 css, tailwind를 사용했을 때 보다 빠른 작업이 가능
: 그 만큼 자유도는 떨어짐

Chakra 설치

: https://chakra-ui.com/getting-started/cra-guide
1. installation
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Provider Setup

//App.js
import { Box, ChakraProvider } from "@chakra-ui/react";
function App() {
return (
  <ChakraProvider>
    <Box>Hello, React</Box>
  </ChakraProvider>
);
}
export default App;

➕ Modal 창이란?

: 모달창은 기존의 브라우저 페이지 위에 레이어를 까는 것
: 모달창은 제거를 하지 않고도 페이지를 이동하면 자연히 사라짐
: 기존의 페이지와 부모-자식 관계
: 브라우저의 새 창 제어 옵션에는 전혀 영향을 받지 않음
( 팝업창과의 차이 : 팝업창은 브라우저 페이지에 또 다른 브라우저 페이지를 띄움)

2. Worldcup page (miniProject)

새로 알게 된 내용

• 리액트에서는 push 사용이 안됨 => setNextRound([...nextRound, v]);과 같이 [...기존배열, 추가할 값]으로 표현

• <React.Fragment> : 빈태그
  - jsx 문법에서는 return 문 안에는 반드시 하나의 최상위 태그가 있어야 함 (JS는 하나의 컴포넌트만을 리턴할 수 있기 때문)
  - 따라서 요소들을 하나의 태그로 감싸는 작업이 필요함
  - 이때 <div>가 엄청나게 많이 사용되는데 div 지옥을 막기 위해서 <React.Fragment>를 사용
  - <React.Fragment>는 공식적으로 "나 의미 없음! 빈태그임!"이라고 지정해준 아이
  - <React.Fragment></React.Fragment> = <Fragment> </Fragment> = <> </> ; 사람들이 길게 쓰기 싫어서 점점 줄임. 다 같은 의미

• <React.StrictMode>
  :npx create-react-app 명령어로 react를 설치할 경우, 개발할 때만 적용되는 엄격모드
  : 콘솔에 두 번 뜸
  : 리액트는 렌더링 단계와 커밋 단계 두가지의 단계로 동작하는데 이때 발생한 오류를 잡기위함

도움 받은 링크
Chakra )
: https://velog.io/@leeeunbin/TIL-React-UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-5%EA%B0%80%EC%A7%80
: https://velog.io/@choichoijin/%EC%B0%A8%ED%81%AC%EB%9D%BC-UI%EB%A5%BC-%EC%95%84%EC%8B%9C%EB%82%98%EC%9A%94
modal ) :https://velog.io/@hoon0123/%EB%AA%A8%EB%8B%AC%EC%B0%BD%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90-feat.-zIndexs-feature-in-Javascript
: https://chlolisher.tistory.com/101
React문법 )
:https://velog.io/@lilyoh/React-Fragments-%EC%82%AC%EC%9A%A9%EC%9D%B4%EC%9C%A0-%EB%B0%8F-%EC%82%AC%EC%9A%A9%EB%B2%95
: https://chiefcoder.tistory.com/33
: https://velog.io/@kysung95/%EC%A7%A4%EB%A7%89%EA%B8%80-react-strict-%EB%AA%A8%EB%93%9C%EB%9E%80