React를 사용할 때는 컴포넌트를 클래스 또는 함수로 정의할 수 있습니다. 클래스 컴포넌트로 정의를 할 경우 각각의 컴포넌트는 컴포넌트의 라이프 사이클 즉, 수명주기가 존재합니다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 납니다. 위 이미지는 리액트 클래스형 컴포넌트의 라이프 사이클을 나타냅니다. (v16.4) 1. 라이프 사이클의 분류 (v16.4 기준으로 라이프 사이클에 대해 정리해보겠습니다.) 라이프 사이클은 생성 될 때, 업데이트 할 때, 제거 할 때로 크게 세가지 유형으로 나눌 수 있습니다. (위 사진 참고) 이를 리엑트에서 마운트, 업데이트, 언마운트 라고 합니다. 마운트 : 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현 ..
전역변수는 모든 영역에서 사용할 수 있는 변수를 말합니다. 전역변수를 선언하면 코드의 블록, 내부,외부 함수 등의 영역에 상관없이 어디서든 불러와 사용 할 수 있습니다. 1. 내 코드의 문제점 현재 진행 중인 프로젝트 구조 상 상태관리 라이브러리를 사용하지 않다보니, 개발을 하다가 굳이 state로 관리하지 않아도 되는 데이터들이 있었고, 이러한 데이터들을 자식 컴포넌트에서 사용하기 위해서 계속해서 여러 값들을 내려주다보니 점점 많아져 관리하기도 힘들고 알아보기도 힘들었습니다. 그래서 이러한 데이터들을 쉽게 관리 하고, 하위 컴포넌트에서도 쉽게 사용 가능하도록 개선해보고자 했습니다. 2. 개선 class GlobalJS extends PureComponent { //region >> constructor..
화살표 함수(Arrow function)는 ES6문법으로 전통적인 함수표현(function)을 간편하게 할 수 있습니다. function을 생략하고 그 대신에 화살표(=>)를 이용하여 코드를 축약해 더 직관적으로 볼 수 있습니다. 1. 화살표 함수의 기본 구조 화살표 함수의 기본 구조는 아래와 같습니다. const 함수명 = (매개변수1, 며개변수2, ... ) => { ~ 로직 전개 ~ return 반환할 값 } 화살표 함수는 항상 익명 입니다. 기존의 함수 표현식에서 function 키워드를 지우고, 매개변수를 담는 괄호와 함수 몸통 코드 블록 사이에 화살표를 넣어 만듭니다. 함수 몸통 내부에 반환할 값이 있다면 중괄호({})와 return을 생략할 수 있습니다. 중괄호를 사용하면 값을 반환할 때 r..
this란 함수를 호출할 때 생성되는 실행 컨텍스트 객체입니다. *실행 컨텍스트? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. (ex. window, global ..) 전역 공간에서의 this 메서드 또는 함수로서 호출할 때 내부에서의 this 콜백 함수 호출 시 내부에서의 this 생성자 함수 내부에서의 this 위의 경우로 this의 의미를 나눌 수 있습니다. 1. 전역 공간에서의 this 전역 공간에서의 this는 전역 객체를 가리킵니다. (브라우저 환경에서는 window, NodeJS 환경에서는 global) thia.a와 window.a의 값이 100으로 같은 것은 JS의 모든 변수는 실은 특정 객체의 프로퍼티로 동작하기 때문입니다. => 전역변수를 선언하면 JS 엔진은 이를 전역..
Hook은 리엑트 v16.8에 추가된 기능이며, 함수형 컴포넌트에서 state와 생명주기와 같은 여러 기능을 제공하는 라이브러리 입니다. 최상위(at the Top Level)에서만 hook을 호출해야합니다. 반복문, 조건문 또는 중첩된 함수 내에서 hook을 호출하면 안됩니다. early return(함수 또는 반복문 등에서 끝에서 return 되기 전 if문 안에서 일찍 return 하는 것)전에 항상 React함수의 최상위에 hook을 호출해야합니다. 오직 React 함수 내에서 hook을 호출해야 합니다. import React, { useState } from "react" function HookTest(props) { if (props.name == 'User') { const [name, ..
- Total
- Today
- Yesterday
- next.js에 .gitignore가 적용되지 않을 때
- 1급 시민
- Next.js
- 자바스크립트 동작원리
- next.js 환경변수
- programmers
- typescript
- 타입스크립트
- 1급 함수
- 가상스크롤
- 자바스크립트 비동기 동작원리
- redux
- rewrites
- 1급 객체
- 호이스팅
- 시맨틱 웹
- redirects
- 목표 일기
- React로 쓰로틀링 디바운싱 구현
- array
- 함수형 컴포넌트
- Virtual Scroll
- useRef
- react
- vue
- 렌더링 속도 개선
- debouncing
- zustand
- javascript
- 매겨변수와 인자
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |