기록하는 공부

강의출처 https://youtu.be/2C2B4k3JOBg useTabs import React, { useState } from "react"; import ReactDOM from "react-dom"; import { StrictMode } from "react"; const content = [ { tab: "Section 1", content: "I'm the content of the Section 1" }, { tab: "Section 2", content: "I'm the content of the Section 2" } ]; const useTabs = (initialTab, allTabs) => { const [currentIndex, setCurrentIndex] = useState..

강의출처 https://youtu.be/W6KX48dnH6I useState useState는 항상 2개의 값을 반환한다. 첫 번째 값은 현재 상태값, 두 번째 값은 상태값을 업데이트하는 함수를 작성한다. 그리고 useState는 초기상태를 설정할 수 있는 옵션을 제공한다. 아래와 같이 작성될 수 있다. // 첫 번째 요소는 현재 상태값 item // 두 번째 요소는 상태값 item을 업데이트하는 함수 setItem // useState의 초기값으로 1 지정 const [item, setItem] = useState(1); 버튼을 누르면 값이 증가, 감소하는 코드를 useState를 사용한 코드와 사용하지 않은 코드 두 가지를 비교하여 살펴보자. useState를 사용한 코드 (12줄) //import ..

ES6 ES6 (ECMAScript 6)은 자바스크립트의 최신 버전 중 하나로, 2015년에 출시되었습니다. ES6은 기존의 자바스크립트에 몇 가지 새로운 기능을 추가하여 코드 작성을 보다 쉽고 효율적으로 만들어줍니다. ES6의 주요 기능 let 및 const 키워드 기존의 var 키워드 대신에 let과 const 키워드를 사용하여 변수를 선언할 수 있습니다. let은 블록 스코프 변수를, const는 상수를 선언하는 데 사용됩니다. 기존의 var 키워드를 사용하지 않는 이유는 var가 변수의 중복 선언이 가능하기 때문입니다. var를 중복 선언 했음에도 불구하고, 또 그 아래에 중복 선언한 변수를 선언을 할 수 있습니다. 중복 선언을 하면 기존에 선언되어 있던 변수는 다른 값을 가지게 됩니다. 이러한 ..

강의출처 리액트 Hooks 사용법 https://www.youtube.com/watch?v=yS-BU6eYUDE 리액트 Hooks 사용 예시 https://youtu.be/sZDvByH2mNU 리액트 Hook 전체 플레이리스트 https://www.youtube.com/playlist?list=PL7jH19IHhOLPDyuhF_fLCt_pKvtuLI5qX React Hooks http://nomadcoders.co/ www.youtube.com React Hooks (장점) 앱을 만들 때 React Hooks을 사용하면 class component, did mount, render 등을 하지 않을 수 있어 함수형 프로그래밍(functional programming)의 스타일로 코딩을 진행할 수 있다. 그..