WINK-(Web & App)/React.js 스터디 (93) 썸네일형 리스트형 [2023 React.js 스터디] 유승우 #4주차 - React Router v6 1. 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트 라우터를 사용하여 라우팅 시스템을 구축하면 손쉽게 싱글 페이지 애플리케이션을 만들 수 있다. 2. 싱글 페이지 애플리케이션이란? 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 만약 싱글 페이지 애플리케이션에서 다른 페이지로 이동하게 된다면 서버에 다른 페이지의 HTML을 새로 요청하는 것이 아닌 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존의 웹 애플리케이션은 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 된다. 3. 리액트 라우터 적용 및 기본 사용법 프로젝트를 생성 후 리액트 라우터 라이브러리를 설치하면 .. [2023 React.js 스터디] 동승환 #2주차 - 1장. 리액트 입문(10-16) 10. useRef 로 특정 DOM 선택하기 javaScript에서 특정 DOM 을 선택할 때 getElementById, querySelector 와 같은 DOM Selector 함수를 사용해서 DOM 을 선택하듯이 리액트에서는 ref 라는 것을 사용한다. 함수형 컴포넌트에서는 useRef 라는 Hook함수를, 클래스형 컴포넌트에서는 콜백 함수 또는 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); con.. [2023 React.js 스터디] 임혜진 #2주차 - 즐거운 수강신청 사이트 만들기~ React.js 스터디 2주차 과제는 수강신청시즌에 걸맞는 '즐거운 수강신청 사이트 만들기' .. ! 즐거웠..나 문제는 크게 3개로 이루어져 있다. 1. 작성된 useEffect 함수를 참고하여 정상적으로 남은 시간이 돌아가도록 작성하시오. const timer = useRef(null); const [time, setTime] = useState(10); useEffect(() => { timer.current = setInterval(() => { console.log('1초마다 실행'); setTime((time)=>(time-1)) }, 1000); return () => clearInterval(timer.current); }, []); useEffect(() => { // time이 변할 때.. [2023 React.js 스터디] 조다운 # 1주차 - 1장. 리액트 입문(1-9) 1. 리액트는 어쩌다가 만들어졌을까? 처리해야 할 이벤트, 관리해야 할 상태값, DOM 까지 다양해지게 된다면 이에 따라 업데이트 하는 규칙도 복잡해지기 때문에 업데이트 작업의 간소화가 필요하다. 리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 Dom 을 업데이트 할 지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까? 하는 아이디어가 발상이었다. 하지만 정말 동적인 UI 를 보여주기 위해서 모든 걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느릴 것이다. 그래서 리액트에서는 Virtual DOM 을 사용하여 이를 가능하게 했다. Virtual DOM 은 가상의 DOM 이다. 그냥 메모리에 가상으로 존재하는 DOM 으로서 JavaScript 객체이.. [2023 React.js 스터디] 사민주 #1주차 - 1장 1~9절 <과제> nvm을 사용하여 node의 latest 버전을 다운받아 설정하세요. 윈도우 기반으로 nvm-setup.exe 파일을 다운받은 후 cmd를 '관리자 모드'로 접속하여 node js의 최신 버전을 설치한다. 'nvm use [버전]' 명령어를 통해 사용 버전을 지정해 준 후 'node -v' 로 확인 윈도우의 경우, Node.js 공식 홈페이지의 LTS 버전을 직접 다운로드 받으면 환경 변수 때문에 nvm 설치 오류가 발생하는 경우가 있다. 그럴 때에는 설치되어 있는 node js를 다 지워주고 nvm을 먼저 설치한 후 cmd에서 node js를 설치해 주어야 한다. 2. yarn 을 설치하세요. Install Yarn 페이지를 참고해서 'npm install --global yarn' 명령어를 통해 설치.. 이전 1 ··· 9 10 11 12 다음
