2023.08.28(월) 슈퍼코딩 부트캠프 프론트엔드 React 인턴 Week2 Day 1 보고

• TO-DO LIST

- 45강 Big Picture ~ 48강 리액트 심화 - 3 - ref

​

• 배운 내용 요약 정리

JSX의 한계

하나의 JSX 안에 두 개 이상의 요소가 있으면 에러가 발생한다.

지난주에는 div를 바깥에 래핑해서 해결했음!

​

div로 감쌌을 때 문제점

1. 리스트 렌더링을 해 주어야 하는 경우 key 값을 추가해 주어야 한다.
2. div가 계속해서 중첩될 수 있다. 너무 div 남발!

​

React.Fragment

jsx 문법에서 여러 개의 요소를 가진 component를 감싸줌

빈 태그로도 사용 가능 <> </>

​

<Fragment>, often used via <>...</> syntax, lets you group elements without a wrapper node.

<>

<OneChild />

<AnotherChild />

</>

​

- createPortal

createPortal lets you render some children into a different part of the DOM.

createPortal(children, domNode, key?)

​

A portal only changes the physical placement of the DOM node.

​

모달과 같은 Overlay 컴포넌트는 전체 html에서 동작하게 해야 한다.

컴포넌트의 위치를 옮겨줄 때 React Portal을 사용한다.

​

- Ref

직접 DOM을 참조할 수 있게 해준다.

상태를 사용하지 않고 DOM의 값들을 조작할 수 있다.

When you want a component to "remember" some information,

but you don't want that information to trigger new renders, you can use a ref.

​

You can add a ref to your component by importing the useRef Hook from React:

import { useRef } from 'react';

​

• 부족한 점

​

• 스스로 시도해본 것들

​

• 해결 내용

​

• 알게된 점

​

• 헷갈리거나 실수한 점

​

• 회고