ReactNative 리액트네이티브 : useState Hook으로 상태값 관리하기 (feat. 구조분해할당)

 

 

리액트네이티브와 리액트에서 상태 값을 관리하는 방법으로 useState를 사용할 수 있다

import React, {useState} from 'react';

function App() {
const [value, setValue] = useState('');

return (
...
)

}

 

useState는 구조분해할당(=비구조화 할당) 문법을 사용한다.

 

const number = ['one', 'two', 'three']

 

const one = number[0];

const two = number[1];

const three = number[2];

 

이렇게도 가능하지만, 구조 분해 할당을 통해 더 쉽게 작성이 가능하다

 

const [one, two, three] = number

 

이 같은 방법으로 useState도 첫 번째 원소에는 상태 값, 두 번째 원소에는 상태 값을 업데이트하는 함수가 들어있다.

useState값에는 숫자, 객체, 배열, 문자, boolean을 넣어도 가능하다.

 

 

 

만약 버튼을 클릭했을 때 특정 컴포넌트를 보여주는 상태 값을 관리하고 싶다면?

...

function ButtonBox() {

const [visible, setVisible] = useState(false);

const onPress = () => {
	setVisible((prev) => !prev);
}

return (
<>
<Button title='누르면 상태값 바뀜' onPress={onPress} />
{ visible && <Box color="red" size="large" /> }
</>
)

}

 

리액트 네이티브에선 onClick대신 onPress속성을 이용한다.

onPress일 경우, 함수를 통해 setVisible의 값을 받아서 그와 반대의 값을 넣어준다 (false면 true, true면 false)

 

* 여기서 단순히 setVisible(!visible)로 작성이 가능하지만, 연속으로 여러 번 누를 경우 에러가 날 수도 있다는 얘기를..

어디선가 주워 들었다

그 이후론 조금 더 안전한 방법인 setValue((prev) => !prev); 형식으로 사용하고 있다.

 

아무튼, 원래 false였던 visible의 값이 onPress 함수를 거치면서 true로 바뀌었다.

그리고 밑의 조건문에서 visible이 true일 경우엔 large 사이즈의 red 색상 박스를 화면에 나타낸다.