본문 바로가기

프론트엔드로 가는 길/react13

EmailJS 오류 시키는 대로 했더니 뭐가 안되노 const ContactForm = () => { const formRef = useRef(null); const sendEmail = (e: { preventDefault: () => void }) => { e.preventDefault(); emailjs.sendForm("***", "***", form.current, "***").then( (result) => { alert("성공적으로 이메일이 전송되었습니다."); form.current.reset(); }, (error) => { console.log(error.text); alert("이메일이 전송이 실패되었습니다."); } ); }; return ( 답변 받으실 이메일 문의 제목 문의 내용 ); }; expo.. 2023. 11. 6.
12. react_redux 확실하게 정리하기 우선 알아야 할 것 Store Slice Reducer UseSelector Dispatch Store 등록하는 곳 Slice state를 가지는 애 Reducer setState 함수가 될 수 도 있는 state를 다루는 함수 - Action(액션)을 Reducer(리듀서)에 전달해야한다. - state에 전해져 온 값을 payload에 담겨져오고 그걸로 할당하고 반환 UseSelector 가져다쓰기 Dispatch reducer를 실행하기 위한 훅 redux 기본 개념 3가지 1. Single source of truth - 스토어 : 하나 뿐인 데이터 공간 2. State is read-only - 리액트는 setState 메소드를 활용해야만 상태변경, 리덕스에서도 액션이라는 객체를 통해서만 상태 .. 2023. 5. 22.
11. DatePicker DatePicker는 사용자가 날짜를 선택할 수 있는 UI 요소입니다. 주로 웹 사이트나 애플리케이션에서 날짜를 입력해야 할 때 사용됩니다. 사용자가 원하는 날짜를 선택하면 해당 날짜를 뷰에 표시하거나 해당 날짜를 서버에 전송할 수 있습니다. 1. DatePicker 설치하기 npm i react-datepicker 2. DatePicker 코드 적용하기 기간 설정하는 DatePicker 만들기 1) import import DatePicker from "react-datepicker"; 2) 시작 날짜, 종료 날짜 데이터 useState 저장 // dateRange는 [startDate, endDate] 형태의 배열을 값 가짐 const [dateRange, setDateRange] = useState.. 2023. 4. 18.
10.Rechart Recharts는 React.js를 기반으로 한 데이터 시각화 라이브러리입니다. Recharts는 다양한 차트 유형, 축 스케일링, 사용자 정의 라벨, 축 조절 및 기타 시각화 관련 기능을 제공합니다. 1. Recharts 설치하기 npm install recharts --save 2. Recharts 코드 적용하기 1) import import { ResponsiveContainer, ComposedChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, } from 'recharts'; 2) component 추가 2023. 4. 17.

티스토리툴바