현재 실무에서 Class Component 클래스 컴포넌트로만 개발을 진행하고 있기 때문에, Functional Component 함수형 컴포넌트는 접해 본 적이 없어, 공부해보고자 합니다. 1. 함수형 컴포넌트? 함수형 컴포넌트는 JS 함수로 정의된 리엑트 컴포넌트 입니다. state, lifeCycle 관련 기능이 사용 불가능 하나, 주로 Hook를 통해 해결합니다. 클래스 형보다 메모리 자원을 덜 사용하며 컴포넌트 선언이 편하다는 장점이 있습니다. [ 클래스 컴포넌트와 차이점 ] 버튼을 누르면 name, email 값을 바꿔주고 콘솔에 user click, email click 을 찍어주는 간단한 코드를 함수형과 클래스형 구현해보면 아래와 같습니다. //함수형 컴포넌트 예시 import React,..
JS에는 문자열로 형 변환을 제공하는 기본 함수 String()과 .toString()이 있습니다. 주로 개발을 하면서 문자열로 형변환이 필요한 경우가 있는데, 보통 String()을 사용하여 변환하였습니다. 그렇다면 .toString()보다 String()을 자주 쓰는 이유와 .toString()은 언제 쓰는 것이 좋은지 정리하기 위해 글을 작성합니다~ 1. String() 과 toString() 1-1. 차이점 String()은 null, undefined에 대해서도 잘 동작하는 반면, .toString()은 에러가 발생하는 것을 확인할 수 있습니다. String() - 어떤 형태이든 문자로 형변환 .toString() - null(존재하지 않는 값, 비어있는 값, 알 수 없는 값), undefine..
1. 스택(Stack) 스택은 후입 선출(Last In First Out -가장 마지막에 삽입된 자료가 가정 먼저 삭제된다는 의미) 개념이다. 즉, 데이터를 차곡차곡 쌓아 올린 형태의 자료구조를 말한다. 예를들어 바닥이 막힌 상자에 물건을 쌓는다고 생각하면 쉽다. 나중에 넣은 물건이 제일 위에 있으므로 먼저 꺼내게 된다. 정해진 방향으로만 쌓을 수 있다. 저장소의 끝 부분(가장 최근에 들어온 자료). 즉, 가장 먼저 빠져나갈 데어터의 위치를 top이라고 한다. top으로 정한 곳을 통해서만 접근가능하며, 새로 사입되는 데이터는 top이 가리키는 맨 위에 쌓이고, 자료를 삭제할 때도 top의 위치의 데이터를 삭제한다. 삽입은 push, 삭제는 pop 한다고 한다. 스택의 시간 복잡도 삽입(Insertion..
해시 함수 (짦게는 그냥 해시)는 임의의 길이를 갖는 임의의 데이터를 고정된 길이의 데이터로 매핑하는 단방향 함수를 말한다. Key - Value 쌍으로 가지는 자료구조의 형태이며, 해쉬 함수는 Hash(k) = V 로 표현할 수 있다. Hash Function을 통해 K를 입력하면, 값 V가 출력된다. 이때 K가 같으면 항상 같은 V가 출력된다. 1. 해시 테이블 (Hash Table) key와 value를 가지는 자료구조의 종류 중 하나 (ex. 대표적으로 JS에서 Object, Map, Set 등) Hash Function을 통해 빠른 탐색이 가능하다.(키 값을 통해 바로 접근 가능하므로) 따라서 시간복잡도는 O(1) 2. 문제 유형 ex) https://programmers.co.kr/learn/..
1. Spread 문법 Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블이어야 한다. * 이터러블? - 이터러블 프로토콜([for...of], [전개 연산자], [비구조화] ..등, 이터러블이나 이터레이터 프로토콜을 따르는 연산자들과 함께 동작하도록 하는 약속된 규약)을 준수한 객체를 이터러블이라 한다. 배열, 문자열, Map, Set이 있다. console.log(...[1,2,3]) // 1,2,3 console.log(...'Hello') // H e l l o console.log(...new Map([['a','1'],['b','2']])); // ['a','1'] ['b','2'] console.log(...new Set(..
- Total
- Today
- Yesterday
- 가상스크롤
- 자바스크립트 비동기 동작원리
- useRef
- 호이스팅
- javascript
- programmers
- 1급 함수
- react
- 1급 객체
- React로 쓰로틀링 디바운싱 구현
- redirects
- debouncing
- Next.js
- 시맨틱 웹
- 타입스크립트
- redux
- rewrites
- next.js에 .gitignore가 적용되지 않을 때
- typescript
- zustand
- 함수형 컴포넌트
- 1급 시민
- 렌더링 속도 개선
- 자바스크립트 동작원리
- 목표 일기
- next.js 환경변수
- 매겨변수와 인자
- Virtual Scroll
- array
- vue
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |