리액트의 데이터(state등)는 부모 component에서 자식 component로 내려간다. 만약 형제 component끼리 상태를 공유하고 싶으면?=> 부모 component로 statef를 올린다. (= State Lifting) 예)아래와 같은 app을 만들어보면 두 개의 자식 컴포넌트가 count값을 알아야 하기 때문에 부모 컴포넌트인 App으로 state lifting을 해야한다. App.jsximport { useState } from "react";import "./App.css";import Viewer from "./components/Viewer";import Controller from "./components/Controller";function App() { const [..
상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 Props를 이용하면 된다.React에서 데이터(Props)는 상위 컴포넌트에서 아래 컴포넌트로 흐른다. Props를 전달하는 방법은 두 가지1. 객체형태로 전달App.jsximport "./App.css";import Button from "./components/Button";function App() { const buttonProps = { text: "메일", color: "red", }; return ( );}export default App; Button.jsxconst Button = (props) => { console.log(props); // {text: '메일', co..
ComponentJavaScript에서 html을 리턴하는 함수함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다. vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면 1. index.html파일에서 main.jsx실행 2. main.jsx에서 App Component 렌더링 3. App Component(함수)는 html을 리턴 JSXJSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)3. 모든 태그는 닫혀있어야 한다.4. 최상위 ..
자바스크립트는 싱글 스레드로 작동하기 때문에 Stack에서 코드를 순차적으로 실행시키고 Web APIs에 비동기 작업을 위임한다.Web APIs에서 완료 된 비동기 작업들은 Callback queue에 할당되고 Event loop를 통해 Stack에 등록되면 callback 함수가 호출된다. 1. Promiseadd10 함수 호출 2초후에 executor가 실행 된다.function add10(num) { // Promise는 비동기 작업을 감싸는 객체 const promise = new Promise((resolve, reject) => { // executor // 비동기 작업을 실행하는 함수 setTimeout(() => { if (typeof num === "nu..
1. filter기존 배열에서 조건을 만족하는 요소들만 필터링하여 "새로운 배열"로 반환let arr1 = [ { name: "dy lee", address: "KR" }, { name: "sy im", address: "KR" }, { name: "yj kim", address: "US" },];const bundangPeople = arr1.filter((item) => item.address === "KR");console.log(bundangPeople);// [// {// "name": "dy lee",// "address": "KR"// },// {// "name": "sy im",// "address": "K..
1. forEach배열의 모든 요소를 순회하면서, 각각의 요소에 특정 동작을 수행시키는 메서드let arr1 = [1, 2, 3];arr1.forEach(function (item, idx, arr) { console.log(item * 2); // 2 // 4 // 6});// 아래와 같이 응용가능let doubledArr = [];arr1.forEach((item) => { doubledArr.push(item * 2);});console.log(doubledArr); // [2, 4, 6] 2. includes배열에 특정 요소가 있는지 확인하는 메소드let arr2 = [1, 2, 3];console.log(arr2.includes(3)); // trueconsole.log(arr2.inc..
배열 조작 메소드 6가지push, pop, shift, unshift, slice, concat// 배열 메소드1// 6가지의 요소 조작 메소드// 1. push// 배열의 맨 뒤에 새로운 요소를 추가하는 메서드let arr1 = [1, 2, 3];// push는 최종적으로 배열의 길이를 반환한다.const newLength = arr1.push(4, 5, 6, 7);console.log(arr1); // [1, 2, 3, 4, 5, 6, 7]console.log(newLength); // 7// 2. pop// 배열의 맨 뒤에 있는 요소를 제거하고, 반환let arr2 = [1, 2, 3];const poppedItem = arr2.pop();console.log(poppedItem); // 3cons..
for of => 배열 순회에 쓰임for in => 객체 순회에 쓰임 1. 배열 순회// 1 배열 순회let arr = [1, 2, 3];// 1.1 배열 인덱스for (let i = 0; i 2. 객체 순회// 2. 객체 순회let person = { name: "DY", age: 32, hobby: "PS5",};// 2.1 Object.keys사용// -> 객체에서 key 값들만 뽑아서 새로운 배열로 변환let keys = Object.keys(person);console.log(keys); // ['name', 'age', 'hobby']// for of는 배열에서만 사용하는 연산자for (let key of keys) { const value = person[key]; console...
Object Type은 Primitive Type과 달리 참조에 의해(by reference) 저장되고 복사 된다.따라서 객체를 복사하고 싶을때에는 깊은 복사를 해줘야 한다. // 객체 얕은 복사let so1 = { name: "DY" };let so2 = so1;// 객체 깊은 복사let do1 = { name: "DY" };let do2 = { ...do1 };// 객체간의 비교는 기본적으로 참조값을 기준으로 한다.let o1 = { name: "DY" };let o2 = o1;let o3 = { ...o1 };// 얕은 비교console.log(o1 === o2); // trueconsole.log(o1 === o3); // false// 깊은 비교console.log(JSON.stringify(o..
1. Spread는 객체나 배열에 저장 된 값을 개별적으로 만들기 위함(Spread : 흩뿌리다, 펼치다.)// 1. Spread 연산자// -> Spread : 흩뿌리다. 펼치다// -> 객체나 배열에 저장된 여러개의 값을 개별로 흩뿌려주는 역할// 배열 spreadlet arr1 = [1, 2, 3];// 4, 1, 2, 3, 5, 6 를 만들고 싶을 때let arr2 = [4, ...arr1, 5, 6];console.log(arr2); // [4, 1, 2, 3, 5, 6]// 객체 spreadlet obj1 = { a: 1, b: 2,};let obj2 = { ...obj1, // obj1의 속성을 그대로 사용할 수 있다. c: 3, d: 4,};console.log(obj2); // ..
