Mini

※ return을 해줘야 화면에 반영된다. if (edit) { // return( 자동 랜더링됨 //text는 event.target.value에 잇음 onChange={(e) => { //console.log(e.target.value); setText(e.target.value); }}> setEdit(false)}>수정 ) } return 안쓰고 왜안되지 삽질하고있었다.. *text 상자구현 자동 랜더링됨 //text는 event.target.value에 잇음 onChange={(e) => { //console.log(e.target.value); setText(e.target.value); }}> * 전체코드 import './App.css'; import { useState } from "re..

* 함수형식 const Record= ( {매개변수들 } ) =>{ return( ) } Main함수 : //하면 Record함수의 return내 태그로 대체된다. 단, 태그는 1개만 리턴가능 -> 전체를 div 로감싸서 리턴하면된다. ※ setNumList ( [ 배열 ] ) 안에 배열([])을 넣어야된다. * (자식에서 공통으로 사용해야할) 파라미터전달방법 1. 부모함수 App에서 선언후 2.자식에게 전달한다. 3. 자식을 매개변수에 선언하고 4. 부모 아래처럼 전달하면 된다. import './App.css'; import { useState } from "react"; //함수 첫글자는 대문자여야 const RecordForm = ({ numList, setNumList }) => { const ..

* 반복문 배열.map( (i) => 사용 ) {numList.map((num) =>( {num} ))} 배열.map 하면, for each와 유사하다. for( auto num : list)와 유사하다. num이름으로 배열을 순회한다. import './App.css'; import { useState } from "react"; function App() { const [num, setNum] = useState(0); const [numList, setNumList] = useState([]); function numRecording() { setNumList([...numList, num]); //기존의 배열에 num이 추가된 배열 리턴 setNum(0); } return ( {num} { set..

1. {}안에 넣어서 객체형태로 스타일을 주면된다. {name} 2.className를 주고 css : .클래스명 으로 스타일지정

setNum은 Setter와 유사하다. let [num, setNum] = useState(1); -일반변수 : 새로고침해야 렌더링됨 -useState : 값이변경되면 (setNum 호출되면 ) 화면이 자동으로 다시 렌더링됨. import logo from './logo.svg'; import './App.css'; import { useState } from "react"; function App() { let name = "Bisuuuuuuuuuuu"; let [num, setNum] = useState(1); return ( {num} {setNum(num=num+1)}}>버튼 ); } export default App;