[React] Udemy 강의 노트 9

 

 

모듈 소개

- 더 많은 문제를 해결하게 해주는 리액트 툴인 프래그먼트, 포털, ref에 대해 알아본다.

 

 

JSX 제한 사항 및 해결 방법

- JSX는 컴포넌트에서 반환하는 코드이다.

- JSX는 제한 사항이 있다.

- 루트 수준에서 JSX 요소가 인접해 있으면 오류가 발생한다. 루트 수준에서는 하나의 JSX요소로 래핑되어있어야 한다.

 

- div 같은 HTML 요소 대신 사용자 정의 컴포넌트를 이용할 수도 있다.

- div를 이용할 때는 div 수프라는 문제가 생긴다. 시맨틱 의미를 갖지 않는 불필요한 div가 실제 DOM으로 렌더링 된다는 점이다.

 

 

컴포넌트 감싸기(wrapper) 만들기

- div soup를 해결하는 트릭을 만든다.

- 별도의 파일로 Wrapper.js 컴포넌트를 만들고 props.children를 반환시킨다.

- props.children은 사용자 정의 컴포넌트에서 여는 태그와 닫는 태그 안의 모든 내용을 반환해준다.

- 이것을 이용하면 루트요소를 1개로 만들 수 있다.

 

const Wrapper = props => {
	return props.children;
}

export default Wrapper;

 

 

리액트 조각

- 하지만 Fragment를 이용하면 Wrapper를 직접 만들 필요가 없다.

- <React.Fragment></React.Fragment> 또는 <></>를 사용한다.

 

 

- 이 두 구문은 빈 Wrapper를 반환하며 실제 HTML 요소를 렌더링 하지 않는다.

- 이 fragment 중 빈 <></> 요소는 빌드 설정이 필요하다.

 

 

리액트 포털 소개

- 리액트 포털도 간결한 코드를 작성하기 위해 도움을 준다.

- 모달처럼 전체 페이지 위에 표시 되어야 하는 코드들이 중첩되어 있는 것은 좋은 구조가 아니다.

 

 

 

포털 작업하기

- 모달은 body의 직계가족이 되면 시맨틱적으로 문제가 없다.

- 포털을 이용해서 옮길 수 있다.

- public/index.html에 div를 추가해준다.

 

    <div id="backdrop-root"></div>
    <div id="overlay-root"></div>

 

- react-dom 라이브러리에 있는 로직이나 기능을 웹 브라우저로 가져오기 위해 리액트를 사용하는 것인데 무언가를 포털로 보내기 위해 react-dom에서 임포트 해야한다.

import ReactDOM from 'react-dom';
//리액트 18.0.0 부터는 아래와 같이 작성
import ReactDOM from 'react-dom/client'

- 그리고 포탈을 열어주는데 첫 번째는 렌더링 되어야 하는 리액트 노드JSX를 넣어주고, 두 번째는 포인터다. 바닐라자바스크립트로 DOM에 접근한다.

 

{ReactDOM.createPortal(<ModalOverlay title={props.title} message={props.message} 
onConfirm={props.onConfirm} />, document.getElementById('overlay-root'))}

- 여기에서 계속 react_dom_client__WEBPACK_IMPORTED_MODULE_1___default.a.createPortal 오류가 있었는데 npm install로 패키지 재설치하니까 모달이 떴다.

 

 

 

"ref"로 작업하기

- ref는 reference로 참조라는 뜻이다. 

- ref는 다른 DOM 요소에 접근해서 작업할 수 있게 해주는 것이다.

- 렌더링되는 HTML 요소들과 다른 자바스크립트 코드를 연결할 수 있다.

- useRef라는 리액트 훅을 사용한다. (리액트 훅은 함수형 컴포넌트에서만 사용할 수 있다.)

 

import React, { useRef, useState } from 'react';
const nameInputRef = useRef();

 

- 연결하기 위한 HTML 요소에 가서 props로 ref={nameInputRef}를 추가한다.

- nameInputRef 안에 있는 것은 나중에 실제 DOM 요소가 될 것이다.

- ref의 값은 항상 객체이며 항상 current 속성을 가지고 있다.

 

- current의 값은 실제 DOM이기 때문에 ref를 통해 조작할 수 있다.

- 아래와 같이 current의 값을 받아오면 state를 이용해 값을 조작하는 것이 아니라 ref로 값을 받아서 보내고 업데이트 할 수 있다.

const enteredName = nameInputRef.current.value;

- ref는 코드가 조금 더 적지만 DOM을 조작한다는 예외적인 일을 해야하고 state는 깔끔하지만 코드를 조금 더 써야 한다.

- ref는 편하게 요소에 접근할 수 있기 때문에 적용한다.

 

 

 

제어되는 컴포넌트와 제어되지 않는 컴포넌트

- ref로 접근하게 된다면 제어되지 않는 컴포넌트가 된다. 이는 리액트에 의해 작동하지 않는다는 뜻이다.

- 폼 컴포넌트는 기본적으로 브라우저에 의해 내부 state를 가진다.

- 리액트 앱에서 폼 컴포넌트를 작업할 때 state를 연결하게 된다.

- 이것이 제어된 컴포넌트 방식이다. 내부 state가 리액트로 인해 제어되기 때문이다.