롤 mbti#2: 프론트 작업 간만 보기

개발한 순서대로 어떻게 진행해왔는지 공부하고, 생각한 내용을 정리하고자 합니다.

reset-CSS

리액트에서 리액트스럽게(..!) 사용할 수 있는 방법을 찾다가 styled-reset란 라이브러리를 발견해서 사용해주었다. App.jsx(tsx)에서 다음과 같이 가장 상위에 추가해서 사용하면 된다.

import React from "react";
import { Reset } from "styled-reset";

function App() {
  return (
    <>
      <Reset />
      <div className="App">
        <header className="App-header">
        </header>
      </div>
    </>
  );
}

export default App;

interface

interface란, 그야말로 interface이다. (다른 언어에도 있는)
재사용 되는 곳에 사용할 수 있는데 이를 리액트에서도 사용할 수가 있다.

type을 사용할 수 있지만, 둘 중에 하나 일관적으로 사용하면 된다.
객체를 이용할 때 interface를 이용해 선언해 type을 정해주기로 했다.

interface vs. type

interface에서 사용할 수 있는 기능들은 type에서도 사용 가능하다.
하지만, type은 같은 이름으로 여러 번 선언하는 것이 불가한 반면, interface는 선언적 확장이 가능하다.

이는 새로운 속성을 추가하는 방향으로도 사용될 수 있다..!

Styled-components

CSS-in-JS를 이번에도 사용했다. 저번 프로젝트 때 사용했을 때 편했던 느낌이 있어서.. 고대로 도입을 해주었다.
props를 받아와서 설정을 해주는 점이 편했기 때문인데, 이번에 사용을 하다보니 어려운 점을 발견했다.

상위 div에 hover 되었을 때, 하위 태그의 색을 변경해주고 싶었는데 그 설정에 대해 고민을 하다가 찾은 방법은 다음과 같았다.

• 하위 태그에 className을 설정한다.
• 상위 태그에서 CSS로 하위 해당 class에 효과를 준다.

코드로 표현하면 아래와 같았다.
나의 경우, svg로 되어있는 로고를 white 색상으로 바꿔주고 싶었다.

const test = styled.div`
  &:hover .logo {
    fill: white;
  }
}

리액트에서 svg 사용하기

리액트에서 svg 파일을 사용하는데에는 여러가지 방법이 있다.

1. Img에 소스로 넣기
2. ReactComponent 이용하기
3. 라이브러리를 이용하여 component로 사용하기

지난 프로젝트에서는 path의 d 값을 따로 객체로 저장한 다음에 불러오는 식으로 설정을 했는데, 이번에는 2번 방법을 이용하기로 했다.
사용하는 방법은 굉장히 쉬운데, 코드로 표현하면 다음과 같다.

import { ReactComponent as Facebook } from "../Icons/svg/facebook.svg";
<Facebook fill="blue"/>

이 방법이 1번 보다 좋은 이유는 width나 위에 Fill처럼 svg에 지정해 주고 싶은 옵션을 넣어줄 수 있다는 점이다. :-) 좋은 방법 같다.