본문 바로가기

react5

[react] 사이드바 컴포넌트 구현하기(외부 클릭시 닫히는 기능 추가) 안녕하세요. 좋아요요정입니다! 2021년이 일주일 남았네요. :) 얌전히 포트폴리오 준비하기 좋은 겨울.. 오늘은 react로 사이드바 구현하는 방법을 작성합니다. 완성본 영상💕 컴포넌트 기능 1. {내용 직접 작성 혹은 내용이 들어간 컴포넌트} 로 컴포넌트는 따로, 내용 따로 가능합니다. 2. Sidebar 컴포넌트의 width값 변경이 가능합니다. 3. 사이드바가 오픈되어있을 때 외부를 클릭하면 사이드바가 닫히는 기능이 추가되어 있습니다. 컴포넌트 코드 import React, {useEffect, useRef, useState } from "react"; import styles from "./sidebar.module.css"; const Sidebar = ({ width=280, children.. Side-Projects/react 2021. 12. 27.
[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.
[react] object 깊은 복사하는 함수 안녕하세요! 좋아요요정입니다 :) 오늘은 object 깊은 복사를 진행했습니다. 테이블에 입력되는 column을 복제해서 일부 값을 수정하고 반환 수정하는데 setState를 선언하지 않았음에도 변경되었습니다. 이유는 { ... } 은 shallow copy를 하기 때문! const object = { a: 'aa', b: 'bb', c: ['c','cc'] } const copy = { ...object } 이 경우, object에는 데이터가 저장되는 것이 아니라 데이터의 값을 가리키는 참조값이 저장됩니다. 그 참조값을 복사해 데이터를 수정하니, 결국 그 내부의 값이 변경된 것입니다. 복사 전 변수도, 복사한 변수도 결국 같은 데이터를 가리키고 있던 것이죠. 깊은 복사하는 방법1 - JSON객체를 이용.. Journal/개발일기 2021. 12. 14.
[react] 비밀번호 보기/숨기기 기능 안녕하세요. 리액트 공부에 한창인 좋아요요정입니다! 비밀번호 보기/숨기기 기능 공유합니다 ① state : type과 visible의 키를 가진 오브젝트를 생성 ② 해당 아이콘 클릭 시, visible로 상태를 확인한 뒤 type과 visible 변경 기본 구조 import React, { useState } from 'react'; const Input = ({}) => { //password type 변경용 state const [passwordType, setPasswordType] = useState({ type: 'password', visible: false }); //password type 변경하는 함수 const handlePasswordType = e => { setPasswordTyp.. Side-Projects/react 2021. 5. 24.

티스토리툴바