{/*---App.js-------------------------------*/} import dollimpanImg from './Images/dollimpan_img.png'; import dollimpanText from './Images/dollimpan_text.png'; function App() { {/*---돌림판---------------------------------*/} } /*mid-part : 돌림판*/ .bottom-part { margin-top: 50px; } .dol-lim-pan { position: relative; width: 300px; height: 300px; margin: 0 auto; } .dol-lim-pan img { position: absolute;..

// turtle_co/src/App.js import React, { useEffect, useState } from 'react'; import './App.css'; function App() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const handleScroll = () => { setScrollPosition(window.scrollY); }; window.addEventListener('scroll', handleScroll); return () => { window.removeEventListener('scroll', handleScroll); }; }, []); // Calculate the..

1. 컴포넌트 사용 이유 2. 컴포넌트 만드는 문법 - function 사용 - let / const 사용 각각 사용하기에 장점 단점이 있음...! 3. 컴포넌트 사용하면 좋은 곳 1. 반복적인 HTML 축약 2. 큰 페이지를 컴포넌트로 만들 수 있음 3. 자주 변경될 거같은 컴포먼트 UI들 4. 컴포넌트 단점 1. state 사용 시 문제 생김 ** A 함수에 있던 변수는 B 함수에서 맘대로 가져다 사용 할 수 없음 --> 그래서 무작정 컴포넌트를 만들면 안됨.

state, 함수 이용 좋아요 버튼을 누르면 숫자가 올라가게끔 만들 것이다. 이때 숫자는 누르는 횟수만큼 +1이 되기 때문에 state를 써줄 것이다. 1단계 : 형태만 만들기 import {useState} from "react"; function App() { let [heart] =useState(0); return ( 좋아요 ❤️ {heart} ); } 2단계 : 좋아요를 눌렀을 때 0이 1로 바뀌도록 (onClick 사용) import {useState} from "react"; function App() { let [heart, heartAlterNums] =useState(0); return ( 좋아요 hearAlterNums(1)}> ❤️ {heart} ); } 3단계 : 누를때마다 +1이..

버튼을 누르면 state 변경 값으로 전환 되게끔 할 수 있다. - 방법 1 : 배열을 그대로 가져와서 수정하기 let [articleList, articleSwitch] = useState(['남자코트 추천', '강남 우동 맛집', '파이썬 독학']); return ( articleSwitch(['여자코트 추천', '강남 우동 맛집', '파이썬 독학'])}> 글변경버튼 ) 하지만 이렇게 할 경우에는 원본 데이터인 articleList가 보존이 안되고 여자코트 추천으로 바뀌기 때문에 적합하지 않다. 그래서 우리는 원본 데이터를 보존하면서 state를 사용해야하는 것이다. - 방법 2 : 원본 데이터 보존하면서 값 변경 let [articleList, articleSwitch] = useState(['남..

1. 함수만들기 - 형태 function 함수() function 함수() { console.log(1) } return( 좋아요 ❤️ {heart} 2월 17일 발행 ); - 형태 ()=> {식} 좋아요 {식}}> ❤️ {heart} 2월 17일 발행 ** 주의사항 좋아요 ❤️ {heart} 2월 17일 발행 식을 바로 넣으면 절대 안됨! 빈 함수를 만들어서 넣든 함수를 따로 만들어서 넣든 어쨌든 함수라는 그릇을 만들어서 거기다가 식을 넣어야함!