App.jsx import React, { useState } from "react"; function App() { const [inputText, setInputText] = useState(""); const [items, setItems] = useState([]); function handleChange(event) { const newValue = event.target.value; setInputText(newValue); } function addItem() { setItems(prevItems => { return [...prevItems, inputText]; }); setInputText(""); } return ( To-Do List Add {items.map(todoItem => ..

Spread 연산자는 기존에 길게 작성되었던 코드를 단순화하여 줄일 수 있는 연산자입니다. 예를 들어 if문으로 여러 조건을 가진 코드를 spread 연산자를 통해 줄여줄 수 있습니다. 이를 arrow function과 useState 에 접목해서 사용하는 방식에 대해서 알아보겠습니다. 기존 방식의 긴 코드 작성 App.jsx import React, { useState } from "react"; function App() { const [contact, setContact] = useState({ fName: "", lName: "", email: "" }); function handleChange(event) { const { name, value } = event.target; setContact..

이번에는 기존의 state 관리하는 방법보다 좀 더 복잡한 state를 관리하는 방법에 대해서 정리해보겠습니다. Complex State란 자바스크립트 개체 상태를 좀 더 복잡한 관리를 말합니다. 개체의 이전 값을 돌려받거나 사용해야할 경우의 관리를 말합니다. 예를 들어 웹사이트에 두 가지의 값을 입력하면 두 가지 입력 정보를 이용해 사용자에게 보여지게끔 할 수 있게 만드는 것입니다. 예시로 든 두 가지의 값 입력 사이트로 확인해보겠습니다. 기존의 useState 관리 방식 App.jsx import React, { useState } from "react"; function App() { const [firstName, setFirstName] = useState(""); const [secondNam..

ReactApp에 state(상태)를 관리하고 제어하는 방법에는 크게 두 가지가 있는 것으로 알고있습니다. 그게 클래스 컴포넌트, 기능 컴포넌트 입니다. 기능 Components import React, { useState } from "react"; function FunctionalComponent() { const [count, setCount] = useState(0); function increase() { setCount(count + 1); } return ( {count} + ); } export default FunctionalComponent; 기능 컴포넌트는 제가 이전부터 공부하고 정리했던 내용들처럼 function 함수를 사용한 컴포넌트 구성이라고 볼 수 있습니다. 상태(state)..

이전에는 간단한 React 이벤트 핸들링에 대해서 정리해보았습니다. 이번에는 그보다 조금 더 심화적인 형식에 대해서 정리해보겠습니다. 웹 앱을 만들 때 로그인, 등록, 접근을 위한 형식을 만드는 것은 아주 흔한 작업이라고 볼 수 있습니다. 그리고 이 형식이 어떻게 동작하는지 이해하려면 상태를 설정하고 사용하는 법을 알아야 합니다. 그래서 이번에는 입력 요소로 사용자가 입력하는 값을 얻는 방법과 사용자가 입력한 정보를 사용하기 위해 버튼을 사용하는 방법을 살펴보겠습니다. 버튼을 클릭했을 때 onClick과 같은 속성을 통해 이벤트를 제어하는 것처럼 입력하는 동작에 있어서도 이벤트가 존재합니다. input 태그 안에 onChange라고 하는 속성을 사용하면 입력값이 바뀔 때마다 매번 트리거가 작동되어 사용자..

React의 이벤트 처리에 대해 좀 더 정리해보겠습니다. 사용자가 앱 또는 구성 요소와 언제 상호 작용하는지 어떻게 감지하는지 그런 이벤트에 따라 어떻게 반응하는지 이런 여러 이벤트에 대한 정리라고 볼 수 있을 것 같습니다. index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); [App.jsx] import React from "react"; function App() { return ( Hello Submit ); } export default App; 간단한 텍스트를 입력할 ..