React에서 Horizontal line만들기(feat.Or)

Horizontal line은 한구국어로 수평선정도로 번역할 수 있을 것 같다. 위 인스타그램 사진의 로그인 아래있는 -or- 이 horizontal line이라고할 수 있다(편의상 수평선이라고 부르겠다).

개인적으로 유용하게 자주 사용할 것 같아 utils 디렉터리를 만들어 HorizontalLine.js를 만들었다.

구조는 아래와 같다.

import React from "react";

const HorizonLine = ({ text }) => {
  return (
    <div
      style={{
        width: "100%",
        textAlign: "center",
        borderBottom: "1px solid #aaa",
        lineHeight: "0.1em",
        margin: "10px 0 20px",
      }}
    >
      <span style={{ background: "#fff", padding: "0 10px" }}>{text}</span>
    </div>
  );
};

export default HorizonLine;

이후 사용하고 싶은 곳에 넣어 text props에 OR를 넣어주면 된다.

<HorizonLine text="OR" />

그러면 위 인스타그램 사진처럼 or이 가미된 수평선을 사용할 수 있다.

참고로 태그 안에 직접 스타일링하는 것은 좋지 않다. 허나 react 사용에 미숙해서 일단 저렇게 사용했다.