React 07

Fragment, Portals, Refs => 더 많은 문제를 도와주는 리액트 도구들

리액트에서는 일반적으로 JSX에서는 루트JSX요소는 1개여야 한다.
1개의 값만 반환, 반드시 div일 필요없고 어떤 요소를 사용해도 가능, 사용자가 정의한 컴포넌트도 사용할 수 있다. 반환하거나 상수에 저장하는 값은 하나여야만 한다

(x)

return (
	<h2>안녕</h2>
    <p>나는 바보입니다</p>
);

(o)

return (
	<div>
      <h2>안녕</h2>
      <p>난될놈이야</p>
    </div>
);

div Soup

  <div>
    <div>
      <div>
        <div>
          <h2>이것이 div Soup 예시</h2>
        </div>
      </div>
    </div>
  </div>

Fragment

Fragment 빈 wrapper를 렌더링한다. 내코드에서 직접적으로 반환하지 않는다,
실제 html요소를 DOM에 렌더링 하지 않는다

return (
	<Fragment>
    	<h2>난될놈이야>
	</Fragment>
)

return (
	<>
      <h2>난될놈이야</h2>
    </>
)

Portals

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다.

ReactDOM.createPortal(child, container)

2개의 인수를 취한다, HTML코드에 둘러쌓여있지않다.

Ref

마지막에 렌더링되는 HTML요소들과 다른 자바스크립트 코드의 연결
리액트 훅과 마찬가지로 함수형 컴포넌트에서만 사용가능
내장프롭이고, 어떤 HTML요소에도 추가 할 수 있다.
값만 읽고 싶을때는 state말고 ref 사용

React.createRef() 으로 생성

css 추가할때

.main-image 처럼 -가있는 css클래스이므로 점 표기법은 사용할 수 없다.

<div className={classes['main-image']}>