본문 바로가기

JavaScript41

[React] 페이징 만들기 분명히 자주 쓸거같아서 보고 빠르게 만들기 위해 블로그에 남겨두겠다 !! 양쪽 화살표를 누르면 현재 페이지에서 각각 -1, +1이 되도록 만들었다. 아직, 내가 7페이지에서 11페이지를 가려면 10을 누르고 >를 눌러야한다는 단점이 있지만.. > 버튼은 차차 수정하도록... // 전체 게시글 갯수 const cnt = 400; // 현제 페이지 번호 const [currentpage, setCurrentpage] = useState(1); // 마지막 페이지 번호 const finalPagenum = cnt % 12 > 0 ? Math.floor(cnt / 12) + 1 : Math.floor(cnt / 12); // 페이징 만들기 let pageArray = []; const paging = () =>.. 2023. 11. 24.
[React] 코드 실행 순서 도움이된 포스트 https://codingapple.com/unit/react-setstate-async-problems/ state 변경함수 사용할 때 주의점 : async - 코딩애플 온라인 강좌 (짧아서 글로 진행합니다) 자바스크립트의 sync / async 관련 상식 자바스크립트는 일반적인 코드를 작성하면 synchronous 하게 처리됩니다. 번역하면 동기방식 이런데.. 뭔소리냐면 코드 적은 순서 codingapple.com 최고의 강의 let [count, setCount] = useState(0); let [age, setAge] = useState(20); useEffect(() => { if (count !== 0 && count < 3) { setAge(age + 1); return; .. 2023. 11. 22.
평달 윤달 계산기 왠지 쓸일이 또 있을 것 같아서 정리해놓겠다 const [search_ym, setSearch_ym] = useState( moment(new Date()).format("YYYY-MM") ); const year = search_ym === "" ? "" : search_ym.split("-")[0] % 4 !== 0 ? "평달" : search_ym.split("-")[0] % 100 !== 0 ? "윤달" : search_ym.split("-")[0] % 400 === 0 ? "윤달" : "평달"; console.log(year); 2023. 11. 7.
useContext 써보기 이해하려면 역시 예시가 가장 필요한 것 같다 ... import React, { createContext, useContext, useState } from "react"; const MyContext = createContext(); function MyProvider(props) { const [num, setNum] = useState(""); const handleClick = () => { setNum('100'); }; return ( {props.children} ); } function MyConsumerComponent() { const sharedData = useContext(MyContext); // 컨텍스트 값을 가져옴 console.log(sharedData); // shared.. 2023. 10. 10.