분류 전체보기146 [React] Redux Redux : props 없이 state를 공유할 수 있게 도와주는 라이브러리 store에 데이터를 저장해두고 모든 컴포넌트가 꺼내 쓸 수 있게 함 Vue.js의 store랑 같은 친구인듯,,,ㅎ Redux 설치 ※ 설치 전 package.json 파일에서 'react', 'react-dom' 항목의 버전 확인 필요 => 18.1.X 미만의 버전이라면 사용 불가능!! // 18.1.X 미만의 버전인 경우 더보기 package.json 파일의 'react', 'react-dom' 항목을 다음과 같이 수정하고, 터미널에서 npm install 실행 프로젝트 터미널 열어서, $ npm install @reduxjs/toolkit react-redux Redux 셋팅 1. store.js 파일 생성 src/st.. 2022. 12. 19. [React] ajax AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 기능 => 실습에서는 axios 사용 설치 npm install axios 버튼을 눌러서 GET 요청 보내기 import axios from 'axios' { axios.get('url 주소!') .then((res)=>{ // 요청 성공 시 실행되는 함수 }) // 요청 실패 시 실행되는 함수 .catch((err)=>{console.log(err)}) }}>더보기 POST 요청 보내기 axios.post('URL', { 딕셔너리 데이터 }) .then((res)=>{ // 요청 성공 시 실행될 코드 }) .catch(()=>{ // 요청 실패 시 실행될 코드 }) 동시에 AJAX 여러개 Pr.. 2022. 12. 15. [React] Lifecycle 컴포넌트 Lifecycle 1. mount (생성) 2. update (재랜더링) 3. unmount (삭제) React에서 Lifecycle hook 쓰는 법 useEffect 안의 함수는 mount, update될 때 실행됨 useEffect 안의 함수는 html 렌더링 이후에 동작 import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 }); return (생략) } useEffect를 사용하는 경우 오래걸리는 반복 연산 서버에서 데이터 가져오는 작업 타이머 사용 시 useEffect 실행조건 설정하기 [ ] 안에 있는 변수나 state가 변경 될때 useE.. 2022. 12. 15. [React] - Router 1 react-router-dom 설치 $ npm install react-router-dom@6 setting // index.js import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); 라우터로 페이지 나누기 // App.js import { Routes, Route, Link } from 'react-router-dom' function App(){ return ( (...생략) ) } (맛없는) 페이지 이동 버튼 Home Detail (맛있는) 페이지 이동 기능 - useNavigate() import { ...생략 , .. 2022. 12. 13. [정보처리기사] 신처기 요약 2022. 12. 12. [SQLD] SQLD 대비 요약 2022. 12. 12. [컴퓨터일반] 전자계산기 구조론 요약 2022. 12. 12. [컴퓨터일반] 프로그래밍 언어론 요약 2022. 12. 12. [컴퓨터일반] 데이터베이스 요약 2022. 12. 12. [컴퓨터일반] 운영체제론 요약 2022. 12. 12. 이전 1 ··· 4 5 6 7 8 9 10 ··· 15 다음
