useState

alajillo·2021년 10월 6일
0

React

목록 보기
3/12
post-thumbnail

useState

useState는 prop-types와 다르게 react에 독립된 모듈이 아니다.

이를 증명하듯 GithubPage의 pakage.json 파일안에 dependencies에는 prop-types가 없다.

import * as react from 'react'
console.log(react)

//출력값
Children: {map: ƒ, forEach: ƒ, count: ƒ, toArray: ƒ, only: ƒ}
Component: ƒ Component(props, context, updater)
Fragment: Symbol(react.fragment)
Profiler: Symbol(react.profiler)
PureComponent: ƒ PureComponent(props, context, updater)
StrictMode: Symbol(react.strict_mode)
Suspense: Symbol(react.suspense)
cloneElement: ƒ cloneElementWithValidation(element, props, children)
createContext: ƒ createContext(defaultValue, calculateChangedBits)
createElement: ƒ createElementWithValidation(type, props, children)
createFactory: ƒ createFactoryWithValidation(type)
createRef: ƒ createRef()
forwardRef: ƒ forwardRef(render)
isValidElement: ƒ isValidElement(object)
lazy: ƒ lazy(ctor)
memo: ƒ memo(type, compare)
useCallback: ƒ useCallback(callback, deps)
useContext: ƒ useContext(Context, unstable_observedBits)
useDebugValue: ƒ useDebugValue(value, formatterFn)
useEffect: ƒ useEffect(create, deps)
useImperativeHandle: ƒ useImperativeHandle(ref, create, deps)
useLayoutEffect: ƒ useLayoutEffect(create, deps)
useMemo: ƒ useMemo(create, deps)
useReducer: ƒ useReducer(reducer, initialArg, init)
useRef: ƒ useRef(initialValue)
useState: ƒ useState(initialState)
version: "17.0.2"
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {ReactCurrentDispatcher: {}, ReactCurrentBatchConfig: {}, ReactCurrentOwner: {}, IsSomeRendererActing: {}, assign: ƒ,}
[[Prototype]]: Object


위에 코드에 보면 useState가 있고

import {useState} from 'react'
const state = useState(0) 
console.log(state) // [0, ƒ]
const [value, setValue] = useState(초기값)

구조분해할당을 통해 useState를 가져올수 있고 useState는 함수로 인자를 하나 받는다.

이때 인자는 상태값의 초기값이다. 그리고 이 함수를 실행하면 길이가 2 인 배열을 반환한다.

첫번째는 상태값, 두번째는 새로운 인자를 받아서 상태를 새로운 인자로 변환하는 함수가 들어있다.

<button onclick={setValue(value+ 1)}>{value}</button>

이런식으로 상태를 조작하는 함수와 그 값을 표현할수 있다.

함수의 경우에는 실행이 끝날 경우에는 안에 선언된 변수들도 같이 사라지지만 클로저를 이용하여 그 변수 즉 값을 참조하고 있는 경우에는 자바스크립트 가비지 컬렉터의 대상에서 제외되기 때문에 그 값을 계속해서 유지할수 있다.

원래 useState는 클래스를 이용하여 내부에서 this와 함께 사용해서 그 값을 참조했지만 좀더 편한 사용성을 위해서 화살표함수를 포함한 함수를 이용해서 this없이도 계속해서 참조를 할수 있다. 화살표함수의 경우에는 this가 없지만 값을 참조하는 주체가 react 내부 로직에 의해 참조되고 있기 때문에 문제가 없다.

이제 이 상태들을 props로 하위 컴포넌트에 전달을 하는 방식으로 각 컴포넌트들은 데이터의 일관성을 유지할수 있다.

상위 컴포넌트

const [count, setCount ] = useState(0)
<Counter onChange={(count)=>{
       setTotalCount(count)
     }}/>

하위 컴포넌트

const [count, setCount] = useState(0)

이런식으로 초기값을 동일하게 해서 상태를 일관되게 유지 할수도 있지만

상위 컴포넌트

const [count, setCount ] = useState(0)
<Counter onChange={(count)=>{
       setTotalCount(count)
			 initialState={count}
     }}/>

하위 컴포넌트

const [count, setCount] = useState(initialState)

와 같은 방식으로 초기값을 상위 컴포넌트에서 하위 컴포넌트로 전달해주는 것이 데이터 즉 상태의 일관성을 유지하는데 더 도움이 될 것 같다.

profile
Developer's High

0개의 댓글