말랑말랑제리스타일

React 레이아웃에 공통적으로 사용할 버튼이 필요해 플로팅 버튼을 추가해 봤습니다.버튼을 누르면 위로 다른 버튼들이 펴지는 형태로 코딩해 봤고 펴지는 로직이 생각보다 어려웠네요.React 플로팅 버튼 버튼 리스트 생성먼저 FloatingButton.js 파일을 생성하고 버튼 리스트를 생성해 줍니다.각 버튼에는 id, text, onClick 메서드를 갖도록 하고 플러스 마이너스 버튼은 따로 추가해 줄 거라 이 리스트에서는 포함하지 않습니다.import { useState } from "react";function FloatingButton({styles}) { const buttonList = [ {id: "Cbtn", text: "C" ,onClick:cBtnClick}, {id: "Rb..

React JS로 프로젝트를 진행하고 있는데 아래 화면과 같이 헤더 잘림 현상이 발생했습니다.개인적으로 헤더, 푸터 잘림 현상을 없애고 스크롤 바를 없애려고 시도해 봤는데요.그 과정을 알려드립니다.React JS에서 Header 잘림 현상 원인 확인일단 레이아웃의 JS 소스와 CSS 소스부터 봅시다.function Layout({title, footermessage, menu_list}) { return ( );}Layout 파일의 JS 소스입니다.헤더는 클래스가 따로 없고, 내부에도 header 태그로 감싸주기만 했습니다...

React Router 6.x 버전으로 올라오면서 생긴 기능으로 Link 대신 Nav Link를 사용해서 현재 표시 중인 링크를 확인할 수 있게 되었는데요. active link라고 하는 그 기능을 이용해 봤습니다.기존에 Active를 사용하지 않았던 소스 일단 기존에 Active를 사용하지 않았던 소스는 아래와 같습니다.import { Link } from "react-router-dom";function Sidebar({ menu_list, styles}) { return ( {menu_list.map((menu) => ( ..