리액트의 데이터(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 [..
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. 최상위 ..
// 1. null병합 연산자// -> 존재하는 값을 추려내는 기능// -> null, undefined가 아닌 값을찾아내는 연산자let var1;let var2 = 10;let var3 = 20;let var4 = var1 ?? var2;console.log(var4); // => 10let var6 = var3 ?? var2;console.log(var6); // => 20 let var7 = var2 ?? var3;console.log(var7); // => 10// 둘다 null, undefined가 아닌 경우 앞에 값 사용// 이렇게 응용도 가능let userName = "DY";const defaultName = "None";let displayName = userName ?? defaultN..
자바스크립트의 타입캐스팅은 두가지 방식이 존재1) 상황에 따라 암시적 형변환을 자바스크립트 엔진에서 실행2) 개발자가 코드를 통해 의도적으로 명시적 형변환을 실행 암시적 형변환 예)// 1. Implicit Type Castinglet num = 10;let str = "20";const result = num + str;console.log(result); // => 1020 문자열이 된다. 명시적 형변환 예)// 2. Explicit Type Castinglet str1 = "10";let strToNum1 = Number(str1);// console.log(10 + strToNum1); // => 20let str2 = "20개";let strToNum2 = Number(str2);console..
자바스크립트 데이터 타입은 크게 원시(Primitive)타입과 객체(Object)타입으로 구분 된다.객체 타입은 c/cpp의 포인터나 자바처럼 참조형이기 때문에 주소를 통해 접근된다. (따라서 얕은 복사 주의) Primitive Type 예)// Number Typelet num1 = 27;let num2 = 1.5;let num3 = -20;console.log(num1 + num2);console.log(num1 - num2);console.log(num1 * num2);console.log(num1 / num2);console.log(num1 % num2);let inf = Infinity;let mInf = -Infinity;console.log(inf);console.log(mInf);let ..
