DDOstory

useTabsimport React, {useState} from "react";import ReactDOM from "react-dom";const content = [ { tab: "Section1", content: "I'm the content of the Section 1" }, { tab: "Section2", content: "I'm the content of the Section 2" },];const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentInde..

🛜 useCounter() Custom Hook 만들기useCounter Hook은 초기 카운드 값을 파라미터로 받아서 카운트라는 이름의 state를 생성하여 값을 제공하고 카운트 증가 및 감소를 편리하게 할 수 있도록 함수를 제공하는 HookuseCounter Hook을 사용하면 어떤 함수 컴포넌트에서든지 카운트 기능을 쉽게 사용 가능🛜 Accommodate Component 만들기Accommodate 컴포넌트는 useCount 훅을 사용하여 카운트를 관리최대 카운트 개수는 maxCapacity라는 이름의 상수로 정의되어 있고 카운트 개수가 최대 용량을 초과하면 경고 문구가 표시되며 더 이상 입장이 불가능useEffect 훅의 작동 방식을 사용하기 위해 일부러 두 개의 useEffect 훅을 사용하..

notification 컴포넌트는 state에 아무런 값을 가지고 있지 않음 생성자에서는 앞으로 사용할 데이터를 state에 넣어서 초기화 클래스 컴포넌트에서 state를 업데이트 하려면 반드시 setState 함수 사용키는 리액트 엘리먼트를 구분하기 위한 고유의 값맵 함수를 사용할 때에는 필수적으로 들어가야 함❤️ state리액트 Component의 상태를 의미리액트 Component의 데이터라는 의미에 더 가까움리액트 Component의 변경 가능한 데이터미리 정해진 것이 아니라 리액트 Component를 개발하는 각 개발자가 직접 정의하여 사용렌더링이나 데이터 흐름에 사용되는 값만 state에 포함하여야 함state가 변경될 경우 Component가 재렌더링되기 때문에 렌더링과 데이터 흐름에 관련 ..

📓React A JavaScript Library for Building User Interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것SPASingle Page Application하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구📓React 장점빠른 업데이트 & 렌더링 속도우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나Virtual DOM 사용가상의 DOMDOM ..