💻 가상돔 매번 돔을 새로 반영하는 것은 비효율적이기에, 가상돔이 사용되는데요. 가상돔을 두어 이전과 비교한 다음에 "변경부분만 돔에 반영"되도록 해줍니다. 📍 JSX 리액트 요소트리 Json타입으로 컴포넌트에 key가 할당되고, 해당 값이 변경될때마다 초기화되어, unmount mount가 진행됩니다. JSX-> 리액트 요소 트리 : 화면의 한 순간을 나타내주는 가상돔으로 사용. { type: 'a' or Component함수, // Dom은 문자열, 컴포넌트는 함수 이름이 들어간다. key: key에 지정된 값, ref: '', props: { children, 다른 속성 키: 값 } //... } 📍 가상돔 렌더, 실제 돔 커밋 💡 렌더단계 렌더링마다 가상돔 만들어지고, 이전과 비교 💡 커밋단계 실..

저번 포스팅에 이어서 'You Don't Know JS'교재를 이용한 자바스크립트 문법에 대해서 정리해보겠습니다. 💙 이번 포스팅으 3강 네이티브에 대한 내용입니다. 네이티브 내장 함수로 볼수 있으며, 특정 환경에 종속되지 않은, ECMAScript 명세의 내장 객체를 말합니다. 가장 많이 사용되는 네이티브로는 아래와 같이 있습니다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() ❗ 네이티브를 생성자로 사용 하면, type값은 Object(원시값을 감싼 객체 래퍼 로서)를 나타낸다. var a = new String("abc"); type of a; // "Object" "String"이 아님..

리액트를 개발하면서 이론적인 내용들과 기초가 부족하다고 느껴져서 리액트 공부를 시작했습니다👍 강의는 인프런 "실전 리액트 프로그래밍"을 수강하면서 내용을 정리하는 포스팅을 작성하려 합니다. 👉 리액트 코드의 특징 일반 JS코드와 리액트를 사용한 코드를 비교해보면 아래와 같습니다. 🔹 일반 JS /*UI 구현코드*/ 추가 🔹 리액트 import React, { useState } from 'react'; export default function App(){ const [todoList, setTodoList]= useState([]); const [desc, setDesc]= useState([]); function onAdd(){/*생략 */} return( {/*UI 구현코드*/} {setDesc(e..

이번 포스팅에서는 자바스크립트의 타입과 값에 대한 내용을 다뤄보겠습니다. 웹 프로그래밍을 공부하고 프로젝트를 하다보니, 자바스크립트에 대한 기초적인 부분과 깊은 내용들이 부족하다고 느껴 좀더 이론적으로 공부를 시작했습니다. 공부할 교재를 찾던 중 "You Don't Know JS"[카일 심슨] 이 교재가 유명하고 내용을 잘 다뤄놨다고 해서 공부를 시작했습니다. 💻 타입 자바스크립트는 동적언어라고 해서 타입이 없는 것이 아니라, 자바스크립트 엔진&개발자 모두가 값을 다른값과 분별할 수 있는 "고유한 내부 특성의 집합"을 뜻합니다. 1.1 타입, 그 실체를 이해하자 어떤 형태로든 거의 모든 자바스크립트 프로그램에서 강제변환이 일어나므로 타입을 확실하게 인지하고 사용하는 것이 중요합니다. 1.2 내장 타입 자..

안녕하세요. 이번 포스팅에서는 제가 지금 참여하고 있는 우아한 테크러닝 4기에서 들었던 강의 내용을 다뤄보려 합니다! 이번 강의에서는 redux를 javaScript를 이용하여 간단하게 구현하면서, redux에 대한 개념을 깊이 배워볼 수 있었습니다. 💻 리덕스(redux)란? 제가 생각한 리덕스는 간단하게 정의해보면 "외부에서도 전역적으로 상태관리를 가능하게 해주는 라이브러리"라고 볼 수 있을 것 같아요. 아래 그림처럼, 하나의 리덕스 store라는 곳에 상태 값들을 저장해 두고 외부 컴포넌트에서 접근할 수 있도록 하는 시스템이죠. 간단하게 리덕스에 대해 정리를 하고, 구현으로 넘어가 보겠습니다. 먼저 리덕스에서 사용되는 주 용어는 다음과 같습니다. 🔸 스토어 (Store) 상태 값들을 저장해두는 공간..

우아한 테크러닝에서 리덕스에 대한 강의를 수강하면서, 같이 언급되었던 것이 클로저 함수와 커링 함수입니다. 리덕스에 이 클로저함수가 사용이 되는데요, 이번 포스팅은 클로저함수가 무엇인지에 대해 정리해보겠습니다. 💻 클로저(Closure)란? 클로저의 개념을 알아보기 전에 먼저 클로저 함수의 구조에 대해 간단히 살펴보면, 아래와 같습니다. 함수(outer)에서 함수(inner)를 반환해주는 형태입니다. function outer(){ const name = 'keeper'; return function inner(){ const greeting = 'hello!' console.log(greeting,name) } } const getKeeper = outer() getKeeper() //hello!kee..