WEBUCKS-React 시작

개강 후 2주동안 html, css, 바닐라 js로 3개의 페이지를 만들었다.

1. Login.html
2. List.html
3. Detail.html

이 세 페이지를 React로 다시!!! 만들어야하는 여정의 시작은 먼저 react를 사용할 수 있는 환경을 만드는 것.

CRA으로 환경을 만들고, 잘 옮겨나가다가 ... 파일에 오류가 있어서 모두 삭제 후 재설정을 한 다음에야 문제의 이유를 알았다...

파일 구조는 index.js가 가장 위, 그 아래에 위의 세개의 파일을 js로 저장했다.

index.js

import React from "react";
import ReactDOM from "react-dom";
import Login from "./Login";

ReactDOM.render(
	<React.StrictMode>
    	<Login />
    </React.StrictMode>
    document.getElementById("root")
);

가장 상위에 import 부분에 react가 있길래, js에서 react를 사용한다는 걸 알리려면 모든 파일에 react를 import 하는 거라고 생각했다. 그러나 그렇게 작성하면 오류가 발생한다.

이유가 뭘까? TIL에서 써보자

page 중에 하나인 login.js

login.html을 그대로 옮긴 코드이다. (오해ㄴㄴ)

function Login (){

  return (
    <section className="login-box">
      <figure className="logo">
        <img src="image/logo.png" alt="logo" />
      </figure>
      <form className="login-form-box">
        <input
          type="text"
          className="login-id-input"
          placeholder="전화번호, 사용자 이름 또는 이메일"
        />
        <input
          type="password"
          className="login-password-input"
          placeholder="비밀번호"
        />
        <button>
          로그인
        </button>
      </form>
      <div className="lost-password-box">
        <a href="">비밀번호를 잊으셨나요?</a>
      </div>
    </section>
  );

}

export default Login;

하위 page인 js에서는 react를 import하지 않는다. 하면 오류가 있다.

scss, router를 추가

import "./Login.scss";
import { Link, useNavigate } from "react-router-dom";

function Login() {
  const navigate = useNavigate();

  const goToList = () => {
    navigate("/list");
  };
  return (
    <section className="login-box">
      <figure className="logo">
        <img src="image/logo.png" alt="logo" />
      </figure>
      <form className="login-form-box">
        <input
          type="text"
          className="login-id-input"
          placeholder="전화번호, 사용자 이름 또는 이메일"
        />
        <input
          type="password"
          className="login-password-input"
          placeholder="비밀번호"
        />
        <button
          onClick={() => {
            goToList();
          }}
        >
          로그인
        </button>
      </form>
      <div className="lost-password-box">
        <Link to="/">비밀번호를 잊으셨나요?</Link>
      </div>
    </section>
  );
}

export default Login;

스타일을 위한 scss랑 page간의 이동을 위한 Link와 useNavigate만 쓰게 된다.

이유와 원리는 아직 모르더라도, 기본 형식을 제대로 구분하는 게 필요한 것 같아서 다시 정리해본다.