[React] http://localhost:5173/ 초기 화면을 분석해보자.

 

 

 

참고로 React에 대해서 잘 모릅니다.

아무거나 막 해보는 중이고 옳은 정보인지 저도 모릅니다!

 

 

---

 

 

초기 화면과 코드를 보고
어떻게 동작하는지 분석해보자!

 

1. 화면

 

화면을 살펴보면, Vite와 React 아이콘 이미지가 있다. 이때 React 아이콘 이미지는 빙글빙글 회전한다. 그리고 count is 0 버튼을 누르면 0이 점점 올라가는 걸 볼 수 있다. 

 

 

 

 

---

 

 

 

 

2. 파일

• 전체 파일

 

 

• jsx와 css의 차이점

jsx는 화면 구조와 로직을 담당한다. 어떻게 배열할건지 그리고 어떻게 동작할건지 설정하는 부분인 jsx 파일이다. css는 외형을 꾸미는 설정을 한다. 색상, 여백, 폰트 등을 담당한다.

Vue를 먼저 사용한 입장에서 알아보니, script와 template가 jsx 파일을 담당하고 style이 css를 담당하는 걸로 쉽게 이해할 수 있었다.

 

 

• App.jsx

// useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다.
import { useState } from 'react'
// 로고를 가져온다.
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
// App.css도 가져오자.
import './App.css'


// 첫화면이 보이도록 한다.
function App() {

  // useState는 값이 변경되면 다시 그려주는 역할을 한다.
  // count가 원래 값, setCount는 상태를 바꾸는 함수가 된다. 
  const [count, setCount] = useState(0)

  // 화면에 보이고 싶은 UI를 반환한다. 
  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      
      <div className="card">
        {/* 버튼을 클릭하면 setCount 함수가 호출되고 */}
        {/* count 값을 바꿔준다. */}
        <button onClick={() => setCount((count) => count + 1)}>     
          {/* 여기서 count가 표시된다. */}
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}


// main.jsx에서 import 하기 위해 내보내자.
export default App

useState는 배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 규칙이다. 예로 const[age,setAge]=useState(28); 이런식의 구조를 띄어야한다. useState는 정확히 두 개의 값을 가진 배열을 반환한다. [state의 초기 설정값, 다른 값으로 업데이트하고 리렌더링을 촉발할 수 있는 set 함수]를 반환한다.

이때 주의사항은 useState는 Hook으로 컴포넌트의 최상위 레벨이나 직접 만든 Hook에서만 호출할 수 있다. 반복문이나 조건문 안에서는 호출할 수 없고, 필요한 경우 새 컴포넌트를 추출하고 state를 그 안으로 옮겨야 한다.

배열 구조 분해에 대해서도 짧게 설명을 해보겠다. let arr = ["Bora", "Lee"]로 이름과 성을 요소로 가진 배열이 있다. 배열 구조 분해(구조 배열 할당)는 let [firstName, surname] = arr;로 firstName엔 arr[0]을, surname엔 arr[1]을 할당하는 것이다. 이제 인덱스를 이용해 배열에 접근하지 않고도 변수로 이름과 성을 사용할 수 있게 되었다.

 

 

- react의 usestate

useState – React

 

 

- 자바스크립트의 구조 분해 할당(배열 구조 분해)

구조 분해 할당

 

 

 

• App.css

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

#root는 메인화면의 크기와 text의 배치 등을 설정했다.

.logo는 className="logo"인 Vite 로고의 스타일을 지정했다. 그런데 React 로고도 적용된걸 확인할 수 있다. React 로고 클래스 이름은 class="logo react"이다. CSS에서는 .logo라고 적으면 클래스 이름에 logo가 들어간 모든 클래스에 적용될 수 있어서 리액트 로고에도 해당 스타일이 지정됐다. 

로고에 마우스를 가져다 대면 로고 뒤에 옅은 그림자가 보이는걸 확인할 수 있다. 그걸 지정하는게 :hover인데, 해당 코드는 그림자를 애니메이션으로 보여지도록 했다. .logo에 보면 will-change와 transition이 있다. will-change는 변화하기 전에 브라우저에게 미리 최적화를 시켜두도록 한다. 그리고 transition으로 300ms 동안 부드럽게 애니메이션하도록 설정했다. filter는 요소에 그래픽 효과를 적용하는 CSS 속성이다. 솔직히 무슨 보정을 해주는지 잘 모르겠다. 이건 다음에 다양하게 속성을 지정하면서 차이를 알아보도록 하자.

마우스를 가져다 댄 로고는 그림자가 나타나는데, 아주 자세히 보면 이 두 로고의 그림자 색상이 다른걸 알 수 있다. Vite 로고는 보라색이고, react는 파란색이다. 그래서 :hover에선 각 클래스 이름을 정확하게 적어줬다. drop-shadow가 그림자를 나타낸다.

 

 

- will-change

will-change - CSS: Cascading Style Sheets | MDN

 

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

화면을 보면 React 로고가 빙글빙글 돌고 있다. 빙글빙글 돌게 하는 코드가 위의 코드가 된다. 전에 Vue로 토끼와 거북이 경주게임을 간단하게 만든 적이 있었는데, 그때 @keyframs를 사용했다. 그때의 기억을 되짚어보면 keyframs는 단계별로 동작을 어떻게 나눌지 정하는 역할을 했다. 그래서 0%에는 토끼와 거북이가 어디에 있을지 정했고, 50%는 어디의 위치에 있을지를 정했다. 이 코드에서는 그냥 빙글빙글 돌면 되기 때문에 0%인 from은 0도이고, 마지막 100%인 to는 360도로 설정했다.

원래는 to가 되면 멈춰야한다. 그런데 이 로고는 멈추지 않고 계속 빙글빙글 돌고 있다. 그걸 @media에서 설정한다. animation에서 logo-spin인 즉, 0도에서 360도로 움직임을 변경했던 것을 infinite로 무한 반복하도록 설정했다. 한바퀴를 돌 때 20초가 걸리며, linear로 속도가 일정하도록 했다. 

로고는 총 두 개였다. Vite 로고와 React 로고가 있었다. 로고는 분명 두 개인데, 어떻게 React 로고만 돌고 있을까? animation 위의 코드인. a:nth-of-type(2) .logo를 보면 알 수 있다. App.jsx 코드를 다시 보면 <a>는 로고를 설정하는데 사용하고 있다. 같은 부모를 가진 a 요소 중에 두번째 a, 그 중 페이지 구조상 두 번째 링크 내부의 로고만 돌리도록 한 것이다. 

@media는 미디어 쿼리를 지정할 수 있는데, 조건에 따라 CSS를 선택적으로 적용하게 해준다. 이 코드에선 prefers-reduced-motion: no-preference로 사용자가 움직임 줄이기를 켜면 움직이지 않도록 하면서 이 조건이 a 요소의 두번째에 사용되도록 조건을 세웠다. 이런 조건 말고도 찾아보니, 사용자 화면 크기에 따른 반응형 레이아웃 같은 것도 있었다.

 

 

- @media

@media - CSS: Cascading Style Sheets | MDN

 

 

- media queries

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

 

 

 

• index.css

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }

index.css에는 프로젝트 전체에 적용되는 공통 스타일을 지정한다. 그리고 여기서는 사용자가 라이트 모드일 때, 각 컬러들을 바꾸도록 조건을 세웠다.

 

 

 

• main.jsx

// StricMode는 개발 모드에서만 동작하는 진단 도구이다.
import { StrictMode } from 'react'

// creatRoot가 Root 객체를 반환한다.
// React 18의 새 루트 API
import { createRoot } from 'react-dom/client'

// 전역 스타일을 전용시킨다.
import './index.css'

// App.jsx의 default export를 가져온다.
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

main.jsx는 리액트 앱을 페이지에 붙이는 역할을 하는 파일이다. 작성한 App과 index를 가져와서 실제 화면에 보이도록 하는 역할을 한다.

document.getElementById('root')는 index.html에 있는 <div id="root"></div>를 찾아오라고 시킨다. 그러면 createRoot로 이제 찾아온 부분을 리액트에서 관리하도록 한다. <StricMode>는 개발 중에만 있는 것으로, 이 모드 안에서 <App />을 그리라는 것이다.

좀 이해하기 어려운 것 같다. 대충 비유를 들어 설명하면 <div id="root"></div>는 액자, main.jsx는 액자를 찾는 역할, 액자 안에서만 App을 그리도록 Rect가 시키는 것으로 보면 되지 않을까 싶다.