useState

상태 설정하기 위해서 기존에는 클래스 컴포넌트를 사용해야 했지만 훅의 등장으로 함수형 컴포넌트에서도 상태를 가질 수 있다.

1. useState 사용하기

• 하나의 인자를 전달 받는 함수이다.

• 배열을 반환한다. (구조 분해 할당하여 사용하면 편하다.)

• 반환된 배열의 첫 번째 아이템은 상태(state), 두 번째 아이템은 상태를 업데이트 하는 함수이다.

useState()은 배열을 반환한다. 그렇기 때문에 바로 배열로 구조분해 할당하면 사용하기 편하다. 반환된 배열의 첫 번째 아이템은 상태(state), 두 번째 아이템은 상태를 업데이트 하는 함수이다.

const [상태, 상태를 업데이트하는 함수] = React.useState(initialValue)

상태를 업데이트 하는 함수는 일반적으로 set* 접두사를 붙여 사용한다.

하나의 상태(state)를 가지는 useState()를 사용했다.

const [headline, setHeadline] = React.useState('React Hook')
const [headlineLang, setHeadlineLang] = React.useState('en')

하지만 복잡한 객체 문법을 사용해서 여러 상태를 가지도록 할 수 있다.

const [headline, setHeadline] = React.useState({
    content: 'React Hook'
    lang: 'en' 
})

// 접근하기 
headline.content → 'React Hook'
headline.lang → 'en'

2. lazy initializer

useState의 초기 값을 일반적인 원시 데이터 값이 아닌 함수로 설정할 수 있다. 이때 유의해야 할 점은 함수 컴포넌트가 렌더링 될 때 사용하지 않는 함수도 실행이 된다는 점이다.

const initialState = calculateSomethingExpensive ( props ) 
const [ count , setCount ] = React.useState ( initialState )  

그래서 함수 컴포넌트 초기 생성 시, 단 한 번만 함수가 실행되도록 콜백 함수를 설정하는데 이를 지연된 초기화(lazy initializer)라고 한다.

const initialState = () => calculateSomethingExpensive ( props ) 
const [ count , setCount ] = React.useState ( initialState )  

정리하자면 컴포넌트가 렌더링 될 때마다 함수가 실행되어 성능에 영향을 주는 것을 방지하기 위해서 지연된 초기화(함수)를 사용한다. 이는 함수 컴포넌트 초기 생성 시 한 번만 실행된다.

2.1 참고

• useState 지연 초기화 및 함수 업데이트