2024. 5. 23. 리액트 styled components, router dom

import './App.css'

import styled from 'styled-components';

const StBox = styled.div`

  width: 100px;

  height: 100px;

  border: 1px solid ${(props) => props.borderColor};

  margin: 20px;

`

const boxList = ["red", "green", "blue"];

const getBoxName = (color) => {

  switch (color) {

    case "red":

      return "빨간 박스";

    case "green":

      return "초록 박스";

    case "blue":

      return "파랑 박스";

    default:

      return "검정 박스";

  }

}

function App() {

  return (

    <div>

      {/* <StBox borderColor="red">빨간 박스</StBox>

      <StBox borderColor="green">초록 박스</StBox>

      <StBox borderColor="blue">파랑 박스</StBox> */}

      {

        boxList.map((boxColor) => {

          return (<StBox key={boxColor} borderColor={boxColor}>{getBoxName(boxColor)}</StBox>)

        })

      }

    </div>

  );

}

export default App

 

 

styled-components

는 React 에서 CSS를 작성하고 관리하기 위한 라이브러리 입니다. 이 라이브러리를 사용하면 컴포넌트에서 스타일을 작성할 수 있으며, 스타일이 해당 컴포넌트에 캡슐화되기 때문에 스타일 충돌을 방지할 수 있습니다.

 

장점

---

각 컴포넌트의 스타일이 해당 컴포넌트 내에서 정의되므로 모듈화가 용이함.

 

스타일과 컴포넌트가 같은 파일에 있어 코드 관리가 편리함.

 

props를 통해 스타일을 동적으로 변경할 수 있어 확장성이 좋음.

 

 

 

 

단점

---

자바 스크립크와 CSS 를 통합하는 방식에 익숙해지기까지 오래 걸릴수도 있다.

 

런타임에 스타일을 계산하므로 성능에 영향을 줄 수 있다.

 

일부 개발 도구나 에디터에서 CSS 파일에 비해 지원이 미흡할 수 있다.

 

 

 

---

react-router-dom

은 React 에서 라우팅을 관리하기 위한 표준 라이브러리입니다. SPA(Single Page Application)에서 URL을 통해 페이지를 전환하고 관리할 수 있게 도와줍니다. 이 라이브러리를 사용하면 브라우저의 주소창을 사용해 사용자에게 다양한 뷰를 제공할 수 있으며, 브라우저가 새로고침 되지 않고도 애플리케이션의 다른 부분으로 이동할 수 있습니다.

 

 

 

라우터 돔을 적용시키다가 문제에 직면했다.

 

Router 를 import 하려는데 경로가 ./shared/Router 로 뜨지 않고 react-router-dom 으로 떠서 연결이 되지 않는 것.

 

 

생각보다 간단한 해결방법이였는데, 내가 Router 를 export 해주지 않고 import 하려고 해서 그렇다고 한다.

 

8번째 줄 참고

 

 

8번째 줄의 const 앞에 export 키를 넣어준 후에 다시 app.jsx 로 가서 router import 를 시도하니 정상적인 경로가 보였다.

 

 

 

router dom 도 적용시켰고, styled components 도 활용해서 UI 는 어느정도 구성이 됬는데,

지금부터가 문제인 것 같다.

 

입문 주차의 코드를 참고한다면 월별 지출 항목 등록 구현은,, 할 수 있을 것 같은데

상세 페이지로 이동 후 수정하는 과정은 조금 더 생각을 해봐야 할 것 같다.