react4 [RN] React native의 기본형태 import React from 'react';import {SafeAreaView, View, Text, StyleSheet} from 'react-native';const App = () => { return ( react );};const styles = StyleSheet.create({});export default App; 2024. 4. 30. [React] Suspense React.Suspense Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 react에 내장되어 있는 기능이다. const SomeComponent = React.lazy(() => import('./SomeComponent')); lazy를 통해 import 하면 해당 path로 이동할때 컴포넌트를 불러오게 되는데 이 과정에서 로딩하는 시간이 생기게 된다. 이 로딩되는 시간동안 로딩 화면을 보여지도록 해주는 역할을 하는 것이 바로 Suspense이다. data fetching 과정이 이루어지고 컴포넌트가 마운트 되도록 하고 그 시간동안 로딩 화면을 보여주도록 Suspense를 활용할수 있다. Suspense component에.. 2024. 4. 3. [Next.js] 서버기능 만들려면 전체 폴더 위치에다가 pages폴더 만들고 그 안에 api폴더 만들고 그 안에 test.js같은 파일 만들면 된다. 이런식으로 만들자!! 일단 get요청을 테스트 해보자 export default function handler() { console.log(123); } 코드를 이렇게 입력하고 인터넷주소창에 localhost:3000/api/test 이렇게 입력해보자! 몹시 성공적 export default function handler(req, res) { console.log(123); return res.status(200).json("안녕"); } 이렇게하면 응답까지 해준다!!!! post 서버기능 만들려면 form을 이용하면 된다!!! export default function Write() { .. 2024. 2. 20. useNavigate # useNavigate - 특정행동을 했을때 해당 주소로 이동시켜주는 역할을 한다. - 로그인이 되어있을경우 버튼을 누르면 navigate('/mypage')가 실행되어 mypage로 이동한다. - link와 달리 함수 호출을 통해 특정 조건에 따라 페이지를 이동할수있다. #과제중에 fe-sprint-react-twittler-spa 부분중 useNavigate를 이용해서 뒤로가기 버튼을 만드는 부분 const App = () => { const navigate = useNavigate(); const goBack = () => { navigate(-1); }; const goForward = () => { navigate(1); }; return( 앞으로가기 뒤로가기 ); 2023. 2. 19. 이전 1 다음
