리액트6 [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. [React] 블로그 제작 4 - input 에 입력된 값 가져오기 // 이벤트 핸들러 부착 후, 현재 입력된 값 출력하기 { console.log(e.target.value) }}/> 주로 변수 명은 e로 사용함 e.target : 현재 이벤트가 발생한 곳 알려줌 e.preventDefault() : 이벤트 기본 동작 막아주기 e.stopPropagation() : 이벤트 버블링 막아주기 (이벤트가 상위 div로 퍼지는 현상) 사용자가 input에 입력한 데이터 저장하기 state 하나 생성해주고 이벤트가 발생할 때마다 e.target.value를 state에 갱신 function App (){ let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) console.log(입력값) }}.. 2022. 12. 7. [React] 블로그 제작 3 - map, props JSX 안에서 html 반복 생성? 1. map 함수 사용 function App() { let [titles, f] = useState(['크로스핏 컴백한 날', '운동하는데 첫 눈 왔당', '서울 가야하는 이유 + 1']); // 버튼 클릭시 좋아요 +1 => 자주 변경될 것이기 때문에 state 사용 let [likes, plus] = useState([0, 0, 0]); return ( (생략...) { // i는 0부터 1씩 증가하는 수 titles.map((title, i)=>{ return ( { title } { let likes_copy = [...likes]; likes_copy[i] += 1; plus(likes_copy) }}>👍 { likes[i] } 11월 30일 작성됨 ) }).. 2022. 12. 7. [React] 블로그 제작 2 - 동적인 UI, 삼항연산자 동적인 UI 만들기 - 사용자가 조작 시 형태가 바뀌는 UI 동적인 UI 만드는 3단계! 1. html, css로 미리 UI를 만들기 2. UI의 현재 상태를 state로 저장 3. state에 따라서 UI가 어떻게 보일지 코드 작성 예시) 모달창 띄우기 1. html, css로 미리 UI를 만들기 // App.js function Modal() { return ( 제목 날짜 상세 내용 ) } // App.css .modal { margin-top: 20px; padding : 20px; background : #eee; text-align: left; } 2. 현재 상태 저장 // UI의 현재 상태 let [modal, setModal] = useState(false); 3. state에 따라서 UI가.. 2022. 12. 7. 이전 1 다음
