react ( Udemy강의 ) - 2. Fragments, Portals & Refs ( Toolbox )

1. Fragments

JSX의 한계

     1. 루트 JSX 요소는 1개 ( 자바스크립트에서는 둘 이상 반환 x )

return ( 
	React.createElement('h2', {}, 'Hi there!')
	React.createElement('p', {}, 'This does not work :-(')
);

// this also isn't valid JavaScript

+ 네이티브 자바스크립트 배열 사용! -> 리스트반환이므로 key가 필요 -> key작성 귀찮...

* 리스트를 매핑 시 key를 원함 *

 

+ 불필요한 div 또는 기타 요소가 많이 존재

 

해결방안 - Fragment의 원리!

// Wrapper 컴포넌트 사용

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

-> 리액트에 존재

return (
	<React.Fragment>
		<h2>Hi there!</h2>
	</React.Fragment>
}

return (
	<>
		<h2>Hi there!</h2>
 	</>
}

import { Fragment } from 'react';

return (
	<Fragment>
		<h2>Hi there!</h2>
	</Fragment>
}

2. Portals

     - 오버레이 내용이 있는 모달이 깊게 중첩되면 안되는 문제를 해결하기 위해 사용

     - 구조 유지, 데이터를 전달하거나 할 때 마찰이 없도록 

 

     - 1. 컴포넌트를 이동시킬 장소 필요

     - 2. 컴포넌트에게 그 곳에 포털을 가져야 한다고 알려줄 필요

import ReactDOM from 'react-dom';

{ ReactDOM.createPortal( JSX요소 , 포인터 ) }

핵심 : JSX내에서 렌더링된 HRML 내용을 다른 곳으로 옮기는 것!

3. Refs

     - 다른 DOM요소에 접근해서 그것들로 작업할 수 있게 해줌

     - ref값은 항상 객체

     - 요소에 저장된 값에 접근 / state 대신o

     - DOM을 조작 x

const inputRef = useRef();

return (
	<input ref={inputRef} />
)

// 예외적으로 값 초기화시 DOM 설정
inputRef.current.value = '';
// 바람직X = 바닐라로만 DOM 조정하지마라 -> 리액트로만 DOM조정

     - ref를 사용하여 DOM 요소, 특히 입력 요소와 상호작용하는 이 방법은 제어되지 않는 컴포넌트! 이다

       ( input의 state를 내가 제어하지 않기 때문에 제어되지 않는 컴포넌트

         하지만 useState를 사용한다면 value값을 state로 (리액트가) 제어하기에 제어되는 컴포넌트 ) 

state vs ref

     state : 키 로그 기록용으로 사용하는 건 x -> 불필요한 코드 및 작업

              즉각적인 적용시

     ref : 값만 읽고 싶을 때, 아무것도 바꿀 계획이 없다면

              제출시에 적용시