함수형 React-native/using State

이 코드로 시작하겠습니다.

react-native cli와 초기 환경설정 세팅을 하시고 react-native init MyApp하면 코딩환경이 세팅 됩니다.

(자세한 것은 구글링...)

기본 코드

 

 

음... useState의 기본 사용법은 이겁니다. 예를들어 이름을 저장할 state를 마련한다고 생각해보겠습니다.

const [name,setName] = useState('');

const [사용할 변수명] = [] 이런 형태의 문법은 해체할당이라 합니다. 객체와 배열은 해체할당이 가능합니다. 그리고 React에서 자주 사용하니 꼭 익혀두셔야할 문법입니다.

name = 정보가 저장되는 변수입니다.

setName = 함수인데, name만을 조작하는 함수입니다. 이 함수를 통해서만 name을 조작할 수 있습니다.

useState(''); = 괄호 안에 name의 초깃값을 지정해 줍니다. 여기서는 비어있는 string이 초깃값입니다.

이 값을 조회하기 위해서는 jsx괄호에 name을 넣어 주시면 됩니다.

string을 조회하고 조작하는 일은 간단하니 바로 함수와 사용되는 모습을 보여드리겠습니다.

react-native run-android 를 통해서 현재 앱의 화면을 실시간으로 볼 수 있습니다.

Button을 react-native에서 불러왔습니다.

버튼에 onPress={}이벤트로 외부에 선언한 함수를 등록해 두었습니다. 괄호 내부에 함수자체를 넣는 것도 가능합니다.

화살표 함수도 익숙해지 매우 편한 것 같습니다.

생활코딩에서는 아직... 화살표함수를 사용하지는 않았던것 같습니다.

그리 어렵지 않으니 차근차근 따라하시면 됩니다.

버튼을 누르면 설정한 함수에 따라 값이 변합니다.