[리액트네이티브 reactNative] 중첩 삼항 연산자

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

아래 내용은 실무에서 사용했던 코드 그대로를 가져온 건데요.

리액트 네이티브로 개발할 때 중첩 삼항 연산자를 어떻게 쓰는지 해당 코드를 보고 이해를 하시면 좋을 것 같습니다 :)

 

		{this.state.challengedata.length > 0 ? (
                <>
                <View style={styles.challCnt}>
                <Text style={styles.touch}>내가 챌린지한 내용</Text> 
                <FlatList
                  horizontal
                  keyExtractor={(item, index) => index.toString()}
                  style={{flexDirection: 'row' }}
                  data={this.state.challengedata}
                  renderItem={obj => {
                    return (
                      <View style={{  marginRight: 14, marginBottom:10}}
                        >
                        <TouchableOpacity
                          key={obj.index.toString()}
                          style={{ width: wp('50%'), height: wp('65%')}}
                          onPress={() => {
                            this.setState({ isImageViewVisible: true, imgModalIdx: obj.index });
                          }}
                          >
                          <Image source={{ uri: obj.item.URL }} style={{ width: '100%', height: '100%' }} />
                        </TouchableOpacity>
                        <Text style={styles.imgDate}>{obj.item.regdate.split(' ')[0].replace('-','.').replace('-','.')}</Text>
                      </View>
                    );
                  }}
                />
                </View>
                </>
              ) : null}
              
              <ImageView
              images={this.state.challengedata}
              imageIndex={this.state.imgModalIdx}
              visible={this.state.isImageViewVisible}
              onRequestClose={() => {
                this.setState({isImageViewVisible: false})
              }}
              // FooterComponent={({ imageIndex }) => (
              //   <View style={{marginBottom: hp('8%'), alignItems: 'center',}}>
              //     <View style={{paddingHorizontal: 20, paddingVertical: hp('1%'), borderRadius: 20, backgroundColor: 'rgba(0, 0, 0, 0.4)', }}>
              //       <Text style={{ color: 'white', fontWeight: 'bold', }}>{imageIndex+1} / {this.state.challengedata.length}</Text>
              //     </View>
              //   </View>
            />

              {this.state.cameraPictureList.length > 0 ? (
                <>
                <View style={styles.newChall}>
                <Text style={styles.touch}>챌린지 이미지 등록</Text>  
                <FlatList
                  horizontal
                  keyExtractor={(item, index) => index.toString()}
                  style={{flexDirection: 'row' }}
                  data={this.state.cameraPictureList}
                  renderItem={obj => {
                    console.log(obj)
                    return (
                    // 터치 하면 삭제되는 구문
                      <TouchableOpacity
                         key={obj.index.toString()}
                         style={{ width: wp('50%'), height: wp('65%')  }}
                         onPress={() => {
                          const cameraPictureList = this.state.cameraPictureList;
                          cameraPictureList.splice(obj.index, 1);

                          this.setState({
                            cameraPictureList,
                          });
                        }}
                         >
                          <Image source={{ uri: obj.item }} style={{ width: '100%', height: '100%' }} />
                      </TouchableOpacity>
                    );
                  }}
                />
                      <Text style={styles.touch2}>이미지를 터치하면 삭제됩니다.</Text>                            
                    </View>
                  </>
              ) : null}
            
              {this.state.challengedata.length > 9 ? (
                  <>
                	<View
                        style={styles.btn2}
                        // onPress={() => {
                        //   this.setState({
                        //     isCameraModalVisible: true,
                        //   });
                        // }}
                        >
                         <View><Text style={styles.btnText}>챌린지 완료</Text></View>    
                     </View>                
                  </>
                ) : ( (this.state.cameraPictureList.length > 0 ? (
                // 중첩 삼항연산자 시작
                  <TouchableOpacity
                  style={styles.btn3}
                  onPress={() => {
                    this._register()
                  }}>
                   <View><Text style={styles.btnText}>챌린지 등록</Text></View>    
                </TouchableOpacity>
                  ) : (
                    <>                  
              			<TouchableOpacity
                          style={styles.btn}
                          onPress={() => {
                            this.setState({
                              isCameraModalVisible: true,
                            });
                          }}
                        >
                        	<View><Text style={styles.btnText}>나도 챌린지!</Text></View>    
                      	</TouchableOpacity>                
                  	</>
                  ))
                )}

처음에 삼항연산자가 중괄호{}로 시작하길래 중첩도 그런 줄 알았더니 중첩은 괄호()로 시작했다.