예방이의 개발일기

react-range-slider-input 라이브러리를 사용해서 range bar를 만들어 봤다. (툴팁이 있는 버전으로) react-range-slider-input는 별도로 툴팁나오는 옵션이 없어서 ul태그를 이용해서 만들어줬다. https://www.npmjs.com/package/react-range-slider-input react-range-slider-input React component wrapper for range-slider-input. Latest version: 3.0.7, last published: 4 months ago. Start using react-range-slider-input in your project by running `npm i react-range-sl..

import React, { useState } from 'react'; function ProductItem({ name, rank, onClick }) { const isSelected = rank > 0; const remainingCount = 3 - rank; const countText = isSelected ? `(${rank}/3)` : ``; const buttonLabel = isSelected ? '취소' : '상품 비교'; return ( {name} {countText} {buttonLabel} {!isSelected && remainingCount === 0 && ( 3개 이상 선택할 수 없습니다. )} ); } export function App(props) { const [r..

참고하면 좋은 사이트 1. 리액트 공식 사이트 https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 주요개념 탭안에 내용 참고하면 좋음 2. CRA 공식 사이트 https://create-react-app.dev/ Create React App Set up a modern web app by running one command. create-react-app.dev 3. 리액트 1도 모르는 사람을 위한 튜토리얼 https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.L..