배열 합치기 const fruits = ["apple", "banana", "kiwi"]; const berry = ["strawberry", "blackberry", "grapeberry"]; const fruits = ["apple", "banana", "kiwi", ...berry]; 객체 합치기 const fullName = { fName: "Tom", lName: "Cruise" }; const actor = { ...fullName, age: 50, genre: "Action" }; *객체를 합칠 때 위에서처럼 ...를 쓰면 fullName의 원소들과 actor의 원소들이 같은 레벨에 위치하게 되지만, const actor = { fName: "Tom", lName: "Cruise", age:..

성과 이름 2개의 input을 가지고, 입력값을 실시간으로 태그에 보여주는 App이 있다. 물론 아래와 같이 useState를 input마다 할당할 수 있지만, 계속 함수가 중복됨을 볼 수 있다. import React, { useState } from "react"; function App() { const [fName, setfName] = useState(""); const [lName, setlName] = useState(""); function handlefNameChange(e) { setfName(e.target.value) } function handlelNameChange(e) { setlName(e.target.value) } return ( Hello {fName} {lName} S..

React를 사용한다면, HTML 요소들을 태그로 묶어 한번에 렌더링할 때 어떤 변수의 값에 따라 UI가 변하기 마련이다. 여기서 "어떤 변수"는 보통 의 을 통해 유저로부터 받은 값을 같은 태그에 업데이트 시키는 데 사용되는 변수, 즉 state 변수를 의미한다. (ex. isLogin의 값이 true일 때 버튼의 value가 logout으로 바뀐다면, 여기서 state변수는 isLogin) 이때 업데이트 value를 담은 과 value를 반영한 은 같은 state 변수로 통일해야 한다. 이를 "신뢰 가능한 단일 출처"라고 한다. // App.jsx import React, { useState } from "react"; function Login() { const [isLogin, setLogin] ..

배열은 [0], [100]처럼 숫자로 인덱싱을 하고, 객체는 myObj.name, myObj["name"]처럼 key로 인덱싱을 한다. 인덱싱은 분명 그 자체로 빠르고 직관적인 탐색이지만, 코드량이 많아지거나 협업을 할 때 갑자기 [0]이 나타났다면 코드의 흐름을 한눈에 파악하기 어려울 수 있다. 게다가 배열 안에 또다른 배열이 있거나, 객체 안에 또다른 객체가 있거나, 객체 안에 배열이 있거나 등등 데이터가 중첩되고(nested) 복잡해진다면 더 말할 것 없다. 이럴 때 기존처럼 단순히 숫자나 key로 접근하는 것이 아니라, 언제봐도 직관적으로 이게 어떤 값에 접근하는지를 나타내는 커스텀 인덱스가 있으니, 이것이 바로 Destructuring이다. Destructuring은 단어 그대로 구조를 해체하는..

UI = function (state) 물은 얼음과 같은 성분이지만, 온도에 따라 다른 상태를 가진다. 마찬가지로, React Component(ex. )는 요소 자체는 그대로이지만, 상태를 담당하는 변수의 값에 따라 다른 UI를 가진다. React에서 UI를 변경하는 데에는 Declarative Programming과 Imperative Programming 2가지 방식이 있다. Declarative는 .jsx(js) 파일 상단에서 선언했던 상태 저장용 변수를, UI 변경을 담당하고자 만든 커스텀 함수의 body에서 변형시킴으로써(true->false처럼 toggle을 쓰는 등) 목적을 달성하는 방법이다. Imperative는 document.querySelector 등으로 해당 HTML 요소에 접근하..