React를 사용할 때는 컴포넌트를 클래스 또는 함수로 정의할 수 있습니다. 클래스 컴포넌트로 정의를 할 경우 각각의 컴포넌트는 컴포넌트의 라이프 사이클 즉, 수명주기가 존재합니다. 컴포넌트의 수명은 일반적으로 페이지에서 렌더링 되기 전 준비 과정에서 시작해 페이지에서 사라질 때 끝이 납니다. 위 이미지는 리액트 클래스형 컴포넌트의 라이프 사이클을 나타냅니다. (v16.4) 1. 라이프 사이클의 분류 (v16.4 기준으로 라이프 사이클에 대해 정리해보겠습니다.) 라이프 사이클은 생성 될 때, 업데이트 할 때, 제거 할 때로 크게 세가지 유형으로 나눌 수 있습니다. (위 사진 참고) 이를 리엑트에서 마운트, 업데이트, 언마운트 라고 합니다. 마운트 : 컴포넌트가 처음 실행될 때 그것을 Mount라고 표현 ..
전역변수는 모든 영역에서 사용할 수 있는 변수를 말합니다. 전역변수를 선언하면 코드의 블록, 내부,외부 함수 등의 영역에 상관없이 어디서든 불러와 사용 할 수 있습니다. 1. 내 코드의 문제점 현재 진행 중인 프로젝트 구조 상 상태관리 라이브러리를 사용하지 않다보니, 개발을 하다가 굳이 state로 관리하지 않아도 되는 데이터들이 있었고, 이러한 데이터들을 자식 컴포넌트에서 사용하기 위해서 계속해서 여러 값들을 내려주다보니 점점 많아져 관리하기도 힘들고 알아보기도 힘들었습니다. 그래서 이러한 데이터들을 쉽게 관리 하고, 하위 컴포넌트에서도 쉽게 사용 가능하도록 개선해보고자 했습니다. 2. 개선 class GlobalJS extends PureComponent { //region >> constructor..
현재 실무에서 Class Component 클래스 컴포넌트로만 개발을 진행하고 있기 때문에, Functional Component 함수형 컴포넌트는 접해 본 적이 없어, 공부해보고자 합니다. 1. 함수형 컴포넌트? 함수형 컴포넌트는 JS 함수로 정의된 리엑트 컴포넌트 입니다. state, lifeCycle 관련 기능이 사용 불가능 하나, 주로 Hook를 통해 해결합니다. 클래스 형보다 메모리 자원을 덜 사용하며 컴포넌트 선언이 편하다는 장점이 있습니다. [ 클래스 컴포넌트와 차이점 ] 버튼을 누르면 name, email 값을 바꿔주고 콘솔에 user click, email click 을 찍어주는 간단한 코드를 함수형과 클래스형 구현해보면 아래와 같습니다. //함수형 컴포넌트 예시 import React,..
1. JSX const element = Hello, world!; function App(){ return ( Helloreact ); } 위와 같은 코드는 아래와 같이 변환된다. (브라우저에서 실행 전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS형태의 코드로 변환) function App(){ return React.createElement("div",null,"Hello",React.createElement("b",null,"react")); } * 바벨 ? 초기에는 ES6코드를 ES5코드로 변환해주는 컴파일러 역할을 하였고, 현재는 바벨을 이용해 JSX문법, TS 같은 정적 타입 언어, 제안 단계(정식문법이 아닌것들) 등을 사용 가능하게 해주고 있다. JSX는 JavaScript를 확장한..
- Total
- Today
- Yesterday
- array
- 시맨틱 웹
- vue
- React로 쓰로틀링 디바운싱 구현
- 호이스팅
- 목표 일기
- rewrites
- 1급 객체
- debouncing
- useRef
- 1급 함수
- 타입스크립트
- 가상스크롤
- javascript
- 1급 시민
- next.js 환경변수
- redirects
- 매겨변수와 인자
- 함수형 컴포넌트
- next.js에 .gitignore가 적용되지 않을 때
- Next.js
- zustand
- Virtual Scroll
- 렌더링 속도 개선
- typescript
- programmers
- react
- 자바스크립트 비동기 동작원리
- 자바스크립트 동작원리
- redux
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |