🤍 은지log 🤍

라이브러리를 사용하지 않고 { useState 와 useEffect } 를 사용해서 직접 구현해보기로 하였다 ! 🐥 그전에는 react-bootstrap으로만 해봤던터라,, 조금 걱정했는데 역시나 어려웠지만 정보도 많았고, 이것 저것 새로 시도해보는 재미도있었다 -💙 🔆 구현 코드 import { useEffect, useState } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; import { SLIDE_DATA } from "datas/slide"; const Banner = () => { const [currentSlide, setCurrentSlide] = useState(..

Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. ✏️ useState import { useState } from 'react' const [변수, set(대문자)변수] = useState(''); set함수에 예전값 prev( ) 을 넣고 싶으면 콜백함수를 사용해야한다. filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능을 한다. import { useState } from 'react' const Counter2 = () => { c..

useEffect(() => {},[]) useEffect 2번째 인자에 빈 배열을 넣어주게 되면 컴포넌트가 처음 렌더링 될때만 실행된다. 📌 useEffect 오류로 2번 실행 될때 📌 src/index.js에서 태그로 이 감싸져있으면 개발모드에서 두 번씩 렌더링된다. import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import reportWebVitals from './reportWebVitals' import './index.css' const root = ReactDOM.createRoot(document.getElementById('root')) root.render( ⬅ 지우기 , ..