개발은 하는건가..

ReactNative / JS study misc. 본문

React-Native

ReactNative / JS study misc.

수동애비 2022. 5. 27. 14:49
반응형

# Object 복제 관련

let obj = { field: 1}

// newObj 는 참조형 인스턴스가 되므로 obj.field 값도 같이 변경된다.
let newObj = obj
newObj.field = 10

// 새로운 인스턴스를 생성하고 모든 필드값이 복제된다. (... 은 전개 연산자)
let newObj = {...person}

# [Hook] useEffect

import { useState, useEffect} from 'react'

export const useClock = () => {
	// const [대상변수, set함수(대상변수타입)] = useState(초기값)
    // 대상변수는 초기값을 가지고 시작되며 set함수를 호출하여 새값 전달 시 view를 갱신
    
    const [time, setTime] = useState(new Date())
    
    // useEffect(함수, [의존자..])
    // 기본적으로 함수가 최소 1회 호출되며 [의존자] 들의 값이 변경될 때마다 호출된다.
    useEffect(() => {
        const id = setInterval(() => {
            setTime(new Date())
        }, 4000)

        return () => clearInterval(id)	// return 으로 반환되는 함수는 컴포넌트가 소멸 시 호출됨.
    }, [])

    return time    
}

# [Hook] useMemo

// 반환값1 = useMemo(함수1, [의존자..]) 
// 함수1 에서 반환된 값이 반환값1로 반환되며 의존자값들이 변경 시 함수1이 호출되며 뷰가 갱신된다.

const dataArray = useMemo(() => D.makeArray(100).map(getRandom()), [])

# [Hook] useState

// const [대상변수1, set함수(대상타입)] = useState<대상타입>(초기상태값)

const [targetVar, setValue] = useState<number>(0)

// targetVar 는 처음 0 값을 가지게되며 setValue(10) 을 통해 10으로 값이 변경되고 view 를 갱신한다.
setValue(10)

'React-Native' 카테고리의 다른 글

typescript 정리  (0) 2022.05.27
React-Native 개발용 추가 패키지  (0) 2022.05.23
JS 연산자 및 표현식 정리  (0) 2022.05.23
React-Native 개발환경 구성 windows  (0) 2022.05.17
Comments