클래스형 컴포넌트 import React, { Component } from 'react'; class Hello extends Component { static defaultProps = { name: '이름없음' }; render() { const { color, name, isSpecial } = this....
React에서 Key를 사용하는 이유
리액트로 개발을 하다가 리스트를 만들면, 다음과 같이 key를 사용하라는 안내문이 뜬다. 평소엔 무시하고 key를 그냥 넣었지만, 왜 그런지 갑자기 궁금해져 찾아보았다. Recursing On Children 해당 내용은 리액트 공식문서에 Recursing On Children으로 나와있다. 리액트 리렌더링 과정에서 리스트를 처리할때, 리액...
JS 코테 대비 메소드 정리
문법 for … of : 반복가능한 객체 (Array, String, Set) for … in : 객체. 키를 뽑아냄. Set Set.prototype.add(value) Set.prototype.clear() Set.prototype.delete(value) Set.prototype.forEach((value, k...
학습 내용 요약
프론트엔드 Virtual DOM 리액트의 작동방식은 상태변화 시, 그 컴포넌트와 하위 컴포넌트를 모두 교체하기에 많은 DOM 변화가 일어난다. 이때 리액트에서는 DOM을 추상화한 객체인 Virtual DOM을 변경하고, 변경이 완료되면 실제 DOM과의 차이점을 확인한다음 한번의 리렌더로 해결한다. Virtual DOM은 메모리에 존재하여 메모리...
virtual DOM와 리렌더링
Virtual DOM은 DOM을 추상화한 가상의 객체이다. DOM 이란? HTML 문서를 파싱하여 문서의 구성요소들을 객체로 구조화하여 나타낸 것. HTML Elements, 속성, CSS style, Events, Methods 를 구조화해서 나타낸 객체고, 이 객체를 이용해서 웹페이지 구성요소를 제어할 수 있다. Virtual DOM...
React 18로 업데이트 방법, 문제점 정리
기존에 React 17을 사용하던 Forkie Player 프로젝트를 React 18로 업데이트 하는 기록 업데이트 하는 이유 automatic batching 동영상이 끝났을때 다음 영상으로 넘어가거나, 현재 영상의 시작부분으로 돌아가기 위해선 동영상의 timeupdate, ready, pause, ended 등등의 상태...
velog 메모
리액트 리렌더링 https://velog.io/@eunbinn/when-does-react-render-your-component children으로 넘어온 컴포넌트는 사용되는 컴포넌트가 리렌더링되도, 리렌더링의 영향을 받지 않는다. 리렌더링은 현재 컴포넌트에서 변화된 것이 없어도, 자식으로 전파된다. but 현재 컴포...
함수형 프로그래밍 (이해하기 쉽게)
액션, 계산, 데이터 순수함수 vs 부수효과를 대체한 개념들. 데이터 : 이벤트에 대한 사실. 액션에 의해 변화됨 액션 : 데이터를 변화시킬 수 있음. 실행시점이나 횟수에 의존하여 언제하느냐에 따라 결과가 달라지면 액션이다. 계산 : 입력값을 통해 출력을 만들어내는 것. 같은 입력에 대해 항상 같은 출력값만 내놓아야한다. 외부 세계에 영향을 주...
view
View 다른 테이블을 기반으로 만들어진 가상 테이블. 논리적으로만 존재하는 테이블. 장점 질의문을 쉽게 작성할 수 있음 데이터 보안유지에 도움이 됨. 데이터 관리가 편해짐 특징 ALTER 문으로 뷰를 재정의하는 것은 불가능 기본 테이블 삭제 시 같이 삭제된다. 독자적인 인덱스를 가질 수 없음. **뷰생성 ** ...
IPv6
IPv6 128비트 사용. Multicast 대신에 Broadcast를 함. ICMPv6 ARP, IGMP 기능흡수 ARP : IP주소를 MAC 주소로 변환하는 프로토콜 IPv4 에서 IPv...