1
/**
2
 * 클래스형 컴포넌트
3
 */
4
class FriendList extends React.Component {
5
  render() {
6
    return (
7
      <View>
8
        <Friend name="뭐시기1" />
9
        <Friend name="뭐시기2" />
10
        <Friend name="뭐시기3" />
11
        <Friend name="뭐시기4" />
12
        <Friend name="뭐시기5" />
13
        <Friend name="뭐시기6" />
14
      </View>
15
    )
16
  }
17
}

1
/**
2
 * 함수형 컴포넌트
3
 */
4
const Friend = props => {
5
  return <Text>{props.name}</Text>
6
}
7

8
export default () => {
9
  return (
10
    <View>
11
      <Friend name="뭐시기1" />
12
      <Friend name="뭐시기2" />
13
      <Friend name="뭐시기3" />
14
      <Friend name="뭐시기4" />
15
      <Friend name="뭐시기5" />
16
      <Friend name="뭐시기6" />
17
    </View>
18
  )
19
}

1
import React, { useState } from 'react'
2
import { View, Text, Button, Switch, TextInput } from 'react-native'
3

4
const Component = () => {
5
  const [count, setCount] = useState(0) // number
6
  const [isOn, setIsOn] = useState(false) // boolean
7
  const [name, setName] = useState('') // string
8

9
  return (
10
    <View>
11
      <Text>You clicked {count} times</Text>
12
      <Button title="Click me" onPress={() => setCount(count + 1)} />
13

14
      <Text>-------</Text>
15
      <Switch
16
        value={isOn}
17
        onValueChange={v => {
18
          console.log('v', v)
19
          setIsOn(v)
20
        }}
21
      />
22

23
      <Text>-------</Text>
24
      <TextInput
25
        value={name}
26
        onChangeText={v => {
27
          console.log('v', v)
28
          setName(v)
29
        }}
30
      />
31
    </View>
32
  )
33
}
34

35
export default Component

1
import React, { useEffect, useState } from 'react'
2
import { View, Text, Button, TextInput, Switch, ActivityIndicator } from 'react-native'
3

4
const Component = () => {
5
  const [count, setCount] = useState(0)
6
  const [isOn, setIsOn] = useState(true)
7
  const [input, setInput] = useState('')
8
  const [isRefresh, setIsRefresh] = useState(false)
9

10
  useEffect(() => {
11
    console.log('didMount')
12
  }, [])
13

14
  useEffect(() => {
15
    console.log('didUpdate - count', count)
16
  }, [count])
17

18
  useEffect(() => {
19
    console.log('didUpdate - isOn', isOn)
20
  }, [isOn])
21

22
  useEffect(() => {
23
    console.log('didUpdate - input', input)
24
  }, [input])
25

26
  useEffect(() => {
27
    // 2초 동안 true인 isRefresh를 유지하다 false로 변경
28
    if (isRefresh) {
29
      setTimeout(() => {
30
        setIsRefresh(false)
31
      }, 2000)
32
    }
33
  }, [isRefresh])
34

35
  return (
36
    <View style={{ alignItems: 'center' }}>
37
      <Text>You clicked {count} times</Text>
38
      <Button title="Click me" onPress={() => setCount(count + 1)} />
39

40
      <Text style={{ marginVertical: 15 }}>-------------------------------------------------</Text>
41
      <Switch value={isOn} onValueChange={setIsOn} />
42

43
      <Text style={{ marginVertical: 15 }}>-------------------------------------------------</Text>
44

45
      <Text>input: {input}</Text>
46
      <TextInput value={input} onChangeText={setInput} style={{ borderBottomWidth: 1, borderColor: 'grey' }} />
47

48
      <Text style={{ marginVertical: 15 }}>-------------------------------------------------</Text>
49
      <Button
50
        title="새로고침!"
51
        onPress={() => {
52
          setIsRefresh(true)
53
        }}
54
      />
55
      {isRefresh && <ActivityIndicator />}
56
    </View>
57
  )
58
}
59

60
export default Component

1
import React, { useState } from 'react'
2
import { Button, TextInput, View } from 'react-native'
3

4
const InputBox = props => {
5
  return (
6
    <View style={{ flexDirection: 'row' }}>
7
      <TextInput
8
        value={props.value}
9
        onChangeText={props.onChangeText}
10
        style={{ borderBottomWidth: 1, width: 200 }}
11
        placeholder={props.placeholder}
12
      />
13
      <Button title="초기화" onPress={props.onReset} />
14
    </View>
15
  )
16
}
17

18
const useInput = initialValue => {
19
  const [value, setValue] = useState(initialValue)
20

21
  const resetValue = () => setValue(initialValue)
22

23
  return {
24
    value,
25
    setValue,
26
    resetValue,
27
  }
28
}
29

30
const CustomHook = () => {
31
  const { value: name, setValue: setName, resetValue: resetName } = useInput('')
32
  const { value: age, setValue: setAge, resetValue: resetAge } = useInput('')
33
  const { value: city, setValue: setCity, resetValue: resetCity } = useInput('')
34

35
  return (
36
    <View>
37
      <InputBox value={name} onChangeText={setName} placeholder="이름을 입력해 주세요" onReset={resetName} />
38
      <InputBox value={age} onChangeText={setAge} placeholder="나이를 입력해 주세요" onReset={resetAge} />
39
      <InputBox value={city} onChangeText={setCity} placeholder="사는 곳을 입력해 주세요" onReset={resetCity} />
40
    </View>
41
  )
42
}
43

44
export default CustomHook