React23 [리액트] 모달창 외부 클릭 시, 꺼지게 하기 웹 개발을 하게 되면, 모달창을 불가피하게 만들어야 하는 상황이 찾아오곤 합니다. 하지만, 단순히 창을 껐다 켰다 하면 속 편하겠지만, 모달창 외부를 클릭했을 때, 모달창을 꺼지는 기능을 만들어야 깔끔합니다. 이번에는 모달창 외부 클릭 시 On/Off를 만들어 볼 예정입니다. 문서 구조 App.js 전체 코드 import "./styles.css"; import React, {useState, useEffect,useRef } from 'react'; import Modal from "./modal.js" export default function App() { const [ModalState, setModalState] = useState('false'); //모달창의 상태를 보관해 둘 useState.. 2022. 11. 15. [리액트] 반응형 페이지 만들기(react-responsive) 반응형 웹 개발을 하다 보면, 모니터 전체 화면으로 볼 때 문제없던 화면이, 웹 브라우저 크기를 줄이거나 태블릿 혹은 스마트폰으로 봤을 때 화면 비율이 맞지 않는 현상을 쉽게 볼 수 있습니다. 이 문제를 해결하기 위해 웹페이지의 크기가 기기의 크기에 맞게 `재조정`되는 것을 `반응형`이라고 말합니다. 전통적인 방식으로 Media Query를 자주 사용하지만, 화면 비율별로 기능을 다르게 하고 싶다면 react-responsive를 사용을 추천드립니다. pm install react-responsive 설치가 필요합니다. import "./styles.css"; import { useMediaQuery } from 'react-responsive' export default function App() {.. 2022. 10. 7. [리액트] 부모 컴포넌트에서 자식 컴포넌트 함수 작동과 자식 컴포넌트에서 부모 컴포넌트 작동하는 법 리액트를 사용하다 보면 상위에 있는 컴포넌트 함수를 호출하거나 반대로 하위의 함수를 호출하고 싶을 때가 있습니다. 구조가 위와 같이 설계가 되었을 때 1) 부모 버튼을 눌렀을 때, 자식의 컴포넌트가 반응하고 싶거나 2) 자식 버튼을 눌렀을 때, 부모의 컴포넌트가 반응하고 싶을 경우 1) props를 이용합니다. App.js Child.js props.parentFunction(); 원하는 함수(parentFunction)를 태그에 넣어 준 후, 자식 컴포넌트에서 props.parentFunction()으로 작동시킵니다. 2) useRef를 이용합니다. App.js const childRef = useRef(); childRef.current.childFunction(); Child.js import Re.. 2022. 9. 22. [리액트] 로그인 회원가입 기능 구현 리액트를 이용한 회원가입과 로그인을 만들어보겠습니다. 비밀번호는 영어/숫자/특수문자를 포함한 6자 이상으로 설정했습니다. 1) 회원가입 전체 코드 import "./styles.css"; import React, { useState } from 'react' export default function App() { let userId = document.querySelector('#userId'); let passwordForm = document.querySelector('#userPW'); let re_passwordForm = document.querySelector('#re_password'); const [inputs, setInputs] = useState({ userId: '', userPW.. 2022. 9. 7. [리액트] useState 사용법 useState는변수 값이 바뀔 때마다, 화면에서 동적으로 업데이트를 해주는 도구를 제공해줍니다. useState를 사용하기 위해서 useState를 import 해줍니다. [Import] import { useState } from 'react'; [선언] const [state, setState] = useState(선언할 값); [활용] 버튼 클릭 시, 카운터가 올라가는 예제입니다. 버튼을 누를 때마다, useState에 값이 업데이트가 된 것을 확인할 수 있습니다. import "./styles.css"; import React, { useState } from 'react'; export default function App() { const [Cnt, setCnt] = useState(0); .. 2022. 8. 23. 이전 1 2 3 다음
