[FE] React 폴더 구조 및 JSX,Emotion 이해

1. react 폴더 구조
   react가 포함된 next.js 프로젝트를 설치하고 나서의 초기 폴더 구조를 보일러 플레이트라고 한다.

• 중요했던 내용
  - node_modules 폴더는 설치한 라이브러리,패키지들이 담겨있는 폴더이고 git으로 커밋할 때는 제외시켜야 한다
  - pages 폴더에 들어가자마자 보이는 index.js 파일은 localhost로 처음 접속 했을 때 나오는 첫 페이지를 보여주는 코드
  - pages에서 폴더를 만들고 index.js를 생성하면 해당 폴더(디렉토리)의 첫 페이지를 만들 수 있다.
  ex) pages/hello에 index.js를 생성한 뒤 http://localhost:3000/hello 로 접속하면 만들었던 첫 페이지를 확인할 수 있다.
  - pages/_app.js 파일은 설정 파일로써 모든 페이지가 시작되기 전에 맨 처음 1번 실행되는 파일이다.

2. JSX
   리액트에서 쓰이는 html을 JSX라고 한다.
   기존 html 문법과 아주 약간 다른데 JSX로 쓰면 코드가 훨씬 간결해진다.
   예를 들어 속성 중 class는 className로 써야하고
   button 태그 속성 중 onclick은 onClick으로 대문자를 조심해야 한다.

3. Emotion
   html, css 코드를 따로 쓰지 않고 styles 폴더에 js 파일만 만들어서 html 태그와 css를 한꺼번에 지정할 수 있다. 변수처럼 만들어서 활용 가능하다.

<styles에 넣을 파일>

//emotion 적용하기 전에 꼭 넣을 import문
  import styled from "@emotion/styled";

  //html 태그 및 스타일 지정
  export const Label = styled.div`
    font-size: 14pt;
    margin: 5px 0px;
  `;

적용할 때는

import {Label} from "../../styles/emotion";

이 때 불러올 import, 내보낼 export 요소들을 잘 구분해서 써주자!

cf) export와 import 간단 정리
export: 변수,함수,클래스 앞에 붙이는 키워드로 모듈의 기능을 외부에서 사용할 수 있도록 내보내는 역할
import: export로 내보낸 모듈을 가져오는 역할