푸딩 8일차

Profile Page

1. InputText Border 색상

• onFocus와 onBlur를 사용해 초점의 상태에 따라 스타일을 다르게 주어 색상을 변경한다.

1-1. onFocus & onBlur

onFocus

• TextInput의 초점이 맞춰질 때 호출된다.

onBlur

• TextInput의 초점을 잃을 때 호출된다.

  const [focus, setFocus] = useState(false)
  const handleFocus = () => {
    setFocus(!focus)
  }

  return (
    <View style={focus ? styles.nickNameFocus : styles.nickNameUnFocus}>
      <TextInput onFocus={handleFocus} onBlur={handleFocus} />
    </View>
  )

2. Helper Text

• helper text는 InputText 밑에 작성되는 텍스트이다. 말 그대로 설명해주고 도움을 주는 텍스트
• textOverLap과 textEssential의 true/false에 따라서 삼항연산자를 이용해 화면에 출력하거나 숨긴다.
• 다음 버튼을 클릭했을 때와 clear버튼을 클릭했을 때 textOverLap과 textEssential의 true/false를 설정한다. 다음 버튼을 클릭했을 때는 데이터 중에서 중복되는 닉네임이 있는지 확인한 후 설정한다.

  const [textEssential, setTextEssential] = useState(false)
  const [textOverLap, setTextOverLap] = useState(false)
  const dummyData = [
    {
      name: 'user1',
      image: { uri: 'file:///data/user/0/com.foodingapp/cache/rn_image_picker_lib_temp_887eac67-10ed-41ea-8310-6caf7fd9731e.jpg' }
    },{
      name: 'user2',
      image: { uri: 'file:///data/user/0/com.foodingapp/cache/rn_image_picker_lib_temp_887eac67-10ed-41ea-8310-6caf7fd9731e.jpg' }
    }
  ]
  
  const handleAllClear = () => {
    setName('')
    setButtonDisabled(true)
    setProfileText(false)
    setTextEssential(true)
    setTextOverLap(false)
  }

  const handleNextButton = () => {
    dummyData.map((item) => { 
      if(item.name == name){
        setTextEssential(false)
        setTextOverLap(true)
      } 
    })
  }
  
  return(
    { textOverLap ? <Text style={styles.bottomText}>* 중복된 닉네임입니다.</Text> : null }
    { textEssential ? <Text style={styles.bottomText}>* 닉네임은 필수입니다.</Text> : null }
  )

3. 다음 버튼 활성화

3-1. onChange & onChangeText

• onChange를 이용해 text의 값이 있을 때 버튼을 활성화 시키고, 비었을 때에는 비활성화 시킨다.
• 입력한 value 값이 변경될 때 호출되는 onChange함수와 onChangeText함수가 있는데 아래와 같이 차이점이 있었다.

onChange

• nativeEvent을 출력해보면 세 개의 값을 반환한다. 반환값으로 eventCoun, target, text를 반환하는데 이 중에 input 데이터는 text에 저장된다.
• text에 값이 있으면 setButtonDisabled함수에 false를, 값이 없으면 true를 저장한다.
• 저장된 값은 버튼의 disabled를 통해 활성화 상태를 변경한다.

  const handleChange = (e) => {
    const { text } = e.nativeEvent
    if(text !== ''){
      setButtonDisabled(false)
    }
    if(text == ''){
      setButtonDisabled(true)
    }
  }
  
  return(
    <TextInput style={styles.nickNameInput} value={name} onChangeText={(text)=>setName(text)} onChange={(e)=>handleChange(e)} onFocus={handleFocus} onBlur={handleFocus} maxLength={10} />
   <Button title="다음" disabled={buttonDisabled}>
      <Text>다음</Text>
    </Button>
  )

onChangeText

• 반환값으로 text만 반환한다.

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

  return (
    <TextInput value={name} onChangeText={(text)=>setName(text)} />
  )

4. clear 버튼

• 다음 버튼의 활성화 상태에 따라서 clear 버튼의 화면 출력 상태도 달라진다.다음 버튼의 활성화 상태는 TextInput의 text의 여부에 따라 달라지기 때문에 다음 버튼의 활성화를 이용해 clear 버튼의 출력 상태를 설정한다.
• 버튼이 활성화가 되어있다면 clear 버튼이 화면에 출력되고 비활성화 되어있다면 화면에서 숨겨진다.

  const [buttonDisabled, setButtonDisabled] = useState(true)

  { buttonDisabled ? <View style={styles.buttonDis}></View> 
    : <Icon name='cancel' size={20} color='#dbdbdb' containerStyle={{paddingRight: 5}} 
            onPress={handleAllClear} />
  }