[Solid] Syntax | 04. Control Flow

JSX에서는 자바스크립트를 사용해 control flow를 제어할 수 있습니다.

 

그러나 Solid와 같은 가상 DOM을 사용하지 않는 반응형 라이브러리의 경우,

 

control flow를 업데이트할 때마다 모든 DOM 요소들을 버리고 새로 생성해야 하는 부담이 생기게 됩니다.

 

때문에 Solid에서는 헬퍼를 컴포넌트 형태로 사용하여 control flow를 제어합니다.

1. Show

if - else 문에 해당됩니다. when에서 조건(condition)을 받은 뒤, 참이면 태그 안 내용(return_elem_true)을 반환하고 거짓이면 fallback 안 내용(return_elem_false)을 호출합니다.

import { Show } from 'solid-js';

<Show when={ condition } fallback={ return_elem_false }>
  return_elem_true
</Show>

2. For

For 문에 해당됩니다. each에서 배열(array)을 받고, 매 반복마다 요소(iterator)와 색인(index)을 입력값으로 받는 함수를 실행합니다. 이 때 색인은 숫자가 아닌 signal이기 때문에, index()의 형식으로 호출해줘야 합니다.

import { For } from 'solid-js';

<For each={ array() }>{(iterator, index) =>
	// iteration : call as iterator, index()
}</For>

3. Index

For과 동일한 기능을 수행합니다. 단, 요소를 signal로 받고 색인을 숫자로 받습니다.

import { Index } from 'solid-js';

<Index each={ array() }>{(iterator, index) =>
	// iteration : call as iterator(), index
}</For>

4. Switch

switch/case 문에 해당됩니다. 각 조건(cond)을 비교해서 조건식이 true인 첫 번째 항목을 렌더링하며, 모두 매칭되지 않을 경우 fallback(default)을 렌더링합니다.

import { Switch, Match } from "solid-js";

<Switch fallback={ default }>
  <Match when={ cond1 }>
    return1
  </Match>
  <Match when={ cond2 }>
    return2
  </Match>
</Switch>

5. Dynamic

Native element의 문자열이나 컴포넌트 함수를 전달할 때 사용됩니다.

import { Dynamic } from "solid-js/web";

<Dynamic component={ comp } />

6. Portal

선택한 위치에 자식 요소가 추가됩니다. Portal 태그는 선언한 곳이 아닌 document.body에서 <div> 태그로 별도 랜더링 됩니다. 때문에 팝업창이 잘리는 등 정상적인 플로우의 외부에서 요소를 삽입해야 할 때 사용됩니다.

import { Portal } from "solid-js/web";

<Portal>
  <div class="popup">
    <h1>Popup</h1>
    <p>Some text you might need for something or other.</p>
  </div>
</Portal>

7. ErrorBoundary

 자식 컴포넌트(Component_error)에서 발생하는 에러를 발견하여 기록하고, 충돌이 발생한 컴포넌트 대신 fallback UI (func_error_Callback)를 표시합니다.

import { ErrorBoundary } from "solid-js";

<ErrorBoundary fallback={ func_error_Callback }>
  // <Component_error>
</ErrorBoundary>