Hooks - useState 이용

1. 개념정리 

(1)Hooks란? 

본래 함수형 컴포넌트에서는 불가능 했던, 상태관리나 주기관리를 할 수 있도록 도와주는 것 

(2)useState란? 

Hooks의 한 종류로서 

함수형 컴포넌트의 상태를 가변적으로 관리할 수 있도록 해준다.  

a. 형태 

// import로 장착 필요
import {useState} from "react";

// 사용
const [value,setValue] = useState(초기값)

b. 특징

-useState()는 배열로서 첫 번째 원소에는 value를 두 번째 원소에는 value를 바꿀 수 있는 함수 setValue가 들어있다. 

-useState()는 Boolean, String, number 형 변수 모두 사용 가능하다. 

- View 안에서 setValue 사용법은 다음과 같다.

ㄱ.setValue()의 ()안에 바꿔줄 값을 넣으면 value가 해당 값으로 바뀐다.

 ㄴ. 만약 OnChange 형제들 안에 setValue를 쓸 경우! 

OnChangeText = {(v)=> {setValue(v)}}

onChangeText = {setValue}

// 둘은 같은 말이다. 
// onChangeText에서 받은 v 값을 setValue가 자동으로 인자로 받는다.

2번째 표현과 같이 간결하게 쓸 수 있음을 기억해두자!

이유는 setValue 자체가 " (v) => 자신의 기능" 의 형태를 가지고 있기 때문이다.

(3) 구조 분해 문법

//구조 분해 문법
//arr 라는 변수에 배열 데이터를 받아보겠음. 
 const arr = [1,2,3]

// arr의 원소에 접근
const first = arr[0]
const second = arr[1]
const third = arr[2]

// 위 접근을 한 문장으로 줄일 수 있음 (구조 분해 문법)
const [first,second,third] = arr
// 이건 first, second, third 각각의 변수가 만들어진 것으로 위와 똑같은 코드다. 
// 일일히 접근하는 방법과 구조 분해 문법 둘 다 쓰면 에러

(4) import, export의 원리

react에서 하나의 모듈안에 모든 코드를 다 적을 수 없다. 따라서 코드를 기능별로 파일에 나누어 적어놓고, 

필요한 기능을 가진 모듈을 수입해서 사용하는 방식을 채택했다. (모듈이란 하나의 기능을 하는 JS 코드 덩어리다.)

 

a. import

필요한 모듈을 수입해오는 Keyword이다. 

import {가져올 모듈의 이름} from "경로"

b. export

어떤 모듈을 다 만든 후에 그 모듈을 다른 곳에서도 사용할 수 있도록 내보내는 Keyword이다. 

// 1. 코드 다 쓴 후 맨 마지막에 적는 방법
export{익스포트할 함수나 클래스 이름};

// 2. export 할 함수, 변수, 클래스 앞 대가리에 적는 방법
export default function App(){
	//...
}
	// 이러면 해당 App이란 함수가 export 됨.
    
// 3. default라는 키워드랑 같이 쓰기. 해당 경우 {}를 더 이상 쓰지 않아도 된다.

export default 함수,클래스이름;

// 4. 지금 export하려는 함수나 변수 클래스에 as를 통해 별칭을 붙일 수 도 있다. 
export { page404 as ErrorPage };

(5) 기타 속성들 

a. Switch 태그에서 onValueChange = {v => {}} 는 v라는 인자에, Switch가 On 될 때는 true 넣고, 안될 때는 false를 넣어 {}의 동작이 실행되게 한다.

onChange~~ = {(v) => {}}

- onChange 형제들은 모두 v 안에 사용자가 어떤 행위를 해서 바뀐 값들이 들어가게 된다.

 

b. Button 태그에서 OnPress {() => {}}는 눌렀을 때 안의 람다식이 실행되게 한다. 

2. 코드 리뷰 

export default function App() {
  return (
    <View style={styles.container}>
	// 해당 컴포넌트를 수입해서 사용 
    <StateWithFuctionalComponent/>

    </View>
  );
}

import React, { useState } from "react";
import { View, Text, Button, Switch, TextInput } from "react-native";

const Component = () => {
  const [count, setCount] = useState(0); // number
  const [isOn, setIsOn] = useState(false);
  const [name, setName] = useState("");

  return (
    <View>
      <Text>You clicked {count} times</Text> 
      <Button title="Click me" onPress={() => setCount(count + 1)} />
      {/*onPress 는 누를 때 동작하는 친구 */}
      <Text>--------</Text>
      <Switch
        value={isOn}

        //스위치 값이 바뀌었을 때를 인식하는 변수 
        onValueChange = {v => {
            console.log('v',v);
            setIsOn(v);
        }}
        />

      <Text>--------</Text>
      {/*name이란 변수 안의 값을 받아야 하니까 {} 템플릿 사용*/}
      <TextInput
        value={name}
        onChangeText={v => {
          console.log('v',v);
          setName(v);
        }}
        style={{backgroundColor: 'pink'}}
      />
    </View>
  );
};

export default Component;

3. 스스로 해보기 

import React, { useState } from "react";
import { View, Text, Button, Switch, TextInput } from "react-native";

const Component = () => {
  const [count,setCount] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const [value, setValue] =useState("");

  return (
    <View>
      <Text>You Clicked {count} times! </Text>
      <Button title="Click Me!" onPress={() => {setCount(count+1)}}/>

      <Text>---------------------------------</Text>

      <Switch
        value={isOn}
        onValueChange={(v) =>{
          console.log(v);
          setIsOn(v);

        }}
      />

      <Text>---------------------------------</Text>

      <TextInput
        placeholder="원하는 값을 입력하세요."
        value ={value}
        onChangeText = { (v) => {
          console.log('v', v);
          setValue(v);
        }}
      />

    </View>
  )

}

export default Component;