Front End/React (43) 썸네일형 리스트형 [React Exam] react-router-dom 사용해보기 2 다음과 같이 코드를 이용해서 작성해도 같은 결과 입니다.import { createBrowserRouter, RouterProvider } from 'react-router-dom'; let router = createBrowserRouter( [ { path: "/", element: Hello world!!Hello Router!!, }, ],);function App1() { return router={router} />;}export default App1; 위 처럼 엄청난 경고가 나타납니다. 다음과 같이 추가 하면 경고가 사라집니다.import { createBrowserRouter, RouterProvider } from 'react-router-dom';.. [React Exam] react-router-dom 사용해보기 1 라우팅이란 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것으로 웹애플리케이션이 커지게 되면 하나의 페이지로 구성하기가 매우 어렵습니다. 이럴 때 여러 페이지로 구성된 웹애플리케이션을 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. react-router-dom은 리액트의 라우팅 관련 라이브러리들 중에서 가장 많이 사용되고 있으며 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다.간단하게 사용법을 알아 보도록 하겠습니다. 1. 프로젝트 생성 및 라이브러리 설치npx create-react-app router1 cd router1 npm i react-bootstrap bootstrap react-bootstrap-icons npm i day.. [React Exam 41] useState()에 대하여 알아보기 State란?컴포넌트의 상태를 말합니다.State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용합니다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다. State 값이 변경되고 리렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 리렌더링 합니다. [형식]const or let [상태를 저장할 변수명, 상태 변수 값을 변경할 Setter함수명 ] = useState(초기값);변수명과 Setter 함수명은 사용자가 마음대로 지정 가능합니다. 전통적인 사용방법은 대부분 [변수명, set변수명] 형태로 사용합니다. Setter함수는 JavaScript가 내부적으로 구현해서 코드의 내용은 보여주지 않습니다. cons.. [React Exam 40] React Hook 알아보기 https://101developer.tistory.com/91 Hook 이란?후킹은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채101developer.tistory.comHook이 무엇이지 정확하게 이해가 되지 않으면 위 포스팅을 먼저 참조하세요!!! Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. Reactd의 생명주기(lifeCycle)를 알아보면 컴포넌트(Component)가 최초에 화면에 rendering (MOUNTING) 되고, 상태가 변함에 따.. [React Exam 39] 가위바위보 게임 만들기 위의 이미지를 src/images 폴더 안에 넣습니다. ScissorsRockPaperGame.css 파일을 다음과 같이 만듭니다./*한장 이미지 크기 : 150 * 128전체 이미지 크기 : 450 * 384*/.rps { width: 150px; height: 128px; margin: 2px; background-image: url('./images/ScissorsRockPaper.png'); background-repeat: no-repeat; display: inline-block;} ScissorsRockPaperGame.js 파일을 다음과 같이 만듭니다.import { useEffect, useRef, useState } from 'react';import '.. [React Exam 38] 로또 번호 자동 생성기 만들기 2 원하는 게임수를 입력하고 버튼을 클릭하면 지정 게임수 만큼 로또 번호를 출력하는 애플리케이션을 만들어 보겠습니다. Lotto.js 파일을 만듭니다.import { useRef, useState } from 'react';import Button from 'react-bootstrap/Button';import Form from 'react-bootstrap/Form';import InputGroup from 'react-bootstrap/InputGroup';import 'bootstrap/dist/css/bootstrap.min.css';// 1게임의 로또 번호를 생성해 줌let lottoGenerator = () =>{ let set = new Set(); while(set.size6)se.. [React Exam 37] 로또 번호 자동 생성기 만들기 로또 전호를 자동생성하는 함수를 하나 만들어 보자. LottoGenerator.js 파일을 만듭니다.let lottoGenerator = () =>{ let set = new Set(); while(set.size6)set.add(parseInt(Math.random()*45)+1); // 중복되지 않는 5개 숫자 만들기 let ar = [...set]; // 배열로 복사 ar = ar.sort((a,b)=>a-b); // 숫자 정렬 return ar; // 배열 리턴}export default lottoGenerator; Set객체는 중복을 허용하지 않는 객체입니다.Math.random()*45)+1 : 1~45까지의 정수 난수 생성 while(set.size6)set.add.. [React Exam 36] 시계 만들어보기 바닐라 스크립트를 이용한 시계만들기 html> lang="ko"> id="clock1"> id="clock2"> id="clock3"> 또 동일한 코드가 많이 나온다. 여전히 추가하면 코드가 길어 진다. 이번에는 리액트로 만들어 보자!! Clock.js 파일을 만들자import { useEffect, useState } from 'react';import './Clock.css'import dayjs from 'dayjs';import 'dayjs/locale/ko'; // 한국어 가져오기dayjs.locale('ko'); // 언어 등록const Clock = ({area='서울', hour=0}) => { const [now, setNow] = use.. 이전 1 2 3 4 ··· 6 다음
