number과 index 모두 넘겨주는 방식을 사용하였다. key는 식별을 위해 필요한 내용이다. console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { const [number, setNumber] = useState(1); const [recordNums, setRecordNums] = useState([]); const increaseNum = () => { setNumber(number + 1); }; const decreaseNum = () => { if (n..

useState의 인수로는 사용할 초기값을 넘겨준다. 아무런 값도 없으면 underfined가 나온다. useState의 반환값은 배열이다. 첫번째 원소로 state를 사용할 수 있고, 두 번째 원소인 setState 함수를 사용해 state값을 변경할 수 있다. import {useState} from 'react'const [state, setState] = useState(initialState) 아래는 숫자를 증가시키는 기능을 useState를 이용해서 적용하였다. React는 return값을 비교해서 렌더링이 되기 때문에 자동으로 적용되지 않아 useState를 이용해야만 했다.  숫자 증가 기능console.clear();import React, { useState } from "https:/..

리액트에서 css 사용하기style = {{ }} 안에 내용을 삽입하면 되는데 key:value 형식으로 값을 넣는다. css와 달리 각 요소는 ;가 아니라 쉼표(,)로 구분하고, 값은 따옴표("")로 묶여야 한다.const Square = () => { return ( 정사각형 );};const Circle = () => { return 원;};const App = () => { return ( );};ReactDOM.render(, document.getElementById("root"));  테일윈드 사용하기클래스 이름을 적용하면 테일윈드도 사용 가능하다. const Square = () => { return ( 정사각형 );};

리액트에서 함수 선언function Component(props){ return {props.hello}} 함수 선언문함수 선언할 때에 가장 일반적인 방법은 아래이다.function add(a,b) { return a + b} 함수 표현식function로 시작해 }로 끝나는 부분이 함수를 정의한 부분이다. 함수 표현식에서 코드의 혼란을 방지 하기 위해 함수의 이름을 생략하는 것이 일반적이다. const sum = function (a,b) { return a + b}sum(10,24) 함수 선언문과 표현식은 호이스팅에서 차이가 있다. 함수 표현식은 호이스팅 되는 시점에 underfined로 초기화된다. 반면에 함수 선언문은 어디서든 에러없이 수행한다.  화살표 함수ES6에서 추가된 함수 생성 방식이다...

https://codepen.io/ycraah/pen/GRbzMjr 리액트 세팅...codepen.io console.clear();import React, { useState } from "https://cdn.skypack.dev/react@18";import ReactDOM from "https://cdn.skypack.dev/react-dom@18";const App = () => { return 안녕 };ReactDOM.render(, document.getElementById("root"));