state3 [React] State 업데이트 되는 시점 값이 바로 반영되지 않는 코드export default function Player({name, symbol}) { const [isEditing, setIsEditing ] = useState(false); function handleEditClick() { setIsEditing(!isEditing); // schedules a state update to true setIsEditing(!isEditing); // schedules a state update to true } ...}컴포넌트가 처음 실행될 때 handleEditClick()은 해당 컴포넌트의 내장 함수이기에 isEditing의 시작 값을 저장한다. handleEditClick() 이벤트가.. 2024. 7. 21. [React] UI 업데이트 State Hooks function App() { let tabContent = 'Please click a button'; function handleSelect(selectedButton) { tabContent = selectedButton; console.log(tabContent); } return ( handleSelect("components")}> Components handleSelect("jsx")}>JSX handleSelect("props")}>Props handleSelect("state")}>State {tabContent} );}버튼을 클릭하면 tabContent 변수가 handleSe.. 2024. 7. 9. [React] useState State리액트를 사용하는 가장 큰 이유는 상태(State)에 반응(Reaction)을 하기 위해서이다. 즉, 변수 값이 업데이트되면 UI도 업데이트 해줘야 한다. 하지만 변수가 변경될 때마다 UI가 매번 변경된다면 엄청난 자원 비용이 발생한다. 그래서 리액트는 변수 변경이 아니라 UI가 변경되야할 때만 업데이트할 수 있도록 State 라는 걸 추가했다. 즉, 변수가 업데이트 된다해서 렌더링하지 않고, State가 업데이트 된다면 렌더링한다. 이 때 사용하는 함수가 useState이다. useState()컴포넌트 상태를 관리할 수 있는 함수다. 1. useState 함수 불러오기import { useState } from 'react'; 2. useState 사용하기 const [state, setS.. 2024. 6. 12. 이전 1 다음 반응형