@koranidro/react-stateless v0.2.1

@koranidro/react-stateless

1. 설치

npm install @koranidro/react-stateless

2. 용도 및 사용법

2-1. useComparisonThroughOldAndNew

이전 값을 저장하여 새로운 값과 비교한 결과를 반환합니다. 일치하면 true, 그렇지 않으면 false입니다.

사용법은 아래와 같습니다.

import { useComparisonThroughOldAndNew } from "@koranidro/react-stateless";

function Component() {
	const [ state, setState ] = useState(5);
	const hit = useComparisonThroughOldAndNew(
		(oldValue, newValue) => oldValue === newValue,
		state
	);
}

또는

const { useComparisonThroughOldAndNew } = require("@koranidro/react-stateless");

function Component() {
	const [ state, setState ] = useState(5);
	const hit = useComparisonThroughOldAndNew(
		(oldValue, newValue) => oldValue === newValue,
		state
	);
}

2-2. useRefEx

useRef 의 확장으로 팩토리 함수를 통해 초기화할 수 있습니다.

사용법은 아래와 같습니다.

import { useRefEx } from "@koranidro/react-stateless";

function Component() {
	const ref = useRefEx(() => 5);
}

또는

const { useRefEx } = require("@koranidro/react-stateless");

function Component() {
	const ref = useRefEx(() => 5);
}

2-3. useThroughDerivation

오너 컴포넌트와 동일한 생명주기를 갖는 파생 상태를 사용합니다.

사용법은 아래와 같습니다.

import { useThroughDerivation } from "@koranidro/react-stateless";

function Component() {
	const [ state, setState ] = useState();
	const derivedState = useThroughDerivation(
		(...deps) => { /* 초기화 구문 */ },
		deps
	);
}

또는

const { useThroughDerivation } = require("@koranidro/react-stateless");

function Component() {
	const [ state, setState ] = useState();
	const derivedState = useThroughDerivation(
		(...deps) => { /* 초기화 구문 */ },
		deps
	);
}

2-4. Fulfilled

Suspense 컴포넌트 내부에서 promise의 결과를 표시하기 위해 사용합니다.

사용법은 아래와 같습니다.

import { Fulfilled } from "@koranidro/react-stateless";

function Component() {
	return (
		<Suspense>
			<Fulfilled promise={promise}/>
		</Suspense>
	);
}

또는

const { Fulfilled } = require("@koranidro/react-stateless");

function Component() {
	return (
		<Suspense>
			<Fulfilled promise={promise}/>
		</Suspense>
	);
}

2-5. withoutMountOverwriting, useSideEffectWithoutMountOverwriting

마운트가 연속적으로 발생할 경우, useEffect에 가장 최근 등록된 콜백만 여러 번 호출되는 현상을 해결합니다. 모든 콜백을 공정하게 호출하여 동작이 예상 가능하도록 만듭니다.

이 현상은 18 버전에 추가된 StrictMode 의 '더블 렌더링 시뮬레이션' 기능에서 확인됩니다. 그러나 해당 기능이 단순히 시뮬레이션인 이상, 이 외의 환경에서도 동일한 현상이 발생할 수 있음을 의미합니다.

사용법은 아래와 같습니다.

import { withoutMountOverwriting } from "@koranidro/react-stateless";

const useEffectWithoutMountOverwriting = withoutMountOverwriting(useEffect);

function Component() {
	useEffectWithoutMountOverwriting(() => {
		// 사이드 이펙트 구문
		return () => { /* 정리 구문 */ };
	}, []);
}

또는

const { withoutMountOverwriting } = require("@koranidro/react-stateless");

const useEffectWithoutMountOverwriting = withoutMountOverwriting(useEffect);

function Component() {
	useEffectWithoutMountOverwriting(() => {
		// 사이드 이펙트 구문
		return () => { /* 정리 구문 */ };
	}, []);
}

아래와 같이 미리 선언된 함수를 사용할 수도 있습니다.

미리 선언된 함수는 아래와 같습니다. 1. useInsertionEffectWithoutMountOverwriting 2. useLayoutEffectWithoutMountOverwriting 3. useEffectWithoutMountOverwriting

import { useEffectWithoutMountOverwriting } from "@koranidro/react-stateless";

function Component() {
	useEffectWithoutMountOverwriting(() => {
		// 부수 효과과 구문
		return () => { /* 정리 구문 */ };
	}, []);
}

또는

const { useEffectWithoutMountOverwriting } = require("@koranidro/react-stateless");

function Component() {
	useEffectWithoutMountOverwriting(() => {
		// 부수 효과 구문
		return () => { /* 정리 구문 */ };
	}, []);
}

2-6. useThenCleanup

생명주기가 종료되거나 값이 변경되면 이전 값을 안전하게 정리합니다. 기본적으로 정리 함수를 필요로 하지만 Disposable 또는 AsyncDisposable 유형인 경우엔 별도로 필요치 않습니다.

사용법은 아래와 같습니다.

import { useThenCleanup } from "@koranidro/react-stateless";

function Component() {
	const [ state, setState ] = useState();
	const safeState = useThenCleanup(
		state,
		(state) => { /* 정리 구문 */ }
	);
}

또는

const { useThenCleanup } = require("@koranidro/react-stateless");

function Component() {
	const [ state, setState ] = useState();
	const safeState = useThenCleanup(
		state,
		(state) => { /* 정리 구문 */ }
	);
}