React.js21 React 특정 DOM으로 스크롤 이동시키기 ref 리액트에서 ref는 DOM에 직접 접근할 때 사용합니다. 저는 특정 div태그들에 직접 접근해서 해당 위치로 스크롤을 이동시키기 위해, 이 ref를 사용했습니다. import React, { useRef } from 'react'; function HomePage() { ... const homeRef = useRef(null); ... return ( ... ) } 이 처럼 div태그에 homeRef를 지정해주었습니다. 이제 클릭 이벤트를 생성해서, 해당 ref 위치로 가게 설정해보겠습니다. function HomePage() { ... const homeRef = useRef(null); const onHomeClick = () => { homeRef.current?.scrollIntoView.. 2021. 8. 19. 회원가입(SignUp) 페이지 비밀번호 내용 보이기 input태그의 type을 password로 주면 입력한 내용이 *** 처럼 보이지 않는다. 요즘 대부분의 서비스를 보면 비밀번호 오른쪽에 이모티콘을 클릭 시, 입력한 내용을 확인하고 다시 숨길 수 있는 기능이 있다. 이 기능은 이모티콘을 클릭하면 type을 text로 바꾸고 다시 클릭하면 password로 바꿔주는 간단한 기능이다. boolean state를 활용하여 아래와 같이 input의 type을 동적으로 넣어준다. ... const [hidePassword, setHidePassword] = useState(true); const toggleHidePassword =()=>{ setHidePassword(!hidePassword); } ... 2021. 8. 10. React.js Dropzone 라이브러리 사용하기 공식 문서 : https://react-dropzone.js.org/ 공식 문서를 기반으로 작성합니다. 라이브러리 설치 npm install --save react-dropzone yarn add react-dropzone or: yarn add react-dropzone 기본 사용법( 훅스를 사용하는 방식으로 작성했습니다. ) import React, {useCallback} from 'react' import {useDropzone} from 'react-dropzone' function MyDropzone() { const onDrop = useCallback(acceptedFiles => { // Do something with the files console.log(acceptedFiles) }.. 2021. 4. 11. 이전 1 2 3 다음
