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; 간단한 텍스트를 입력할 ..

hook은 웹 사이트의 상호 작용을 가능하게 하고 변경 가능한 상태를 만드는 방법입니다. React는 실시간 웹 상호 작용으로 인해 새로고침을 하지 않아도 실시간으로 결과가 반영되는 부분에 있어서 장점이 있습니다. 다만 평범하게 React로 코드를 구성했다고 해서 실시간으로 반영이 되는 것이 아니라 hook을 사용해야 합니다. 간단한 프로그램을 만들어 보면서 학습해보도록 하겠습니다. import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase(){ count++; console.log(count); } ReactDOM.render( {count} + , document.getElementById("..