react10 Redux :: useDispatch / useSelector https://nnuoyos.tistory.com/302 저번 포스팅에 이어서 react redux 공식 문서에 나와있는 대로 사용해준다 dispatch 함수의 액션은 객체 형태로 되어 있다 dispatch({type: , payload: }) 반드시 타입이라는 key가 있어야 하고 액션 안에는 payload 가 있는데 이건 옵션처럼 사용할 수 있다 useDispatch를 통해 액션을 던져준 것이다 App.js import { useState } from 'react'; import './App.css'; import { useDispatch } from 'react-redux'; function App() { const [counter, setCounter] = useState(0); const dis.. 2022. 10. 5. Redux 지난번에 제작하고 있던 쇼핑몰 페이지를 예를 들어 app.js 에서 props로 authenticate를 계속 사용해왔다 자식 컴포넌트끼리의 props가 오고가지 않기 때문에 장바구니 컴포넌트를 만든다고 하면, 자식 컴포넌트끼리 공유가 안되기 때문에 App.js 에 카트라는 스테이트를 생성해놓고 각각의 컴포넌트에 props로 던져주는 형식이 되어야 한다 리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로 state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다 리덕스는 일종의 저장소 라고 생각하면 된다 store라는 저장고를 만들어서 state를 저장해놓고 각각의 컴포넌트들이 필요에 의해 요청할 때 마다 컴포넌트가 부모이나 자식이나 상관없이 값을 store에서 가져올 수 있.. 2022. 9. 30. React :: shopping site 만들기 05 검색 기능 만들기 const search = () => { console.log("on key press 확인",search) } 글자를 입력할 때 마다 계속 온키프레스가 실행 된다 하지만 엔터를 눌렀을 때만 작동하도록 수정하고 싶다 const search = (event) => { if (event.key === "Enter"){ console.log("on key press 확인",search) } } 이제 엔터가 눌러졌을 때만 실행이 된다 input 안의 검색어 내용을 불러오고 싶을 때는 event.target.value 을 사용한다 (이벤트 안에 값이 있기 때문에) const search = (event) => { if (event.key === "Enter"){ let keyword = even.. 2022. 9. 20. React :: shopping site 만들기 04 상세 페이지 만들기 import React, {useEffect} from 'react' const ProductDetail = () => { const getProductDetail = () => { } useEffect(()=>{ getProductDetail() },[]) return ( ) } export default ProductDetail 디테일 페이지 url 끝에 오는 id 값을 추출하기 위해 usePrams 를 사용한다 let url = (`http://localhost:5000/products/${id}`) ProductDetail.js import React, {useEffect} from 'react' import { useParams } from 'react-router-dom' .. 2022. 9. 19. React :: shopping site 만들기 03 로그인 창 만들기 Navbar.js import React from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { faUser } from '@fortawesome/free-regular-svg-icons'; import {faSearch} from '@fortawesome/free-solid-svg-icons'; import { useNavigate } from 'react-router-dom'; const Navbar = () => { /* 코드의 재생산, 유지보수를 위해 메뉴의 배열을 만들어준다 */ const menuList = ['여성','Divided','남성','신생아/유아','아동','H&.. 2022. 9. 16. React :: shopping site 만들기 02 https://nnuoyos.tistory.com/292 React :: shopping site 만들기 01 /폰트어썸 리액트 https://fontawesome.com/v5/docs/web/use-with/react React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 폰트어썸 리액트 용 App.js.. nnuoyos.tistory.com 지난 포스팅에 이어서 계속!😊 쇼핑몰 api 를 직접 만들어 본다 클라이언트와 서버 통신 하기 json server npm 사용하기 npm install -g json-server 명령어 json-server.. 2022. 9. 15. React :: shopping site 만들기 01 /폰트어썸 리액트 https://fontawesome.com/v5/docs/web/use-with/react React Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world. fontawesome.com 폰트어썸 리액트 용 App.js import './App.css'; import { Routes, Route } from "react-router-dom"; import ProductAll from './page/ProductAll'; import Login from './page/Login'; import ProductDetail from './page/ProductDetail'; import Navba.. 2022. 9. 15. React :: Router / Restful Route 페이지를 여러개 만들어주기 App.js import './App.css'; import Aboutpage from './page/Aboutpage'; import Homepage from './page/Homepage'; function App() { return ( ); } export default App; https://reactrouter.com/en/main/getting-started/installation Installation Installation This document describes the most common ways people use React Router with various tools in the React Ecosystem. Basic Installation Most .. 2022. 9. 5. React :: 날씨 앱 만들기 https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. openweathermap.org 날씨 api 가져오기 회원 가입 후 사용한다 로직 //1. 앱이 실행 되자 마자 현재 위치 기반의 날씨가 보인다 //2. 지금 현재 도시와 온.. 2022. 8. 29. React :: 버튼 클릭시 숫자 카운트 되기 새 프로젝트 폴더를 만들고 npm start를 해도 실행이 안되면 경로충돌이 일어난 경우일 수 있으므로 새로 다시 시작해보는게 좋다 리액트에서는 클릭! onClick => c를 대문자로 표기한다, onClick 뒤에 {} 가 사용된다 App.js import './App.css'; function App() { let counter = 0; const increase = () => { counter += 1; console.log('카운터 확인!', counter); }; return ( {counter} 클릭! ); } export default App; UI는 변함 없으나, 확인용 콘솔창에는 클릭시 숫자가 올라감을 확인할 수 있다 UI에도 숫자가 바뀌는 것을 보여지도록 수정해야 한다! 리액트에서는 s.. 2022. 8. 12. 이전 1 다음
'react' 태그의 글 목록
