첫 React 프로젝트(1)

트러블 슈팅을 해야 하는데 내가 가장 큰 트러블일 경우를 서술하시오.

1. 컴포넌트? 가 도대체 뭐죠?

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

처음 리액트 프로젝트를 생성하면 나오는 바로 이 파일. main.jsx 이다.
이외에도 수많은 파일이 초기값으로 세팅되는데, 뭔지 몰라서 정리를 못 한 상태로 시작.

일단 import App from "./App.jsx"; 부분이 App.jsx 와 App.css 를 불러오겠다는거구나, 기본 css 는 import "./index.css"; 가 베이스로 되어 있구나,,그럼 저기다가 reset 코드를 넣고 시작해야겠다,,,정도만 느낌.

:root {
  background-image: linear-gradient(to bottom, #58ffcd 0%, #ffffff 100%);
  color: #343434;
}

이 부분은 튜터님께 새로 접한 정보! 전역 CSS 변수 선언에 유용하게 쓸 수 있다. 프로젝트 내에서 자주 사용하게 될 메인 컬러코드라던가 폰트 같은 것을 저장해둘 수 있다. SCSS 의 map-get 같은 건가 보다. 과제 하느라 정신이 없어 제대로 찾아보지 못 했지만, 이제 과제가 끝났으니 찾아봐야겠다 :)

import React, { useState } from "react";
import Header from "./Header";
import List from "./List";
import "./App.css";
import "./index.css";
import olympicRings from "./assets/free-icon-olympic-rings-1885314.png";

어떻게든 컴포넌트를 분리하기 위한 나의 노력,,,ㅠ
작은 프로젝트라 두개 정도로만 분리하면 될 것 같다고 맘대로 생각하기

---

2. useState,,,가 도대체 뭐죠

const App = () => {
  const [data, setData] = useState([]);
};

이 두 줄을 이해하는 데 두 시간? 정도? 걸렸다?
난 정말,,,개념이 이해가 되지 않으면 아무것도 할 수 없는 사람,,,,,,,

이것 때문에 프로젝트 시작하자마자 일단 5분간 눈물 닦기 실시.
아니 아무고또 모르겠는데 어떻게 프로젝트를 합니까?

HOWEVER

아무튼 [data, setData] = useState([]) 이 부분이 중요하다. 이걸 이해하면 프로젝트 반은 완성됨(?아님) 일단 내가 이해한 바로는, data 는 현재 상태가 저장된 변수 값이고, setData 는 상태를 업데이트 해주는 함수값이다. 그리고 useState() 의 괄호 안에 들어가는 것은 상태의 초기값이다. 바로 저 상태가 변경되면 해당 컴포넌트가 리렌더링된다. 그래서 쟤를 어떻게 해야됨.

const [data, setData] = useState([]);
  const [form, setForm] = useState({
    nation: "",
    gold: "",
    silver: "",
    bronze: "",
  });

그럼 이제 얘를 쓸 수 있다. 나는 전체 data를 변수로 setData 를 건드려서 데이터 처리를 할 것이고, useState([]) 여기에 [] 가 들어가는 이유는 이 데이터가 배열의 형태일 예정이기 때문.

그 밑에 [form, setForm] = useState({ nation: "", gold: "", silver: "", bronze: "", }) 부분도 어렵지 않다. 그냥 입력 폼을 form 으로 하고, setForm 을 건드려서 입력값의 상태를 변경할 것이고, useState() 안의 값은 입력할 폼의 초기값! 다 비워 놓음.

프로젝트 다했네 다했어.(?진짜 아님)

---

다음 게시물 예고

3. props,,,이것 뭐예요?
4. 어디 한 번 니가 아는 메서드를 다 써보자.
5. Delete 가 하고 싶어요,,,
6. 지옥의 CSS