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

자바스크립트에서 Object, Array 에 들어있는 데이터들을 Destructure 하여 사용하는 방법에 대해서 알아보겠습니다. 이렇게 사용하는 방법은 api를 연동하여 json 형식의 데이터들을 불러올 때 매우 유용하게 사용할 수 있습니다. animals.js const animals = [ { name: "cat", sound: "meow" }, { name: "dog", sound: "woof" } ]; export default animals; index.js import animals from "./data" // (1) console.log(animals); // 결과 : [Object, Object] // (2) const [cat, dog] = animals; console.log(cat..

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("..

React 는 실시간으로 상태값이 변동됨에 따라 스타일, 구성, 및 구조가 변경되기 때문에 상태 변동에 예민합니다. 예를 들어 물이 일정 수준의 온도 이하로 내려가면 얼음이 되고, 다시 온도가 올라가면 물이 되듯이 React도 어떠한 상태에 따라 결과가 변하게 됩니다. 이런 상태를 state 라고 합니다. state를 변경할 때마다 새로이 동작되는 React 프로그래밍 방식에는 대표적으로 선언적 프로그래밍, 명령형 프로그래밍 두 가지가 있습니다. Declatative Programming (선언적 프로그래밍) var isDone = false; function strike() { isDone = true; } function unStrike() { isDone = false; } function App(..

이번에는 간단한 로그인 페이지를 구성해보고 추가적으로 조건에 따른 렌더링에 대한 작업에 대해 알아보겠습니다. Index.html 렌더링될 페이지입니다. index.js에 렌더링되는 내용들을 포함되어있고, root 영역에 렌더링 될 것입니다. Index.js import React from "react"; import ReactDOM from "react-dom"; import App from "./components/App"; ReactDOM.render(, document.getElementById("root")); render 함수를 통해 index.html에 root 영역에 렌더링 App 컴포넌트를 렌더링시킵니다. App.jsx import React from "react"; import Login..

자바스크립트 ES6의 화살표 함수에 대해서 알아보겠습니다. 화살표 함수는 특정한 동작을 수행하는 함수가 아니라 기존에 사용하던 함수의 양식을 함축하여 줄여줄 수 있는 함수입니다. 기존 방식 var numbers = [3, 56, 2, 48, 5]; const newNumbers = numbers.map(function (x) { return x * x; }) 기존에 사용하던 방식대로 함수를 사용하게 되면 위와 같은 형식으로 사용할 수 있을 것입니다. 특정 함수에 수행되는 함수를 직접 기입하고 넣어줌으로서 동작되는 형식으로 주로 사용합니다. 화살표 함수를 사용하면 안에 작성된 function 부분을 없애줌으로서 코드의 양을 줄여줄 수 있습니다. 화살표 함수 적용 var numbers = [3, 56, 2,..