React에서 input 입력이 안되는 결정적인 이유
·
🔧 Library/React JS
1. 안되는 이유와 , ChatGPT의 답변 ChatGPT의 답변은 다음과 같다. React에서 input 태그의 value 속성에 상태값을 넣으면, 그 값은 읽기 전용 상태가 되어 변경할 수 없습니다. 대신, onChange 이벤트 핸들러를 사용하여 입력 값을 변경해야 합니다. 이유는 React에서는 단방향 데이터 흐름을 사용하여 컴포넌트의 상태를 업데이트하고 렌더링하는 방식으로 작동하기 때문입니다. 그래서 input 태그의 value 값이 변경되면 React는 이를 새로운 상태로 인식하고, 이에 따라 컴포넌트를 다시 렌더링합니다. 그러나 value 값이 읽기 전용이기 때문에 이를 변경할 수 없으므로, onChange 이벤트 핸들러를 사용하여 상태를 업데이트하고 새로운 값을 입력하는 것이 필요합니다. ..
React.useState() 렌더링
·
🔧 Library/React JS
useState는 컴포넌트에서 변경되는 값을 관리하기 위해 사용된다. React.useState()는 [state, modifier]를 반환한다. 이해를 위한 예시는 다음과 같다. const [값, 값 세팅 함수] = React.useState(초기값); 카운터를 만드는 예시. import React, { useEffect } from "react"; function App() { const [counter, setCounter] = React.useState(0); const handleClick = () => { setCounter(counter + 1); }; return ( {counter} CLICK ); } export default App; 상수인const로 선언을 했는데도 counter를 ..
React와 JSX, ReactDOM.render의 특징
·
🔧 Library/React JS
효율성 JSX는 JavaScript의 확장 문법이다. JSX를 처음 접했을 때 html과 js를 js공간에서 자유자제로 다룰 수 있는 걸 보고 놀라웠다. 아니나 다를까 JSX는 JavaScript XML의 약자였다. 다룰때는 요런식으로 다룬다. const element = Hello, world; React에서 JSX사용이 필수는 아니지만, 대분의 사람은 js코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다고 한다. React에서 JSX를 사용하지 않고 위의 element와 같은걸 선언 하려면 다음과 같이 작성해야한다. const element = React.createElement("h1", {id: "greet"}, "Hello World"); 보기도 불편하고, 정말 끔찍하다...