본문 바로가기

분류 전체보기402

로컬스토리지 기본 사용법 1. 데이터 저장localStorage.setItem(key, value)를 사용하여 데이터를 저장할 수 있다. 여기서 key는 문자열로 된 키, value는 문자열로 된 값이다.localStorage.setItem('username', '장원영');2. 데이터 읽기localStorage.getItem(key)를 사용하여 데이터를 읽을 수 있다. 해당 키가 존재하지 않으면 null을 반환한다.let username = localStorage.getItem('username');console.log(username); // 장원영3. 데이터 삭제localStorage.removeItem(key)를 사용하여 특정 키의 데이터를 삭제할 수 있다.localStorage.removeItem('username');.. Programing/JavaScript 2024. 5. 23.
043. React - useEffect useEffect란?리액트에서 컴포넌트의 사이드 이펙트를 제어하는 훅.사이드 이펙트는 직역하면 '부작용'이고, 리액트에서 표현하는 사이드 이펙트는 어떤 기능에서 '의도하지 않은 부수적인 효과', 내지 '파생되는 효과' 정도의 개념이다.사용방법import하기// state import 하기import { useEffect } from "react";원형 작성하기const [count, setCount] = useState(0);useEffect(()=>{},[]);// 두 개의 인자를 받는데 첫번째는 콜백함수, 두번째는 의존성 배열(Dependency Array)// 해석은 Deps의 값이 변경되면 콜백함수가 실행됨.위와 같이 useState 훅과 동시에 사용 가능. 카운트 앱에서 사용되는 count st.. Programing/React 2024. 5. 23.
042. React - 라이프사이클 개념리액트의 컴포넌트도 마치 인간처럼 생애주기(life cycle)을 갖는다. 탄생-변화-사망의 단계이다.리액트 컴포넌트의 경우, Mount - Update - Unmount로 표현한다.Mount (탄생)컴포넌트가 탄생하는 순간화면에 처음 렌더링 되는 순간Update (변화)컴포넌트가 다시 재 렌더링 되는 순간재 렌더링 될 때를 의미Unmount (죽음)컴포넌트가 화면에서 사라지는 순간렌더링에서 제외될 때를 의미컴포넌트의 라이프사이클을 관리해야 하는 이유성능을 최적화 하며 웹을 개발할 수 있다.예를 들어 Mount 될 때 서버에서 API를 받아올 수 있고, 컴포넌트가 Update 될 때 어떤 값이 변경되었는지 콘솔에 찍어보며 관리할 수 있고, 컴포넌트가 Unmount 될 때 컴포넌트가 사용하던 메모리를 .. Programing/React 2024. 5. 23.
052. React - 페이지 라우팅 - 동적 경로 동적 경로(Dynamic Segment)란?예를 들어 쇼핑몰에서 1번 상세페이지는 /product/1, 2번 상세피이지는 /product/2가 붙는 것처럼 동적으로 경로가 생성되는 것을 의미함.동적 경로의 방식 2가지URL Parameter/ 뒤에 id를 명시하는 방법.아이템의 id와 같이 변경되지 않는 값을 고유의 경로로 설정하기 위해 사용함.~/product/1~/product/2~/product/3Query String? 뒤에 변수명과 값을 명시하는 방법.포털 사이트에서의 검색어와 같이 수시로 변경되는 값을 주소로 명시하기 위해 사용함.~/search?q=검색어URL Parameter 사용 방법Route path에 :id 명시하기} />해당 컴포넌트로 가서 usePrams 커스텀 훅 import 하.. Programing/React 2024. 5. 23.
051. React - 페이지 라우팅 - 페이지 이동 Link로 이동시키는 법Link 컴포넌트 import하기// App.jsximport { Routes, Route, Link } from "react-route-dom";return문 내부에서 link 컴포넌트 호출하기function App() { return ( Home Diary Detail } /> } /> } /> } /> );}Button으로 이동시키는 법useNavigate 훅 import 하기// App.jsximport { Routes, Route, useNavigate } from "react-route-dom";useNavigate 훅을 변.. Programing/React 2024. 5. 23.

티스토리툴바