드디어 밀린 마지막 회고록.. ^^
밀리지 맙시다..
1.1. Fragment (프래그먼트)
-
리액트에서는 하나의 컴포넌트가 여러 개의 앨리먼트들을 반환한다. 컴포넌트가 렌더링될 떄 실제 돔에는 나타나지 않고 여러 요소를 그룹화하는 역할을 수행한다.
-
단순히 감싸기 위해서 div 태그를 사용하면 화면 상에 나타난다. 그러기 때문에 화면에 나타나지 않는 React.fragment 를 사용하기를 권장한다.
<>
<OneChild />
<AnotherChild />
</>Fragment를 사용하는 이유는 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 DOM 트리 구조로 만들기 위함.
출처: 프레그먼트
공식 문서: 프레그먼트 사용 방법
2.1. 렌더링
- 데이터 리스트는 배열로 map, filter 가 가장 리액트에서 사용하기 좋다. (반복문 for of 나 for Each 는 값을 도출하지 않아서 사용하는 것을 권장하지 않음)
2.1.2. 조건 렌더링
- 삼항 연산자를 사용하여 렌더링을 할 수 있다.
- && 연산자와 조건 함수를 사용하여 렌더링을 할 수 있다.
2.1.3. 리스트 렌더링
- 리액트에서는 Map 메서드를 이용해 배열을 JSX 요소로 렌더링할 수 있다.
- map 메소드: 배열의 각 항목에 대해 주어진 함수 실행, 그 결과로 새로운 배열을 생성한다.
- filter 메소드: 특정 조건을 만족하는 항목만을 선택하여 새로운 배열을 만들 수 있다. (이에 따라 필터링이 가능해짐)
자세한 코드와 활용방법인 이 글을 참고하자.
출처: 렌더링 종류
3.1. 구조분해할당
객체 (key: value) 형식으로 된 것은 모두 구조 분해 할당이 가능하다. 구조분해할당은 자바스크립트가 해야 하는 부분이다.
