반응형 컴퓨터/CSR (React, Vue)22 [React] useState 사용하는이유 (1)_기본형 변수 useState 데이터 상태 관리를 위한 훅 입니당... useState 사용하는 이유 state 가 변하면 생기면 html도 자동으로 재렌더링해주기 때문입니다. useState 로 만든 버튼과, 일반 변수로 만든 버튼이 있습니다. /* eslint-disable */ import { useState, useReducer } from 'react' export default () => { const [ onoff, setOnOff] = useState(false); let onoff2 = false; const whenClick=()=> { console.log('useState의 값',onoff); setOnOff(!onoff); } const whenClick2=()=> { console.log('일.. 2023. 6. 12. [React] useReducer 뜻과 의미, 완전쉽게 사용해보기😃 useReducer useState 대체 훅 입니다. useState 로는 보통 숫자형 문자열 같은 간단한 데이터를 관리하는데 반해 useReducer 는 객체 같은 복잡한 데이터를 관리합니다. 저도 예전에 회원정보 관리할때 로그인 상태를 관리하기 위해서 useReducer 를 사용했는데 처음에 익힐때는 어려웠지만 한번 써보니까 굉장히 편하더라구여 useReducer 사용해보기 버튼 눌렀을 때 값을 증가/감소 시키는 로직을 useReducer 훅을 사용해서 짜왔습니다. /* eslint-disable */ import { useReducer } from 'react' export default () => { const initialState = { count: 0 }; function reducer(st.. 2023. 6. 10. [React] 리액트에 카카오 공유버튼 추가하기(kakao api) 카카오톡 api 는 엄청 자세하고 친절한 편입니다. 잘 읽어보면 충분히 혼자서도 가능합니다. + 카카오톡 공유 기능은 자신의 웹 페이지가 배포되어있는 상태여아 작동합니다!!!! 카카오톡 공유 기능 추가 시 해야할 것들 입니다. 순서대로 1. 카카오톡 api 사이트 들어가기 2. 회원가입 또는 로그인 3. 내 어플리케이션 > 어플리케이션 추가하기 4. 문서 > 시작하기 > javascript 4-1 index.html 에 복사하기 5. 메세지 > 카카오톡 공유:javascript 5-1 js 키 init 1. 카카오톡 api 사이트 들어가기 https://developers.kakao.com/docs/latest/ko/message/common Kakao Developers 카카오 API를 활용하여 다양한.. 2023. 5. 21. [Vue] 뷰 router 4버전 설치 및 사용_ nested routes (5) 뷰.js 에서 사용하기 뷰의 router.js 의 children 에 array로 적어주면 사용가능 const routes = [ { path: "/detail/:id", component: DetailContent, children:[ { path: "info", component:InfoPage }, { path: "post", component:PostPage }, ] }, ]; 주소/detail/10/info 주소/detail/100000/post 이런 주소 사용 가능😃 nested routes nested routes 가 뭐냐면 하위 URL 경로를 가지는 라우트를 구성하는 것 티스토리 글쓰고있는 주소인데 주소/어쩌고/어쩌고 이렇게 되어있음 어쩌고~~ 가 하위 url 경로임 끗 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_ url parameter (4) 뷰js 에서 사용하기 뷰의 router.js 의 path 에 /detail/:id 꼴로 적어주면 url parameter 를 사용할 수 있음 const routes = [ { path: "/detail/:id", component: DetailContent, }, ]; + /detail/:id/:id2/:id3 이렇게 파라미터 여러개 전달 가능 https://gallery-k.tistory.com/408 [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 .. 2023. 4. 3. [Vue] 뷰 router 4버전 설치 및 사용_라우터 주요 태그 종류 (3) https://router.vuejs.org/guide/ vue-router 4 참고... 주요기능 1. router-view 2. router-link 홈 리스트페이지 3. named views 여러개 컴포넌트를 보여줄 때 /list 방문 시 여러 컴포넌트들을 한번에 보여줄 수 있음 + 등등....😗 redirect 도 있음 찾아보면 나옴 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 $router.go(1) 앞으로 한페이지 이동 $router.go(-1) 뒤로가기 한번 (-2는 두번) 제목 2. route $route: 현재 URL 정보가 담겨있음 $route.params: 현재 URL 정보의 파라미터 (여러개 존재할 수 있음) $route.params.id: 현재 URL 정보의 id 파라미터 {{블로그글[$route.params.id].title}} 2023. 4. 1. [Vue] 뷰 router 4버전 설치 및 사용 (1) 1. 설치npm install vue-router@4 yarn add vue-router@4 2. main.js 에 라우터 세팅import router from './router' // 원래 여기서 라우터를 설정을 하는데 // 코드가 기니까 router 파일을 따로 만들어서 import 한다. createApp(App).use(router).mount('#app') 3. router.js 만들기import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/list", component: DetailList.vue, }, ]; const router = createRouter({ history: createWeb.. 2023. 4. 1. 이전 1 2 3 다음 반응형
