블로그 이사 🚚 https://wonsss.github.io/
태그 목록
- 전체보기(95)
- 자바스크립트(32)
- 자료구조(13)
- 클린코드(13)
- 알고리즘(12)
- 회고(10)
- 우테코(9)
- React(6)
- 정렬 알고리즘(4)
- DOM(4)
- 개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)
- TIL(3)
- 우아한테크코스(3)
- array.length(2)
- nodejs(2)
- DFS(2)
- 너비우선탐색(2)
- stack(2)
- queue(2)
- JavaScript(2)
- 구조분해할당(2)
- git(2)
- 퀵소트(2)
- 깊이우선탐색(2)
- 재귀함수(2)
- 트리(2)
- BFS(2)
- 우선순위 큐(2)
- insertAdjacentHTML(1)
- 선입선출(1)
- virtual DOM(1)
- 타입 검사(1)
- 객체 변경 방지 메서드(1)
- object(1)
- 배열(1)
- Manifest(1)
- 동등 연산자(1)
- 이벤트 위임(1)
- 비차단(1)
- proto(1)
- 크롬익스텐션(1)
- else if(1)
- 순수함수(1)
- 불변성(1)
- 코드컨벤션(1)
- 선택 정렬(1)
- 참같은값(1)
- 컴포넌트 합성(1)
- ReactDOM(1)
- 싱글스레드(1)
- 이벤트루프(1)
- Graph(1)
- radix sort(1)
- stopPropagation(1)
- 거짓같은값(1)
- 애자일(1)
- eqeqeq(1)
- 해시(1)
- 해시맵(1)
- priority queue(1)
- heap(1)
- 프로미스(1)
- 그래프 순회(1)
- 단축평가(1)
- 함수형 프로그래밍(1)
- 객체(1)
- 제너레이터(1)
- 이중 연결 리스트(1)
- 시간복잡도(1)
- 커스텀 이벤트(1)
- null 병합 연산자(1)
- instanceof(1)
- 버블 정렬(1)
- reconciliation(1)
- 해시 테이블(1)
- dijkstra(1)
- 다익스트라(1)
- 라우팅(1)
- 프로토타입(1)
- 비동기반복(1)
- 매개변수(1)
- CRLF(1)
- 공간복잡도(1)
- null(1)
- early-return(1)
- Prototype(1)
- 이벤트 흐름(1)
- NaN(1)
- 유사배열객체(1)
- props drilling(1)
- 고차 함수(1)
- react redux(1)
- 부정조건문(1)
- composition(1)
- getElementsByClassName(1)
- async(1)
- 비동기(1)
- 코드리뷰(1)
- 책리뷰(1)
- Document 노드(1)
- linkedlist(1)
- &&(1)
- singly linked list(1)
- 선형 검색(1)
- LF(1)
- 타입스크립트(1)
- nodeList(1)
- typeof(1)
- this바인딩(1)
- Element 노드(1)
- 의존성역전원칙(1)
- prefix-suffix(1)
- 조건문(1)
- break(1)
- Node(1)
- querySelectorAll()(1)
- continue(1)
- Object.prototype.toString.call()(1)
- min-max(1)
- object.freeze(1)
- Computed property Name(1)
- Object.isFrozen()(1)
- props.children(1)
- 검색 알고리즘(1)
- OR 연산자(1)
- 배열 고차함수(1)
- 산책(1)
- async/await(1)
- 이진 힙(1)
- Big O(1)
- context(1)
- 삼항연산자(1)
- tree traversal(1)
- 타입(1)
- 후입선출(1)
- 길 찾기(1)
- 리팩토링(1)
- this(1)
- first-last(1)
- begin-end(1)
- CSS(1)
- CSS Module(1)
- styled components(1)
- 가중 그래프(1)
- 드모르간의 법칙(1)
- 함께 자라기(1)
- 퀵정렬(1)
- useCallback(1)
- import 모듈(1)
- useselector(1)
- FIFO(1)
- preventDefault(1)
- prettierrc(1)
- 기타(1)
- 책(1)
- InnerHTML(1)
- 분기다루기(1)
- 이진 탐색 트리(1)
- 이진 검색(1)
- appendChild(1)
- 스택(1)
- array(1)
- 트리구조(1)
- 단일 연결 리스트(1)
- 무방향 그래프(1)
- 클래스 컴포넌트(1)
- graph traversal(1)
- 캡처링 단계(1)
- doubly linked list(1)
- 자막번역(1)
- LIFO(1)
- 재조정(1)
- 환경설정(1)
- components(1)
- 버블링 단계(1)
- isNaN(1)
- for await of(1)
- lookup table(1)
- 병합 정렬(1)
- DOM 이벤트(1)
- 일치 연산자(1)
- 다크모드(1)
- HTMLCollection(1)
- try catch(1)
- default case(1)
- Binary Search Tree(1)
- 그래프(1)
- Hash Table(1)
- 선언적 프로그래밍(1)
- Naive String Search(1)
- 인접 리스트(1)
- 큐(1)
- 동시성(1)
- else(1)
- robots(1)
- 삼항조건연산자(1)
- 트리 순회(1)
- 기수 정렬(1)
- binary heap(1)
- redux(1)
- EOL(1)
- eslintrc(1)
- Real DOM(1)
- stopImmediatePropagation()(1)
- 합성(1)
- vscode(1)
- 노션(1)
- 디버그(1)
- 최적화(1)
- React.memo(1)
- 경계(1)
- undefined(1)
- eqeq(1)
전체보기 (95)자바스크립트(32)자료구조(13)클린코드(13)알고리즘(12)회고(10)우테코(9)React(6)정렬 알고리즘(4)DOM(4)개발이랑은 딱히 상관없는 그냥 한 주 이야기(4)TIL(3)우아한테크코스(3)array.length(2)nodejs(2)DFS(2)너비우선탐색(2)stack(2)queue(2)JavaScript(2)구조분해할당(2)git(2)퀵소트(2)깊이우선탐색(2)재귀함수(2)트리(2)BFS(2)우선순위 큐(2)insertAdjacentHTML(1)선입선출(1)virtual DOM(1)타입 검사(1)객체 변경 방지 메서드(1)object(1)배열(1)Manifest(1)동등 연산자(1)이벤트 위임(1)비차단(1)proto(1)크롬익스텐션(1)else if(1)순수함수(1)불변성(1)코드컨벤션(1)선택 정렬(1)참같은값(1)컴포넌트 합성(1)ReactDOM(1)싱글스레드(1)이벤트루프(1)Graph(1)radix sort(1)stopPropagation(1)거짓같은값(1)애자일(1)eqeqeq(1)해시(1)해시맵(1)priority queue(1)heap(1)프로미스(1)그래프 순회(1)단축평가(1)함수형 프로그래밍(1)객체(1)제너레이터(1)이중 연결 리스트(1)시간복잡도(1)커스텀 이벤트(1)null 병합 연산자(1)instanceof(1)버블 정렬(1)reconciliation(1)해시 테이블(1)dijkstra(1)다익스트라(1)라우팅(1)프로토타입(1)비동기반복(1)매개변수(1)CRLF(1)공간복잡도(1)null(1)early-return(1)Prototype(1)이벤트 흐름(1)NaN(1)유사배열객체(1)props drilling(1)고차 함수(1)react redux(1)부정조건문(1)composition(1)getElementsByClassName(1)async(1)비동기(1)코드리뷰(1)책리뷰(1)Document 노드(1)linkedlist(1)&&(1)singly linked list(1)선형 검색(1)LF(1)타입스크립트(1)nodeList(1)typeof(1)this바인딩(1)Element 노드(1)의존성역전원칙(1)prefix-suffix(1)조건문(1)break(1)Node(1)querySelectorAll()(1)continue(1)Object.prototype.toString.call()(1)min-max(1)object.freeze(1)Computed property Name(1)Object.isFrozen()(1)props.children(1)검색 알고리즘(1)OR 연산자(1)배열 고차함수(1)산책(1)async/await(1)이진 힙(1)Big O(1)context(1)삼항연산자(1)tree traversal(1)타입(1)후입선출(1)길 찾기(1)리팩토링(1)this(1)first-last(1)begin-end(1)CSS(1)CSS Module(1)styled components(1)가중 그래프(1)드모르간의 법칙(1)함께 자라기(1)퀵정렬(1)useCallback(1)import 모듈(1)useselector(1)FIFO(1)preventDefault(1)prettierrc(1)기타(1)책(1)InnerHTML(1)분기다루기(1)이진 탐색 트리(1)이진 검색(1)appendChild(1)스택(1)array(1)트리구조(1)단일 연결 리스트(1)무방향 그래프(1)클래스 컴포넌트(1)graph traversal(1)캡처링 단계(1)doubly linked list(1)자막번역(1)LIFO(1)재조정(1)환경설정(1)components(1)버블링 단계(1)isNaN(1)for await of(1)lookup table(1)병합 정렬(1)DOM 이벤트(1)일치 연산자(1)다크모드(1)HTMLCollection(1)try catch(1)default case(1)Binary Search Tree(1)그래프(1)Hash Table(1)선언적 프로그래밍(1)Naive String Search(1)인접 리스트(1)큐(1)동시성(1)else(1)robots(1)삼항조건연산자(1)트리 순회(1)기수 정렬(1)binary heap(1)redux(1)EOL(1)eslintrc(1)Real DOM(1)stopImmediatePropagation()(1)합성(1)vscode(1)노션(1)디버그(1)최적화(1)React.memo(1)경계(1)undefined(1)eqeq(1)
React의 작동원리(React vs ReactDOM, 컴포넌트 vs Real DOM)
리액트가 실제로 어떻게 작동하는가 React React는 유저 인터페이스를 만드는 자바스크립트 라이브러리다. React는 컴포넌트를 활용하여 효율적으로 유저 인터페이스를 만들고 업데이트한다. React는 컴포넌트와 state를 관리하는 라이브러리일뿐이다. React는 컴포넌트의 현 state와 전 state의 차이점을 찾아낸다. React는 데이터에서 변경된 내용을 바탕으로 화면에 뭘 나타낼지 정한다. 그렇게 정한 내용을 인터페이스(ReactDOM에게)에 보낸다. React는 props를 다루며, props는 부모 컴포넌트에서 전달된 데이터로서 부모와 자식 컴포넌트를 연결한다. React는 컴포넌트 내부 데이터인 state와 컴포넌트 전반에 영향을 미치는 context 데이터를 다룬다. props, state, context가 변할 때마다 React가 그것들을 쓰는 컴포넌트를 업데이트하고, 컴포넌트가 화면에 새로운 내용을 띄우려는지 확인한다.
2022년 1월 23일
·
0개의 댓글·
0