ksw_devlog

(전역) 상태 관리 라이브러리 redux middleware - redux-saga - redux-thunk - redux observable 서버 상태 관리 라이브러리 - react query react-query로 ajax 요청하는 법 그냥 ajax 요청해도 되는데 react-query를 써서 ajax 요청을 날리면 더 편리한 기능을 제공합니다. function App(){ let result = useQuery('작명', ()=> axios.get('https://codingapple1.github.io/userdata.json') .then((a)=>{ return a.data }) ) } useQuery 라는걸 상단에서 import 해온 뒤에 useQuery()로 ajax 요청을 감싸면 됩니다...

[서버] 유저가 데이터달라고 요청을 하면 데이터를 보내주는 간단한 프로그램 서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야한다. 1. 어떤 데이터인지 (URL 형식으로) 2. 어떤 방법으로 요청할지 (GET or POST) 데이터를 가져올 때는 보통 GET 데이터를 서버로 보낼 때는 POST GET/POST 요청 -> 브라우저가 새로고침이 되는 단점이 있음 AJAX : 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능 요청방법 1. XMLHttpRequest라는 옛날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 // 3번이 가장 편함 터미널 열어서 npm install axios im..

[Redux] Redux의 state 변경하는 법 - state 수정해주는 함수 만들고 - 원할 때 그 함수 실행해달라고 store.js에 요청 1. state 수정해주는 함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } } }) 2. 만든 함수 export 해주기 export let { changeName } = user.actions -> 오른쪽 자료를 변수로 빼는 문법 3. 만든 함수 import해서 사용, dispatch(state변경함수()) import { changeName } from "../store"; let di..

페이지 여러개 만들고 싶으면 : URL파라미터 사용 유저가 URL파라미터에 입력한거 가져오려면 useParams() (참고) URL 파라미터 만들 때 - 여러 개 가능 let YellowBtn = styled.button` background: ${ props => props.bg }; color : black; padding : 10px; ` 버튼 버튼 참고1) 간단한 프로그래밍 가능 참고2) 기존 스타일 복사가 let YellowBtn = styled.button` background: ${ props => props.bg }; color : ${ props => props.bg == 'blue' ? 'white' : 'black'}; padding : 10px; ` let NewBtn = style..

리액트 이미지 태그안에 소스 수정

./경로 import './App.css' --- public 폴더 이용하기 html에서 public폴더 이미지 사용할 땐 그냥/이미지경로 ex) /logo192.png 권장방식 : 다른 파일에 있던 자료 가져오려면 impor / export 문법 사용 다른 파일에 있던 변수 가져오려면 -> 1. 변수를 export하고 (가져오려는 파일에서) / 변수 여러개 하려면 -> export {변수1, 변수2} 2. import 하면 끝 / 변수 여러개 하려면 -> import {변수1, 변수2} from '경로' ex) (data.jsx) let a = 10; export default a; (App.jsx) import 작명 from './data.jsx'; ---- 함수, 컴포넌트도 export가능

리액트로 모달창 만들기 [동적인 UI 만드는 step] 1. html css로 미리 디자인완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 작성 (조건문 등으로) {중괄호} 안에는 if문 사용불가 -> html 중간에 조건문 쓰려면 삼항연산자 { modal == true ? : null // null은 비어있는 html용으로 자주사용 } [반복문으로 같은 html 반복생성하는 법] map()사용법 1. array 자료 갯수만큼 함수안의 코드 실행해줌 2. 함수의 파라미터는 array안에 있던 자료임 3. return에 뭐 적으면 array로 담아줌 map()으로 같은 html 반복생성하는 법 ({중괄호}안에서는 for문말고 map함수 사용) { title.map..

[리액트] JSX문법 1. class 대신 className 2. 변수 넣을 땐 {중괄호}, 데이터바인딩은 {중괄호} 3. style 넣을 땐 style={{스타일명 : '값'}} +카멜케이스 (ex. font-size => fontSize) return() 안에는 병렬로 태그 2개 이상 기입금지 자료 잠깐 저장할 땐 변수, state 써도 됨 state 만드는 법 1. import{useState} 2. useState(보관할 자료) 3. let[작명, 작명] 왜 state 써야할까? -> 변동시 자동으로 html에 반영되게 만들고 싶으면 state를 써야한다. 일반 변수는 갑자기 변경되면 html에 자동으로 반영안됨 state는 갑자기 변경되면 state쓰던 html은 자동 재렌더링됨 onClick(..