노마드코더 'React JS 마스터클래스'
React, Recoil, TypeScript
최신 node로 실행 불가능, nvm을 사용해서 node 16 으로 낮춰서 실행
- node 리스트 보기
nvm ls
- node 설치
nvm install [version]
- node 버전 변경
nvm use [version]
- node 삭제
nvm uninstall [version]
배열의 기존 요소를 삭제 또는 교체하거나 새 요소는 추가하는 메서드
var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 1);
console.log(removed); // ["mandarin"]
console.log(myFish); // ["angel", "clown", "sturgeon"]var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 1, "drum");
console.log(removed); // ["mandarin"]
console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]var myFish = ["angel", "clown", "mandarin", "sturgeon"];
var removed = myFish.splice(2, 0, "drum");
console.log(removed); // []
console.log(myFish); // ["angel", "clown", "drum", "mandarin", "sturgeon"]객체의 key 값들을 배열로 반환하는 메서드
const obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // ["0", "1", "2"]렌더링에 필요하지 않은 값을 참조할 수 있는 훅으로 값을 참조하거나 DOM을 조작하는데 사용됨
import { useRef } from "react";
export default function App() {
let ref = useRef(0);
function handleClick() {
ref.current = ref.current + 1;
alert("You clicked " + ref.current + " times!");
}
return <button onClick={handleClick}>Click me!</button>;
}import { useRef } from "react";
export default function App() {
const inputRef = useRef(null);
function handleClick() {
inputRef.current.focus();
}
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>Focus the input</button>
</>
);
}const fontSizeState = atom({
key: "fontSizeState",
default: 14,
});- key 값은 전역적으로 고유�� 값으로 설정
function FontButton() {
const [fontSize, setFontSize] = useRecoilState(fontSizeState);
return (
<button
onClick={() => setFontSize((size) => size + 1)}
style={{ fontSize }}
>
Click to Enlarge
</button>
);
}atom을 읽고 수정할때는useRecoilState()를 사용atom을 읽기만 할 때useRecoilValue()를 사용atom을 수정하기만 할 때useSetRecoilState()를 사용
const fontSizeLabelState = selector({
key: "fontSizeLabelState",
get: ({ get }) => {
const fontSize = get(fontSizeState);
const unit = "px";
return `${fontSize}${unit}`;
},
});get속성은 계산될 함수, 전달되는get인자를 통해atoms와 다른selectors에 접근할 수 있음
function FontButton() {
const [fontSize, setFontSize] = useRecoilState(fontSizeState);
const fontSizeLabel = useRecoilValue(fontSizeLabelState);
return (
<>
<div>Current font size: ${fontSizeLabel}</div>
<button onClick={setFontSize(fontSize + 1) style={fontSize}}>
Click to Enlarge
</button>
</>
)
}- 호출 방법 및 사용 방법은
atom과 비슷