useState 입력 데이터를 저장하기 위해서는 먼저 useState라는 리액트의 기본 개념을 알고 있어야 한다. useState는 이전 글에서 다루기도 했고, 구글링을 통해 쉽게 알 수 있는 개념이기 때문에 자세한 설명은 하지 않겠다. 그냥 간단하게 정의하자면, 지금 이 글의 제목이 '입력 데이터 저장하기'인데, useState는 거기서 '입력 데이터'를 맡고 있다고 보면 된다. 즉, 입력 데이터를 useState를 이용하여 상태 값으로 저장한다는 뜻이다. onChange 입력 데이터라는 것은 '입력' 이라는 이벤트가 들어간 데이터이다. 즉, 이벤트를 수행했을 때 업데이트된 데이터의 값이라는 뜻이다. 이를 도와주는 게 바로 onChange 이벤트이다. onChange는 데이터의 값이 변경되는 것을 감지..

State State란, 계속해서 변화하는 특정 상태로 상태에 따라 각각 다른 동작을 수행하는 특징을 가진다. 예를 들어 한 웹 사이트가 다크모드와 라이트모드를 각각 지원한다고 할 때, 각각 모드가 State라고 볼 수 있다. /* 리액트의 useState를 사용하겠다. */ import React, {useState} from 'react'; /* count는 상태값, setCount는 상태값에 대한 함수, useState의 (0)은 count의 초깃값 */ const [count, setCount] = useState(0); /* onIncrease 함수는 count를 +1하는 setCount 함수를 실행한다. */ const onIncreae = () => {setCount(count + 1)}; ..

들어가기 전 이 글은 자바스크립트의 비동기식 처리에 대해서 간단히 이해하는 정도의 내용만 담고 있다. 그중에서도 Promise와 async-await 문법에 대해서만 다룰 예정이며, 이것 또한 맛보기 수준의 지식만을 전달하려 한다. 비동기 처리는 아무래도 초보 개발자들 입장에서는 이해하기 어려운 부분이다. 나 역시 그렇다. 때문에, 만약 A-Z까지 제대로 된 비동기식 처리를 공부하고자 한다면 '뒤로 가기'를 누르는 것도 조심스레 추천드린다. 하지만, 필자처럼 이제 개발을 막 공부하는 입장이라면 생각하는 수준이 고만고만(?)하고 사고하는 과정이 비슷해서 오히려 도움이 될 수도 있다. (최대한 이해하기 쉽게 비유를 이용하여 설명하였다.) 나도 비동기를 이해하는 데 오래 걸린 만큼 이 글에서는 쉽게 풀어서 설..

for~in const arr = [1, 2, 3, 4, 5]; for (let value in arr){ console.log(value); // 0, 1, 2, 3, 4 (인덱스 반환) } 배열에서 for~in문을 사용하면 각 배열 원소의 인덱스를 반환한다. 초기값은 인덱스를 나타내며, indexOf() 메서드를 사용한 것처럼 배열 전체 원소의 인덱스를 반환해준다. const obj = {name: "Shawn", age: 29, sex: "Male"}; for (let value in obj){ console.log(value) // name, age, sex (key 반환) console.log(obj[value]) // Shawn, 29, Male (value 반환) } 객체에서 for~in문을..

arr.map(callback) let arr = [1, 2, 3, 4, 5]; let arrMap = arr.map(el => el * 2) console.log(arrMap); // [2, 4, 6, 8, 10] map()은 배열의 각 요소 모두에게 한 번씩 접근하는 순회 메서드로, 연산자를 이용하여 요소의 값을 바꿔줄 수 있다. 콜백함수로 파라미터 값에 배열의 인덱스 요소(el)를 넣고 return 값으로 배열의 인덱스 값에 접근한다. 위의 코드는 배열의 모든 요소에 곱하기 2를 해주었고, 그 결과 배열 전체가 곱하기 2가 된 모습을 볼 수 있다. map()의 가장 큰 특징으로는 새로운 배열을 반환한다는 것과 식 안에서 return이 가능하다는 점이다. arr.forEach(callback) let..