React

NextJS통신하기

앞서 1탄에서 말했듯이 리액트 프레임 워크로써 거의 모든 리액트 문법이 사용가능! useEffect함수를 사용하여 첫랜더링시에 데이터를 요청한다! 이번 api는 단순하다 해당 api로 fetch함수로 통신하고 jsondata로 받는다! useEffect(() => { const fetchData = async () => { try { const res = await fetch('/api/handleStatistics'); const jsonData = await res.json(); setBranchData(jsonData); } catch (error) { console.error('API 호출 에러:', error); } }; fetchData(); }, []); 혼자 독학하는부분이라 쓰임새가 다를수..

링크쿼리로 NextJS통신하기!

NextJs 통신하는방법! api로 현재 페이지와 페이지 갯수를 전달하면 json데이터로 반환받는 함수이다! 데이터를 각각의 usestate함수로 관리! Next도 리액트라이브러리와 다르지 않고 리액트를 기반으로 작동하는 프레임워크이기때문에 거의 모든 리액트 함수를 사영할수있다는 것이 포인트! const fetchData = async () => { try { const res = await fetch( `/api/handleStatus?page=${currentPage}&pageSize=${pageSize}`, ); const jsonData = await res.json(); setStatusData(jsonData.data); setTotalDataCount(jsonData.totalPages); ..

React! useState와 useEffect를 사용한 아주 아주 간단한 예제!

바로 시계 만들기! 내가 원하는 건 바로 째깍 째깍 자동으로 시간이 리셋되는 시계를 만드는 것이다. js를 사용하면 쉽게 만들 수 있지만 우리는 HOOKS를 사용해 만들어보자! 사용한 hook은 useState와 useEffect를 사용하여 만든 시계입니다! 기존에 설정했던 조건에 맞게 시간이 자동으로 돌아가게 만들었습니다. useState를 사용하여 new Date()함수를 지정했고 useEffect 첫번쨰 인자를 사용하여 setTime에 새로운 시간을 할당해줍니다. 시간은 1초마다 진행되므로 두번째 인자값에 1000ms를 삽입하여 1초마다 new Date()함수가 실행되고 매초 새로운 인자값이 setTime에 할당되므로 uesEffect는 계속 반복됩니다. 더 쉬운 방법이 있을수 있으나 저는 toLo..

React Hooks 5.useMemo

useMemo란? component 성능을 최적화 하기 위해 사용한다! 동일한 값을 리턴하는 함수를 반복적으로 호출한다면 맨처음 값을 계산할때 해당 값을 메모리에 저장해 재사용하는 기법이다. useMemo의 구조! 기본적으로 첫번째인자는 callBack함수를 받으며 return값을 반환해준다! 두번째 인자인 배열은 의존성 배열로 언제 업데이트 할지를 설정할수 있다. 빈배열이라면 맨처음 렌더링 될때 함수가 작동하며 그 때 계산한 값을 사용한다. 위의 사진과 같이 [item] 요소의 값이 업데이트 될때 다시 함수가 작동한다! 계산기로 알아보는 useMemo! 결과화면! 왜일까? 어려운 계산과 쉬운계산 모두 딜레이가 있다. 어려운 계산은 고의로 속도를 지연시키기 위해 큰수를 반복하도록 설정해놓아 딜레이가 생기..