[React] 소셜웹페이지 - 자바스크립트 ➡️ 리액트 변환

자바스크립트로 구현해놓은 페이지를 리엑트로 옮겨 똑같이 기능하도록 만들어보았다.

 

react-router-dom

npm install react-router-dom --save

리액트는 싱글 페이지 어플리케이션(SPA)이다. 즉, 리액트 프로젝트는 index.html으로 하나의 HTML을 사용하며 한 개의 웹에서 여러 개의 페이지를 보여주는 방법에는 라우팅이 있다.

 

라우팅이란 url 주소에 따라 다른 화면을 보여주는 것이다. 리액트에 내장된 기능이 없으므로 이런 써드파티 라이브러리를 설치해 사용해야 한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
// 컴포넌트로 사용하기 위해 import 해준다.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<Login />} />
        <Route path="/findpw" element={<Findpw />} />
        <Route path="/main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
}

리액트 앱이 'http://localhost:3000/' 에 열려있기 때문에, path에 맞는 주소를 넣어주면 그 컴포넌트로 이동한다.

import { Link } from "react-router-dom";

<Link to="/findpw">
  비밀번호를 잊으셨나요?
</Link>

라우터를 사용할 수 있기 때문에 <Link>컴포넌트를 사용해 내부 경로로 연결할 수 있다. 외부 링크의 경우 <a> 태그를 사용해야 한다. Link컴포넌트 사용 시 to=''에 경로를 지정해주는 것은 필수이기 때문에, Link 컴포넌트를 쓰고 to=''를 사용하지 않으면 오류가 발생한다.

 

Sass

npm install sass --save

리액트에 옮겨오면서 scss로 css를 작성했다. 상속관계가 훨씬 깔끔하게 나타나고, 클래스를 훨씬 덜만들게 되어서 깔끔하게 정리할 수 있었다.

 

리액트는 랜더링되면서 파일이 합쳐져 클래스명이 겹치면 다른 컴포넌트에도 css가 적용되는 문제가 생길 수 있어 module.scss로 파일을 생성했다. 

opasity

로그인 입력창에서 아이디에 @가 들어가 있다거나, 비밀번호가 5자리 입력되어있을 때 로그인 버튼을 활성화하도록 구현했었다. 바닐라 JS로 만들 때는 버튼 활성화 여부에 따라 색 값 자체를 다르게 줬었는데 이번에 불투명도로 조절하는 방법을 알게 됐다.

  const changeDisabled = () => {   
    if (idValue.includes("@") && pwValue.length >= 5) {
      setDisabled(false);
      setOpasity(1);
    } else {
      setDisabled(true);
      setOpasity(0.5);
    }
  }
  
  ///////////////////
    <button
    disabled={disabled}
    style={{
      opacity: opacity,
    }}
  >
    로그인
  </button>

opacity(0.5)

opacity(1)

+) 버튼의 비활성화, 불투명도 변경이 일어나는데 입력값을 한칸씩 늦게 입력되는 오류가 있었다. 즉 아이디는 '@' 입력 후 다른 입력 하나가 더있어야 했고, 비밀번호도 6자리에서 활성화되었다.

  const [idValue, setIdValue] = useState('');
  const [pwValue, setPwValue] = useState('');
  const [isValid, setIsValid] = useState(false);

  const handleIdInput = (e) => {
    let id = e.target.value
    setIdValue(id);
    id.includes("@") && pwValue.length >= 5
      ? setIsValid(true)
      : setIsValid(false)
  };
  const handlePwInput = (e) => {
    let pw = e.target.value
    setPwValue(pw);
    idValue.includes("@") && pw.length >= 5
      ? setIsValid(true)
      : setIsValid(false);
  };

ID와 PW의 입력을 onChange를 통해 매 입력마다 검증하도록 해서 해결했다.