Side-Projects2 [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] 비밀번호 보기/숨기기 기능 안녕하세요. 리액트 공부에 한창인 좋아요요정입니다! 비밀번호 보기/숨기기 기능 공유합니다 ① 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. 이전 1 다음
