React JSX로 인해 불필요한 div 로 감싸는 상황일 때 Fragments를 사용하자!
React JSX 특징 중 하나로, 아래와 같은 특징이 있습니다. React 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문에 반드시 부모 요소 하나가 감싸는 형태여야 한다. 리액트 JSX 기반으로 개발된 프로젝트들을 보면 위 내용으로 인해, 아무런 의미 없이 태그를 남발하는 상황이 나타나게 된다. 이러한 경우 아래와 같은 단점들이 생기게 된다. 1. 불필요한 DOM node 생성으로 불필요한 메모리를 잡아먹는다 2. CSS Flexbox 및 Grid로 작업할 때 레이아웃이 깨질 수 있다 3. HTML 특정 구조(ul > li, table > tr > td)에 잘못된 HTML 구조가 발생할 수 있다 이러한 이유들로 우리는 React의 Fragments를 적극적으로 활용해야 합니다. 👉 F..
프레임워크 및 라이브러리 공부/React
2022. 4. 15. 20:48
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
TAG
- github
- Prototype
- 클래스 컴포넌트
- useState
- HTML
- scope
- Es5
- NestJS
- react
- Angular
- const
- array
- window
- JavaScript
- website
- Let
- ES6
- 리엑트
- 클래스형 컴포넌트
- 깃헙
- useEffect
- this
- class component
- TypeScript
- string
- virtual dom
- Function Component
- 가상돔
- 함수 컴포넌트
- 웹사이트
최근에 올라온 글
- Total
- Today
- Yesterday