[React] React 완벽 가이드 - JavaScript 복습

JavaScript

• 꼭 브라우저에서만 사용할 수 있는 것은 아님~ (모바일에서도 사용 가능)
• html 파일에 <script> 태그를 이용하여 로직을 작성할 수 있음

React에서의 Script

• React의 index.html 파일에서는 <script> 태그가 없음
  • 이유 : React는 Build Process 임

    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-scripts": "5.0.1"
    

• package.json 파일을 보면 react 관련 패키지가 3개가 있음
• 이중에 “react-scripts”가 html 파일에 <script> 태그를 넣는 기능을 제공함

Build Process를 사용하는이유

1. 처리되지 않은 React 코드는 브라우저에서 실행되지 않음
   • jsx(js파일에 html코드를 사용하게 해주는 문법)을 사용하기 위해선 변환을 거쳐야 해서 빌드 프로세스가 필요함
2. 코드가 충분히 최적화가 되지 않았다.
   • 코드 샌드박스가 만든 파일은 가독성은 없지만, 파일의 크기를 줄여 웹사이트 방문자의 페이지 로딩 속도를 높임

스프레드 연산자

const hobbies = ["Sports", "Cooking"];
const newHobbies = ["Reading"];

const mergedHobbies = [...hobbies, ...newHobbies];

• 이렇게 쓰면 배열 요소들 합치기

const user = {
  name: "Max",
  age: 34
};

const extendedUser = {
  isAdmin: true,
  ...user
};

• 객체에 스프레드 연산을 사용하면, 필드가 하나 추가됨