아카이브

※ Signal과 Store를 살펴보고 오면 도움이 됩니다. SolidJS는 기본적으로 반응형 Signal을 사용하지만,때로는 Signal을 불변값(immutable)으로 다루는 것이 더 편리할 수 있습니다.produce() 함수는 Signal이나 Store를 불변성으로 다루기 위해 사용됩니다.불변성(Immutability) 프로그램을 실행하는데 있어 어떤 값들은 변경되면 치명적인 영향을 끼치는 경우도 있습니다. 때문에 다른 사람들과 협업할 때 함부로 값을 바꾸지 못하게 할 필요가 있으며, 이때 불변성을 통해 값이 변경될 수 없도록 보호할 수 있습니다. 불변 객체는 내부 상태를 제공하는 메소드를 제공하지 않거나, 방어적 복사(defensive-copy)를 통해서만 제공합니다. 대표적인 불변 객체의 예로 ..

VScode 기준으로 설명하겠습니다.node.js가 필요합니다. 자세한 설명은 공식 홈페이지에서 확인할 수 있습니다.여기서는 Vite라는 프로그램의 템플릿을 이용해 Solid를 설치하는 법을 설명해줍니다.https://www.solidjs.com/guides/getting-started https://www.solidjs.com/guides/getting-started www.solidjs.com1. 패키지 초기화 & 생성프로젝트를 시작하고자하는 경로로 들어가 아래 명령어를 실행합니다.이는 my-app이라는 이름의 solidjs 템플릿을 생성하는 명령어입니다.// JavaScript를 사용할 때npx degit solidjs/templates/js my-app// TypeScript를 사용할 때 npx ..

반응형 웹에서는 하나 이상의 Signal들을 동시에 고려해야 하는 중첩된 반응성을 다뤄야 하는 경우가 있습니다. 예를 들어 작업 목록에서 각 작업의 완료 여부를 확인하고자 할 때,     1) 작업 목록 Signal     2) 작업 완료 여부 Signal이 두 가지 반응성을 함께 고려해야 합니다.아래는 두 가지 Signal(todos, completed)를 사용해서 이 상황을 구현한 코드입니다. toggleTodo( )는 각 작업 항목에서 호출되는 함수이므로, 크게 todos라는 리스트 signal이 있고 다수의 completed signal들이 있다고 볼 수 있겠습니다. 이 두 가지 signal들을 이용해서 toggleTodo( ) 함수는 작업 항목의 완료 여부를 체크합니다. // Signal 1 ..

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"..

Solid는 DOM의 요소들을 참조변수로 받을 수 있습니다.const myDiv = My Element;그러나 이 경우 DOM을 구성할 때 각 요소들을 따로따로 구현한 뒤 이들을 모아 조합합니다. 이 방법은 각 참조 변수들을 호출해야 하기 때문에 가독성을 해칠 수 있습니다. Solid의 ref 속성을 사용하면, 각 요소에 대한 참조를 바로 얻을 수 있습니다. ref를 사용하면 해당 요소가 문서의 DOM에 첨부되기 전에 할당이 발생합니다.let myDiv;My Elementref를 사용하고자 하는 컴포넌트가 다른 파일에 있을 때는 ref로 참조를 전달하기 어려울 수 있습니다. 이 때는 props.ref의 형태로 참조를 전달할 수 있습니다.// *** App.js *** //import { render } ..

Solid는 class를 사용해 엘리먼트의 className을 설정할 수 있습니다.const [current, setCurrent] = createSignal('bar');// current signal값이 foo라면 class='selected'로 설정합니다. setCurrent('foo')}>foo여기서 class 대신 classList를 사용하면 조건문을 좀 더 편리하게 작성할 수 있습니다.classList는 {class이름 : 조건} 형식의 객체입니다.조건이 참이면 class이름을 반환하고, 거짓이면 삭제됩니다.const [current, setCurrent] = createSignal('bar');// current signal의 값이 'foo'이면 className='selected'가 됩니다..

onMount & onCleanup은 컴포넌트가 생성 & 소멸할 때 한 번 호출되는 특별한 effect 호출입니다.1. onMount()아래는 photos signal에 저장된 이미지 파일들을 For 컴포넌트를 이용해 하나씩 불러오는 코드입니다.import { render } from "solid-js/web";import { createSignal, onMount, For } from "solid-js";import "./styles.css";function App() { const [photos, setPhotos] = createSignal([]); // 각 이미지파일들을 비동기적으로 불러와 photos signal 배열에 추가합니다. const fetchPhotos = async () =>..

JSX에서는 자바스크립트를 사용해 control flow를 제어할 수 있습니다. 그러나 Solid와 같은 가상 DOM을 사용하지 않는 반응형 라이브러리의 경우, control flow를 업데이트할 때마다 모든 DOM 요소들을 버리고 새로 생성해야 하는 부담이 생기게 됩니다. 때문에 Solid에서는 헬퍼를 컴포넌트 형태로 사용하여 control flow를 제어합니다.1. Showif - else 문에 해당됩니다. when에서 조건(condition)을 받은 뒤, 참이면 태그 안 내용(return_elem_true)을 반환하고 거짓이면 fallback 안 내용(return_elem_false)을 호출합니다.import { Show } from 'solid-js'; return_elem_true2. ForF..