React (57) 썸네일형 리스트형 [React] 페이지네이션 (pagination) 오프셋 페이지네이션 (offset pagination) 지금까지 받아온 페이지의 개수를 기준으로 데이터를 나눔. 1~30 번까지의 데이터중, 20번까지 데이터를 받아왔을때 남은 데이터는 21번 ~ 30번 그러나 하나의 데이터가 1번에 새로 추가되면, 20번~30 번을 새로 받고 데이터가 삭제되면 22번 ~ 30번을 받게 됨. 커서기반 페이지네이션 오프셋 페이지네이션의 단점을 보완하기 위해 만들어진 방법으로, 지금까지 받은 데이터를 표시하는 책갈피 데이터 (커서) 를 다음페이지를 받아올 때 전달해서 그 데이터 기준으로 값을 더 받게됨. [React] VSCode 단축키 단축키 [멀티커서 선택하기] 텍스트 커서를 단어로 옮겨 놓으면 해당하는 변수나 함수가 하이라이팅되고, 텍스트를 선택하면 대소문자 구분없이 같은 단어가 하이라이팅된다. 이 상태에서 멀티 커서 선택을 하면 여러 군데를 한 번에 수정할 수 있다. 윈도우즈 맥 Ctrl + Shift + L Cmd + Shift + L [멀티커서 만들기] 원하는 위치에 텍스트 커서를 만들 수 있다. 윈도우즈 맥 Alt + click option + click [찾아 바꾸기] 텍스트 커서를 원하는 변수나 함수에 옮겨놓고 찾아 바꾸기를 하면 해당 변수나 함수가 사용된 파일에서도 함께 이름이 바뀐다. 윈도우즈 맥 F2 F2 [해당하는 파일로 이동] 변수나 함수가 작성된 파일로 이동하고 싶을 때 단어 위에 마우스를 올리고 사용한다. 윈.. [React] BABEL BABEL https://babeljs.io/ JSX 를 Js 로 번역해주는 웹사이트 [React] 리액트 명령어 정리 기능 명령어 프로젝트 생성 npm init react-app . 개발모드실행 npm start (npm run start) 실행중인 서버 종료 ctrl + c 개발된 프로젝트 빌드 npm run build 빌드한 것 로컬에서 실행 npx serve build [React] CSS 클래스 네임 index.css 파일을 새로 생성한 후, 다음과 같이 스타일 적용 이후, index.js 에서 다음처럼 파일을 import 해줌. 페이지에 글자색과 배경색이 잘 저장된 모습을 확인할 수 있다. Elements > head > style 코드가 잘 적용되어 있음. 자바스크립트에 CSS 파일을 import 하게되면, 태그 안에 style 태그가 자동으로 작성되기 때문 Button.css 파일을 만들어 다음처럼 작성한 후, .Button { padding: 14px 27px; border-radius: 9999px; outline: none; cursor: pointer; font-size: 17px; } .Button.blue { background-color: rgba(0, 89, 255, 0.2); b.. [React] 인라인 스타일 component 에 디자인을 입히는 방법 중 하나로, 인라인 스타일을 사용할 수 있다. const style = { 속성: '값', }; function Button({ children, onClick }) { // Button 태그 안, text prop 을 보여주는 함수 return {children} } export default Button; 이처럼 객체형태로 속성을 나타낸 후 적용하는 방식을 사용한다. css 에서 대시기호(-)가 들어간 속성명은 다음처럼 카멜케이스로 작성해주어야 한다. ex ) background-color -> backgroundColor const style = { backgroundColor: 'pink', }; function Button({ children, onCl.. [React] 참조형 State/ 주사위 총점 계산 및 기록하기 1. 주사위 총점 계산 주사위 총점 계산을 위해 새로운 sumState 를 만듬, 초기값은 0. const [sum, setSum] = useState(0); 다음과 같이 setSum 에 sum + nextSum 을 하여 총점 계산 const handleRollClick = () => { const nextNum = random(6); setNum(nextNum); setSum(sum + nextNum); }; 초기화 값은 0 으로 지정. const handleClearClick = () => { setNum(1); setSum(0); }; 2. 주사위 점수 기록 주사위 점수 기록을 배열 형태로 다루기 위해 초기값을 빈 배열로 지정. const [gameHistory, setGameHistory] = u.. [React] State/ 주사위 던지기 [State (스테이트)] 리액트에서 변수같은 역할을하며, 스테이트를 바꾸면 react 가 화면을 새로 랜더링 해줌. import { useState } from 'react'; 스테이트를 사용하려면 리액트에서 useState 함수를 불러와야 한다. 일반적으로 useState 함수는 다음과 같이 작성되며, function App() { const [num, setNum] = useState(1); 파라미터로 초기값 (여기서는 useState(1);) 을 전달받고, 함수가 실행된 후에는 배열의 형태로 요소 2개 (num, setNum)를 리턴한다. 따라서 배열의 destructuring 문법으로 코드를 작성하게 되는 것. 1. 첫번째 요소 (num = state) 배열의 두 요소중 첫번째(num)는 Sta.. 이전 1 ··· 3 4 5 6 7 8 다음
