[Solid] Syntax | 08. props

Solid도 React와 같이 컴포넌트에게 prop의 형태로 속성값을 넘겨줄 수 있습니다.

추가로 prop과 관련해서 몇 가지 도움이 될 만한 함수들도 제공하는데,

대표적으로 mergeProp( ), splitProp( ), 그리고 children( )이 있습니다.

1. mergeProp( )

주로 prop의 디폴트값을 지정할 때 사용합니다. 디폴트값의 경우 {prop이름 : 값}의 형태로 받습니다.

props에서 값을 받지 않을 때는 이 디폴트값을 사용하지만, props의 값이 존재한다면 반응성을 유지합니다.

function Greeting(props) {
  // greeting의 디폴트값은 Hi, name의 디폴트값은 John입니다.
  const merged = mergeProps({ greeting: "Hi", name: "John" }, props);
  
  // 만약 props에 greeting이나 name값이 전달되었다면, 그 값을 사용합니다.
  // 그렇지 않다면 "Hi"나 "John"을 사용합니다.
  return <h3>{merged.greeting} {merged.name}</h3>
}

2. splitProp( )

현재 컴포넌트에서 자식 컴포넌트로 일부 props를 전달하고자 할 때 사용할 수 있습니다.

입력값은 props 객체와 추출하려는 하나 이상의 키 배열입니다.

반환값은 두 가지로, 지정한 props 배열과 지정하지 않은 props 배열입니다.

function Greeting(props) {
  // props로부터 greeting과 name prop을 분리합니다.
  const [local, others] = splitProps(props, ["greeting", "name"]);
  
  // greeting과 name을 출력하고, 나머지 props는 그대로 <h3>요소에게 전달합니다.
  return <h3 {...others}>{local.greeting} {local.name}</h3>
}

3. children( )

children prop에 대한 memo를 생성합니다.

import { render } from "solid-js/web";
import { createSignal, For } from "solid-js";

function ColoredList(props) { // props = {color : color()}
  // children prop에 대한 memo를 생성합니다.
  const c = children(() => props.children); // c = <div>{item}</div>
  createEffect(() => c().forEach(item => item.style.color = props.color));
  return <>{c()}</>
}

function App() {
  const [color, setColor] = createSignal("purple");

  return <>
    <ColoredList color={color()}>
      // 동적 리스트가 children prop으로 전달됩니다.
      <For each={["Most", "Interesting", "Thing"]}>{item => <div>{item}</div>}</For>
    </ColoredList>
    // 버튼을 누르면 색을 바꿉니다.
    <button onClick={() => setColor("teal")}>Set Color</button>
  </>;
}

render(() => <App />, document.getElementById('app'));