Front-end Framework/React

const [state, setState] = useState({ isOpen: false, data: '' }); 객체로 묶어서 선언하면 된다.

useEffect(() => { console.log('a'); return () => console.log('b'); // 클린업 함수. }, [count]); // 의존성 배열 useEffect의 반환값을 "클린업 함수"라고 함 useEffect의 효과(effect)를 정리(cleanup)하는 역할. 클린업 함수는 다음 useEffect가 실행되기 전에 호출됨.

코드 작성 App.js import './App.css'; import Hello from './component/Hello'; function App() { return Props : properties ; } // 프로퍼티로 준 값이 Hello 컴포넌트에 인자로 전달됨. export default App; Hello 컴포넌트에 age라는 프로퍼티를 설정한다. Hello.js import { useState } from "react"; export default function Hello(props) { const [name, setName] = useState("Mike"); const [age, setAge] = useState(props.age); const msg = (age > 19) ? "성..

state는 컴포넌트가 가지고 있는 속성값이다. 이 속성값이 변하면 React는 자동으로 UI를 다시 그려준다. 그래서 사용자 입장에서 다시 그려줄 필요가 없어 편리하다는 장점이 있다. 예제) 📁 Hello.js export default function Hello() { let name = "Mike"; function changeName() { name = (name === "Mike") ? "Jane" : "Mike"; } return State {name} Change Name ; } changeName() 함수는 이름이 Mike일 때는 Jane으로, Mike가 아니면 Mike로 변경한다. 이 함수를 버튼의 이벤트 함수로 작성하여 버튼이 클릭됐을 때 태그의 내용이 바뀌도록 했다. 💥근데, 버튼을 ..