본문 바로가기

Study-Note/React2

[react] module styles.className 2개 사용 & 조건값으로 사용하는 패키지 classnames 안녕하세요! 좋아요요정입니다. className을 두개 이상 사용하고 싶을 때, 조건 결과값에 맞게 출력하고 싶을 때 사용하는 패키지를 소개합니다. 결과 미리보기 💕 - 동일한 card 컴포넌트인데 상단 3개는 main 클래스를 적용함. - 설정된 클래스명이 있을 경우 적용됨 1. 설치하기 Yarn add classnames //혹은 npm i classnames - 사용할 프로젝트에 설치해주세요! 2. 간단한 사용 방법(git에 작성되어 있는 내용) import classNames from 'classnames'; ... classNames('foo', 'bar'); // => 'foo bar' classNames('foo', { bar: true }); // => 'foo bar' classNames.. Study-Note/React 2021. 12. 20.
[react] 타이핑치는 효과 컴포넌트 안녕하세요! 코딩이 즐거운 좋아요요정입니다. 오늘은 재사용가능한 타이핑치는 효과 컴포넌트를 가지고 왔습니다. 포트폴리오를 만들면서 하나씩 정리해서 기록해보려고 합니다. :) (아잣아잣!) 오늘 소개하는 함수는 타이핑치는 효과 컴포넌트 입니다! 결과 미리보기💕 ① 인자값으로 test , speed, fontSIze, color를 받습니다. ② 기본값으로 speed = 100, fontSIze= 1em, color: 'black'을 가지고 있습니다. import React, { useState, useEffect } from 'react'; const TypingText = ({text, speed, fontSize, color}) => { TypingText.defaultProps = { fontSize:.. Study-Note/React 2021. 12. 18.

티스토리툴바