on( )과 untrack( )은 특정 Signal또는 Store의 반응성을 제어하는데 사용하는 함수이며, 서로 반대의 기능을 수행합니다.아래의 두 가지 예제는 Increment A 버튼을 누르면 변경된 A, B값이 출력되지만 Increment B 버튼을 누르면 변경된 값이 출력되지 않는 코드 입니다.1. on()특정 Signal & Store가 변경될 때의 반응성을 설정합니다. 모든 Signal & Store 에 대해 반응하는 effect와 달리, on은 특정 값에 대해서만 반응성을 설정한다는 차이가 있습니다. on( ) 함수는 첫 번째 인자로 Signal & Store를 받으며, 두 번째 인자로 신호가 변경될 때 실행할 함수를 받습니다. 추가로 on은 defer 옵션을 제공하는데, 이를 사용하면 계산..

한 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용합니다. 하지만 props는 자신 바로 위 컴포넌트의 값만 전달 받을 수 있다는 제약이 있어, 한 단계 더 위의 컴포넌트로부터 값을 받으려면 중간 컴포넌트가 props을 전달해주어야 합니다. 이때문에 컴포넌트 계층이 길어질수록 중간 컴포넌트들은 자신은 사용하지도 않는 props를 받아야 하는 문제가 있습니다.Context API를 사용한다면, props의 명시 없이도 자손 컴포넌트들에게 props를 전달해줄 수 있습니다. Context API에는 크게 두 가지 함수가 있습니다. createContext( ) : context 객체를 생성하여 반환합니다.useContext(context) : context 객체를 사용하여 provider ..

※ 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'가 됩니다..