Form HTML에서도 존재했던 폼이다. 마찬가지로 JSX코드를 통해 표준 JS로 변환된다. 이제는 버튼이 눌렸을 때, 이 폼(form)이 제출되도록 만들 것이다. 전반적인 코드 구성은 아래와 같다. const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const titleChangeHandler = (event) => { setEnteredTitle(event.target.value); }; const amountChangeHandler = (event) => { set..
지난 시간에 state에 대해서 다루면서 간단한 state를 다뤄봤다. 이번 시간에는 사용자가 입력하는 여러 값들에 대해서 state를 업데이트하는 방법에 대해서 다뤄볼까한다. How to update State? state를 사용한다고 선언할 때에 useState라는 hook을 사용한다는 것은 앞시간에 다뤘기에 알 것이다. 그렇다면 여러 개의 state는 어떻게 사용할까? 다음 예제들은 사용자로부터 title, amount, date를 받는 코드이다. 여러 예제들을 보고 어떤 코드가 나은지 직접 판단하기 바란다. 예제 1 더보기 const [enteredTitle, setEnteredTitle] = useState('') ; const [enteredAmount, setEnteredAmount] = u..
이전 시간에는 event와 그 event가 발생되었을 때, 작동하는 event handler에 대해서 배웠다. event handler를 사용하여 함수를 실행시킬 수는 있지만, 여기에는 한가지 문제가 있다. let title = 'title' ; const clickHandler = () => { title = 'Update!' ; console.log(title) ; } return ( {title} Change Title ); 위와 같이 버튼이 클릭된다면, title이 "Update!"로 변경될까? 그에 대한 답은 "아니다"이다. 실제로는 전혀 변하지 않는다. 그렇다고 해서 함수가 실행되지 않은 것도 아니다. console.log(title) ; // 'Update!' 심지어 title값을 conso..
지금까지 정적인 상태를 조작하는 방법에 대해서 다뤘다. 특정 CSS를 만져서 조금 더 날것 그대로의 느낌에서 벗어날 수는 있었다. 하지만, 웹사이트에서 사진처럼 고정된 것을 보기 위해서 웹사이트를 보는 것은 아닐 것이다. 그렇기에 이번 시간에는 사용자의 반응인 event와 그 event가 발생할 때 동작되는 event handler에 대해서 이야기 해볼 것이다. event란? 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action)을 말한다. 예를 들자면, 만약 사용자가 웹페이지에 있는 버튼을 고른다면, 그 버튼 누루는 사건에 대해서 숫자를 증가시킨다거나 좋아요를 누르게끔 응답하길 원할 수 있을 것이다. 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둔다(hover). ..
JSX가 무엇인지는 앞서 다뤄서 넘어가겠다. JSX란? JSX란? 아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다. // 📂 App.js function App() { return ( Let's get started! ); } export default App; 이것은 JSX라고 하며 JavaScript XML을 의미한다. 결국 HT coding-leaf.tistory.com React로 개발을 하다보면 JSX 형식으로 코드를 작성하게 된다. 하지만 브라우저는 JSX 형식을 인지하지 못하기 때문에 뒷단에서 변환하는 과정을 거친다고 했다. 덕분에 우리는 가독성 높고 간편한 JSX 형식으로 선언형 프로그래밍을 할 수 있게 되었다. 그러나, React를 사용할 때 무조건 ..
