[React-Native]To-Do-App 만들기(3)

in Study on react_native


이번엔 완료된 할 일은 체크된 아이콘으로, 완료되지 않은 아이콘은 체크되지 않은 아이콘으로 설정해보겠습니다.

App.js 수정하기

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.centered}>
            <Header/>
        </View>
        <View style={styles.inputContainer}>
          <SubTitle title="To-Do 입력"/>
          <Input/>
        </View>
        <View style={styles.todoContainer}>
          <SubTitle title="To-Do List"/>
          <TodoItem text="알바 가기" isComplete={true} />
          <TodoItem text="전화 하기" isComplete={false}/>
        </View>
      </View>
                
    )
  }
}

각 할일에 대한 완료 여부를 isComplete라는 속성을 추가해 나타내보겠습니다.

이를 이제 Todo.js에서 받아서 처리해보겠습니다.


Todo.js 수정하기

위에서 넘겨준 속성을 이용하겠습니다.

const TodoItem= ({text,isComplete}) => (
    <View style={styles.todoContainer}>
        <View>
            <View style={styles.objContainer}>
                <View style={styles.textContainer}>
                    <TouchableOpacity>  
                        <AntDesign name={isComplete?"checksquare":"checksquareo"} size={30} style={styles.check}/>
                    </TouchableOpacity>
                    <Text style={styles.todos}>{text}</Text>
                </View>
                <TouchableOpacity>  
                    <FontAwesome name="close" size={20}/>
                </TouchableOpacity>
            </View>
        </View>
    </View>
)

name = {isComplete? “checksquare”:”checksquareo”} 부분이 추가된 것을 확인하실 수 있습니다.
이는 isComlete의 진위에 따라 YES:NO로 대답하는 방식입니다.

App..js 에서 넘겨준 isComplete값이 true이면 checksquare, false라면 checksquareo로 아이콘의 이름이 적용됩니다. 이를 삼항 조건 연산자라고 합니다.

다음과 같이 isComplete의 속성의 진위에 따라 아이콘이 바뀌는 것을 확인할 수 있습니다.