[React 숙련] REST API & Path Variable vs Query Parameter

1. REST API ▶ 어떤 자원에 대해 crud 할 수 있게 http method(GET, POST,PUT,DELETE) 사용하여 요청 보내는 것 ▶ URI를 통해 정보의 자원 표현 / 자원의 행위는 HTTP Method로 명시함 ▶자원 : URI / 행위 : Http Method / 표현 ▶ 규칙 (1) 명사 복수형 사용 / 소문자 작성 (2) 마지막에는 '/' 포함 x (3) 언더바 사용 x 하이픈 사용 (-) (4) 파일 확장자 표시 x ▶RestFul 하다 = 위의 REST API의 조건을 다 만족시킨 설계 상태 2. Path Variable vs Query Parameter ▶ 언제 왜 써야하는지 아는 것이 중요! ▶ GET method를 이용해 데이터 가져오면 (1) Path Variabl..

  • format_list_bulleted React
  • · 2023. 11. 9.
  • textsms

[React 숙련] 상세페이지 구현하기 (react-router-dom)

0. 동적 라우팅 (Dynamic Route) ▶ path에 유동적인 값 입력 1.Works.jsx import React from 'react'; import { Link } from 'react-router-dom'; const data = [ { id: 1, todo: '리액트배우기', }, { id: 2, todo: '노드 배우기', }, { id: 3, todo: '스프링배우기', }, ]; //console.log(data); function Works() { return ( {data.map((item) => ( {item.id} {item.todo} ))} ); } export default Works; ▶ 를 사용 + {`/(절대경로)works / #{item.id}`} -> 하이퍼링크처..

  • format_list_bulleted React
  • · 2023. 11. 9.
  • textsms
[React 숙련] 리액트 hook : useNavigate | useLocation | useParams | Link (api)

[React 숙련] 리액트 hook : useNavigate | useLocation | useParams | Link (api)

1. useNavigate (활용도 높은 페이지 전환 hook) ▶ 어떤 버튼 클릭 / 액션이 있을 때 페이지 이동 ( 태그의 href와 유사 역할 ) import React from 'react'; import { useNavigate } from 'react-router-dom'; function Home() { const navigate = useNavigate(); return ( Home { navigate('/works'); }} > works로 이동 ); } export default Home; ▶useNavigate(); 사용해서 버튼 클릭시 navigate('/works') 2. useLocation (hook) import React from 'react'; import { useNav..

  • format_list_bulleted React
  • · 2023. 11. 9.
  • textsms
[React 숙련] 리액트 react-router-dom

[React 숙련] 리액트 react-router-dom

0. react-router-dom (패키지) 설치하기 ▶ 터미널 : yarn add react-router-dom 1. 페이지 컴포넌트 작성 (단일페이지 구현 -> 다중 페이지로 구현) ▶ scr > pages 폴더 > 4개의 페이지 구성 2. Router.js 파일 생성 (router 구성하는 설정 코드 작성-> 주입) import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Works from '../pages/Works'; const..

  • format_list_bulleted React
  • · 2023. 11. 9.
  • textsms

#02 리액트 숙련 : React Redux 카운터 프로그램 만들기

0. TIL ▶ props의 drilling의 대안으로 스토어에 저장해서 사용하면서 사용하는 리덕스. ▶ 리덕스는 action > dispatch > reducer 순으로 동작한다 ▶ 디스패치를 사용하기 위해서는 useDispatch를 import하고 dispatch의 인자 = action 객체로 넣어주기 ▶ dispatch를 counter.jsx에서 함수로 만들어서 App.jsx에서 함수실행으로 간단하게 사용 가능 [파일 정리] redux 폴더 : 리덕스 관련 모든 코드 (1) config 폴더: 리덕스 설정 관련 파일 전부 (1-1) configStore : 중앙 stata 관리소 -> 설정 코드 (.js) (2) modules 폴더 : state의 그룹 ▼ 리덕스 설정 및 useSeletor로 데이..

  • format_list_bulleted TIL :: Today I Learned
  • · 2023. 11. 8.
  • textsms

#09 리액트 입문 : 1차로 만들었던 todolist 리팩토링

1. 처음으로 만들었던 투두리스트 [2023.11.06] 리팩토링 ! https://zerotonine2da.tistory.com/64 #08 리액트 입문 :: todolist 만들기 (리액트 컴포넌트 분리) TIL 리액트로 투두리스트를 구현하면서, JSX문법 사용과 랜더링에 대해 배울 수 있었다. 리랜더링이 끝나는 시점에 대해 알 수 있었고, useState를 사용하여 리액트에게 변경값을 알려주는 개념을 zerotonine2da.tistory.com 2. 개선 내용 1. 태그의 onSubmit 사용 2. id값 = uuid 사용 3. Working과 Done부분을 하나의 컴포넌트 로 만들기 --중복 줄이기 - 기존에는 Contents라는 컴포넌트 안에 (Working + Done부분을 2개의 DIV태그..

  • format_list_bulleted TIL :: Today I Learned
  • · 2023. 11. 8.
  • textsms