분류 전체보기 (104) 썸네일형 리스트형 [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) 되고, 상태가 변함에 따.. Hook 이란? 후킹은 소프트웨어 공학 용어로, 운영 체제나 응용 소프트웨어 등의 각종 컴퓨터 프로그램에서 소프트웨어 구성 요소 간에 발생하는 함수 호출, 메시지, 이벤트 등을 중간에서 바꾸거나 가로채는 명령, 방법, 기술이나 행위를 말한다.https://ko.wikipedia.org/wiki/%ED%9B%84%ED%82%B9 hook은 React 에만 있는 것이 아닙니다. 거의 모든 프로그램에서 Hook을 지원합니다. 기존에 정해진 프로그램의 흐름 중간에 사용자가 임의로 개입하여 별도의 추가적인 일을 실행시킬 수 있게 해 주는 툴입니다.즉, 이미 만들어진 프로그램 중간에 나만의 로직을 추가하는 것!!!이와 관련된 유튜브 영상입니다. https://www.youtube.com/watch?v=tgmvleK5vZI&ab.. [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.. [React Exam 35] Counter 만들어보기 순수 자바스크립트로 만들어 보자!!!Counter01.html 파일을 만들자!! html> lang="ko"> class="btn-group btn-group-sm" role="group" style="border: 1px solid gray;margin: 5px;" > type="button" class="btn btn-secondary" id="decrease1">- type="button" class="btn btn-light" id="counter1">0 type="button" class="btn btn-secondary" id="increase1">+ 잘 작동한다. 이번에는 리액트로 만들어 보자!! Counter.js 파일을 만들.. 이전 1 2 3 4 5 6 ··· 13 다음
