Solid.js
언제인가 임시 저장만 해두었던 글
Solid.js란?
- 인터랙티브 웹 애플리케이션을 만들기 위한 JS 프레임워크
- 기존 HTML 및 JS 지식을 사용해 앱 전체에서 재사용 가능한 컴포넌트 빌드 가능
Solid.js의 특징
- 선언적 데이터
- 사라지는 컴포넌트
- 읽기, 쓰기 분리
- 단순성
서버 렌더링
- 동적 서버 사이드 렌더링 솔루션 제공
- Resource 프리미티브 사용 시 비동기 데이터 요청 쉽게 생성 가능
상태 관리
const [count, setCount] = createSignal(0); 의 형태
React의 useState와 형태 자체는 비슷해 보이나 결과물이 함수라는 차이점 존재
즉 반환값이 값 자체가 아닌 getter(현재 값 반환 함수)이며, 이는 프레임워크가 시그널을 읽는 위치를 추적해서 그에 따라 업데이트하기 위함임
Effect
createEffect(() => {
console.log("The count is now", count());
});-
함수가 실행되는 동안 읽은 모든 시그널을 자동으로 구독하고, 시그널 변경 시 실행됨
-
createEffect를 사용해 만드는 이펙트는 렌더링이 완료된 후 실행되므로 DOM을 일찍 수정하려면
createRenderEffect사용 -
브라우저가 DOM을 렌더링하기 전에 실행시킬 함수는
queueMicrotask로 처리 가능
놀라운 점으로는, createEffect나 queueMicrotask는 컴포넌트 밖에서도 실행된다...
조건문
JSX 식의 삼항 연산자도 사용 가능하나 <Show> 컴포넌트를 지원함
<Show
when={loggedIn()}
fallback={() => <button onClick={toggle}>Log in</button>}
>
<button onClick={toggle}>Log out</button>
</Show>fallback prop는 when에 넘겨진 조건에 따라 값을 표시한다.
반복문
<For each={cats()}>{(cat, i) =>
<li>
<a target="_blank" href={`https://www.youtube.com/watch?v=${cat.id}`}>
{i() + 1}: {cat.name}
</a>
</li>
}</For>형태는 map과 유사. <For> 컴포넌트를 사용해 객체 배열에 대한 반복을 편하게 가능
each에 반복할 배열을 전달하고, <For>와 <For> 사이에 callback 전달
이때 인덱스는 상수가 아닌 Signal임을 유의
Switch / Match
<Switch fallback={<p>{x()} is between 5 and 10</p>}>
<Match when={x() > 10}>
<p>{x()} is greater than 10</p>
</Match>
<Match when={5 > x()}>
<p>{x()} is less than 5</p>
</Match>
</Switch>2개 이상의 조건문 처리를 위한 컴포넌트로 JS의 switch/case를 본떠 만듦
라이프사이클
onMount onCleanUp
ref
ref 속성을 사용하여 엘리먼트에 대한 레퍼런스 얻기 가능
let myDiv;
<div ref={myDiv}>My Element</div>React에서 useRef 따로 선언했던 것과 구분됨. 편해 보임
props
-
Props : JSX에 바인딩된 모든 속성을 나타내는, 컴포넌트 함수에 전달되는 객체
구조 분해 할당을 사용하면 반응성을 잃으므로 사용X, Solid에서는props.propName과 같은 형식으로 액세스 -
mergeProps를 사용하면 반응성을 잃지 않고 객체를 merge하는 것이 가능
const merged = mergeProps({ greeting: "Hi", name: "John" }, props);
return <h3>{merged.greeting} {merged.name}</h3>- props를 그룹으로 나누어 현재 컴포넌트에서 일부, 나머지는 자식 컴포넌트로 전달하고 싶을 때
splitProps사용 -> 이는 지정한 키 배열당 하나씩의 props 객체에 추가로 미지정 키들에 해당하는 props 객체
Context API
- Context API를 사용하려면
<App>컴포넌트를 래핑하여 전역적으로 제공
https://www.solidjs.com/tutorial/stores_context?solved
예제 참고가 조금 더 명확할 듯하다...
