⚛️ React8 query parameter를 사용하여 pagination 구현하기 pagination 한 번에 많은 데이터를 렌더하게 되면 성능이 떨어지면서 사용자 편의성이 감소하기 때문에 데이터를 나눠 내려받게 되는데 가장 많이 쓰이는 페이지를 나누는 방식을 뜻하는 것이 바로 pagination 기능이다. query parameter pagination을 위해 사용하는 것이 쿼리 파라미터(쿼리 스트링)이며, 말 그대로 엔드포인드 뒤에 ?(쿼리)를 보내는 요처을 한다. limit과 offset을 설정할 수 있으며, offset은 데이터가 시작하는 위치(index)를 뜻하고, limit은 내려받을 데이터의 수를 뜻한다. 우선 버튼을 클릭했을 때 정상적으로 동작하는지 확인하기 위해 console.log를 적어줘야 한다. const getBtnIndex = () => { console.lo.. 2022. 6. 5. useParams와 useLocation을 이용한 페이지 이동 (2) page를 이동할 때 쓰는 next 혹은 previous 버튼 또한 리액트 훅을 사용하여 구현할 수 있다. url의 id 값이 nex를 누를 때는 +1이, previous를 누르면 -1이 되면 된다. Previous Next const goToPrevious = () => { navigate(`/monsters/detail/${params.id - 1}`); }; const goToNext = () => { navigate(`/monsters/detail/${params.id + 1}`); }; 하지만 단순히 이런 함수를 만들어도 제대로 동작하지 않는다. 이유는 params.id 에 저장되는 값이 string 이기 때문이다. 문자열 - 1은 연산이 되지만 + 1은 되지 않는 것 ! const goToPr.. 2022. 6. 5. useParams와 useLocation을 이용한 페이지 이동 (1) 들어가기 전에 우리가 Web을 사용하다 보면 브라우저의 url이 페이지마다 바뀌는 것을 볼 수 있다. 리액트에서는 useParams와 useLocation 훅을 활용하여 구현할 수 있는데 이 두가지 훅들이 어떤 기능을 하는지 먼저 알아보자. const params = useParams(); console.log(params); useParams를 console로 확인해보면 객체Object로 id값이 들어있는 것을 볼 수 있다. 이 id값은 Rounter.js에 입력했던 path URL의 id 이다. export default function Router() { return ( ); } 그럼 useLocation을 console로 확인하면 어떤 값이 나올까? const location = useLocati.. 2022. 6. 5. Comment component // import { useEffect } from "react"; import { useState } from "react"; const Comment = () => { const [userInput, setUserInput] = useState({ nickname: "", comment: "", }); const [commentArr, setCommentArr] = useState([]); const { nickname, comment } = userInput; const onChange = (e) => { e.preventDefault(); const { value, name } = e.target; setUserInput({ ...userInput, [name]: value, }); }; cons.. 2022. 5. 30. import order convention 코딩에서 사용되는 컨벤션Convention의 뜻은 '협업을 위한 규칙 or 표준 작성 기준'으로 보면 된다. react를 사용하다 보면 import를 많이 쓰게 되는데, import 순서에도 컨벤션이 있다고 한다. 1번이 가장 위쪽에 입력되고 8번이 가장 아래쪽에 입력되는 순서이다. 1. 노드 빌트인 모듈 1. node "builtin" modules import fs from 'fs'; import path from 'path'; 2. 외부 모듈 2. "external" modules import _ from 'lodash'; import chalk from 'chalk'; 3. 내부 모듈 (내부 경로를 다루기 위해 웹팩이나 경로를 따로 설정한 경우) 3. "internal" modules (if yo.. 2022. 5. 29. input과 type으로 알아보는 useState ⚛️ 들어가기 전에 westagram 구현 중 useState 부분에 관한 이해가 부족하여 실습을 진행하였으나 여럿 에러들을 만났다. useState에 대한 개념을 다시 잡고자 만났던 에러들 중 하나를 뜯어보며 글을 남겨보려 한다. useState의 기본적인 개념 useState는 리액트 16.8에서 나온 Hook 기능 중 하나이며 컴포넌트에서 동적인 상태를 관리할 수 있다. const [state, setState] = useState(initialState); https://reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces reactjs.org 첫번째 값인.. 2022. 5. 21. [TIL] React Intro 🚀 학습 목표 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다. React가 무엇인지 정의할 수 있다. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다. Component의 개념과 종류에 대해 설명할 수 있다. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다. 기존에 구현한 Westagram을 React로 변환해 렌더링 할 수 있다. 💡 무조건 코드 많이 쳐서 익히자! 3세대 웹이 나타난 이유? 웹이 발전하며 처리해야할 것이 많아짐 프론트엔드와 백엔드가 나눠짐 대표적인 웹 프레임워크 & 라이브러리 앵귤러Angular → 프레임워크 뷰Vue → 프레임워크 리액트React → 라이브러리 웹 프레임워크 & 라이브러리의 차이 내장 기능 유무 차이 프레임워크 .. 2022. 5. 9. React & JSX 기초 Why React? React는 페이스북 엔지니어들에 의해 만들어진 JavaScript 라이브러리이다. 사람들이 React를 선택한 이유는 다음과 같다. 빠른 속도. React로 만들어진 앱은 복잡한 업데이트를 다룰 수 있으면서도 반응성이 좋다. 모듈성. 큰 파일이 아닌 작고 재사용이 가능한 파일을 사용. React의 모듈성은 JavaScript의 유지보수 관리에 좋은 솔루션이 된다. 확장성. 유동적인 데이터를 다루는 대형 프로그램이야말로 React에 적합하다. 유연성. 사람들은 아직도 React를 어디에 쓸 수 있을지 고민하며 이곳 저곳에 접목한다. 유명성. 취뽀에도 한 몫한다. 이건 또 무슨 새로운 언어인고 const h1 = Helllo world; 🤨? 자바스크립트와 HTML의 짬뽕의 모습. 조금.. 2022. 5. 8. 이전 1 다음
