뚝딱뚝딱 코딩 기록_

[React_ useEffect 활용하기] useState 업데이트가 한 박자씩 느린 경우를 해결하는 방법을 알아보자 리액트 useState를 사용하여 state를 업데이트 하다보면 한 박자 씩 느리게 나오는 되는 경우가 있다. useEffect를 사용하면 된다고 해서 사용을 해 보았는데 똑같은 결과가 출력되었다. - App.jsx import React, { useState } from 'react'; imoprt DataPage from './dataPage'; export default function App () { const [data, setData] = useState( { name: null, age: null, job: null, } ); // state 업데이트 함수 const upda..

[React Native_ Onboarding Screen] 온보딩 화면 만드는 방법에 대해 알아보자 ❓ 온보딩 화면 (Onboarding Screen) 💡 온보딩 화면이란 어플을 처음 설치한 후 실행했을 때 한 번만 나오는 화면을 말한다. 💡 어플 사용법 등의 내용이 간단하게 들어간다. 💡 어플을 처음 실행했는지 여부를 state에 업데이트하고 Local Storage에 저장한다. 1. 라이브러리 설치 yarn add @react-native-async-storage/async-storage yarn add react-native-pager-view or npm install @react-native-async-storage/async-storage npm install react-native-page..

[React_header title] 웹 페이지의 header title을 바꾸는 방법에 대해 알아보자 사진과 같이 header에 있는 title을 페이지마다 다르게 하고 싶을 수 있다. 그런 경우는 간단하게 바꿀 수 있다. import React, { useEffect } from 'react'; `````` useEffect(() => { const titleElement = document.querySelector("title"); titleElement.innerHTML = `바꾸고 싶은 내용`; }, []); 💡 document.querySelector로 title을 가져온 후 innerHTML을 사용하여 내용을 바꿔준다 💡 페이지마다 useEffect 를 사용하여 페이지가 렌더링 되었을 때 바..

[React_useNavigate] 리액트에서 화면 이동 방법에 대해 알아보자 1. 리액트 라우터 설치 npm install react-router-dom or yarn add react-router-dom 2. 라이브러리 임포트 import { BrowserRouter, Route, Routes } from 'react-router-dom'; 3. App.jsx - BrowserRouter export default function App () => { return ( //컴포넌트 ) } 4. path 지정 - Routes, Route `````` import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Component1 from..

[React_ react-create-app] 👉React 공식문서 바로가기👈 React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org ❔ React - UI 구축을 위한 자바스크립트 라이브러리 - html과 자바스크립트 표현식을 동시에 사용 가능 - Virtual DOM (가상 돔)을 생성하고 이전 상태와 비교하여 변경된 부분만 업데이트 ❓ React 설치 1. node.js 설치 👉 https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScr..