ReactNative) ScrollView와 FlatList의 비교 (feat: React의 &&와 ...)

서울 여의도 앞

안녕하세요. 후르륵짭짭입니다.

이번에는 ReactNative에서 UITableView와 같은 기능을 구현하는 방법에 대해서 작성해보려 합니다.

UITableView를 안 쓰는 앱은 거의 없으니깐요. 

정말 강의에서 알려준 것 만큼 간단한 정보만 작성하려고 합니다.

 

** ScrollView ** 

function App2() {

	... <생략> ...
    
  return (
    <View style={styles.appContainer}> 
      <View style={styles.inputContainer}> 
        <TextInput style={styles.textInput} placeholder='Your Goals' onChangeText={goalInputHandler}/>
        <Button title='add Goals' onPress={addGoalHandelr}/>
      </View>
      <View style={styles.goalContainer}> 
      {/*
        ScrollView는 UI가 Render 될 때 내부의 모든 View를 Rendering 한다. 
        따라서 List와 같은 형식에서는 ScrollView가 맞지 않다.
        그래서 이러한 문제를 해결하기 위해 등장한 것이 FlatList이다.
      */}
      <ScrollView alwaysBounceVertical={false}>
      {/* <Text>Lists of Goals</Text> */}
      {
        /*
      courseGoals.map(function(goal) {
        return <Text> {goal}</Text>
      })
      => 이렇게 함수로 작성 할 수 있지만
      */
      }
      {
        //View안에 리스트 형식의 Component를 반환할 때 KeyProp 즉, Key를 설정해줘야한다.
        //하지만 위와 같이 Text라는 정해진 Component위에서는 Style이 다르게 적용 될 수 있다.
        // courseGoals.map(goal => <Text style={styles.goalItem} key={{goal}}>{goal}</Text>)
        //따라서 아래와 같이 View에 Text를 담아주는 방식으로 적용한다.
        courseGoals.map(goal => 
          <View style={styles.goalItem} key={{goal}}>
            <Text style={styles.goalText}>{goal}</Text>
          </View>
        )
        //그러나 위와 같은 방식을 하더라도 글씨가 하양이 되지 않는다.
        //왜냐하면 일반적인 CSS와는 다르게 RN에서는 스타일 상속이라는 것이 없다.
        //그래서 goalText라는 것을 만들어서 다르게 적용해줘야한다.
      }

      </ScrollView>
      
      </View>
      </View>
  );
}

이 코드의 주석에 많은 내용이 담겨 있지만, 처음 보면 무슨 내용인지 알기 어렵다.

ReactNative에서 ScollView는 Dynamic 하게 증가한다.

iOS에서 UIScrollView 같은 경우, UITextView를 사용해서 Dynamic하게 증가 시킬 수 있지만 

보통은 정해진 Height가 있고 그 View를 Scoll 하는 구조 이다.

반면에 ReactNative에서 ScrollView는 내가 넣은 View의 Height 만큼 계속 계속 해서 증가한다.

따라서 아래 코드를 보면 ScrollView Component 안에 

courseGoals 배열의 크기 만큼 View Component를 생성 해주고 있다. 

<ScrollView alwaysBounceVertical={false}>
      {
        courseGoals.map(goal => 
          <View style={styles.goalItem} key={{goal}}>
            <Text style={styles.goalText}>{goal}</Text>
          </View>
        )
      }
</ScrollView>

ScrollView도 당연히 Component이기 때문에 Props를 지원하고 다양한 props가 있다.

그런데 ScrollView는 리스트로 사용할 때 단점이 있는데, 

바로 View가 Rendering 될 때 수많은 리스트가 있다면 한번에 리스트를 생성하기 때문에 

생산성 면에서 좋지 못 하다고 한다.

 

** FlatList ** 

이러한 ScrollView의 단점을 극복하기 위해서 

Swift의 UITableView와 같이 리스트를 위해서 등장한 FlatList가 있다.

{/*
    FlatList에서 Input값으로 제공될 것을 data라는 항목에 넣어준다.
    그리고 ScrollView와 다르게 내부에 View를 담아주는 형식이 아닌 다른 renderItem prop을 넣어준다.
    이는 어떻게 data를 Rendering 할 것이냐 이다.
    그리고 renderItem은 data아 주어진 것을 입력 값으로 제공하는데 여기에 index와 item이 존재한다.
    하지만 실행시 Key에 대해 오류가 발생할 수 있다. 따라서 data에 들어가는 부분에 Key를 설정해준다.
    {text: enteredGoalText, key : Math.random().toString()} 이렇게 해준다.
    그런데 만약 key 부분이 중복이 된다면 keyExtractor를 통해 다르게 적용해줄 수 있다.
  */}
  <FlatList alwaysBounceVertical={false} 
  data={courseGoals} 
  keyExtractor={ (item,index) => {
    return item.id
  }
  }
  renderItem={ itemData => {
    return (
      <GoalItem text={itemData.item.text} onDeleteItem={deleteGoalHandler} id={itemData.item.id}/>
    )
  }
  }/>

위의 ScrollView Component와 다른 점은 <></> 방식이 아니라 </> 방식이라는 것이다. (이걸 머라고 불렀는데 잘은 모르겠다 ㅠㅠ )

사용방식에서도 차이가 있는데, data에 list 형식의 값을 넣어줘야하고

keyExtractor에 ID에 해당하는 값을 넣어줘서 아이텐디를 줘야합니다.

그리고 마지막에 renderItem에 data의 갯수만큼 그려줄 Component를 넣어주면 됩니다!

 - 여기서 잠깐 - 

JavaScript에서 신기한 문법이 존재해서 작성 합니다.

renderItem={ itemData => {
    return (
      <GoalItem text={itemData.item.text} onDeleteItem={deleteGoalHandler} id={itemData.item.id}/>
    )
}

이러한 문법이 존재하는데 이는 아래의 코드와 비슷합니다.

function functionName(itemData) {
	return <GoalItem text={itemData.item.text} onDeleteItem={deleteGoalHandler} id={itemData.item.id}/>
}

즉 data에서 제공하는 값을 itemData가 인자로 받는거죠!

// function add(a, b) {
//   return a + b;
// }
// const add = (a, b) => a + b;
// => 는 다음 처럼 작동하는 것이다. 즉 함수를 간략하게 정의 할 수 있다.

이렇게 될 수 있다는 겁니다!

 

** 신기한 JavaScript 문법 ** 

 - && -

{modalIsVisible && <GoalInputItem onAddGoal={addGoalHandelr}/>}

React에서 이러한 문법을 사용하더라구요!

이게 처음에 무슨 의미 인가 했는데, React에서의 If State문이라고 합니다.

modalIsVisible이라면 GoalInputItem을 보여준다. 

이렇게 해석하면 됩니다!

 

 - ... -

setCourseGoals( (currentCourseGoal) => [
  ...currentCourseGoal , enteredGoalText
])

위에서 JavaScript의 Closure 문법에 대해 설명했지만 ... 은 설명하지 않았습니다.

이건 모던 JavaScript 문법이라고 배열안에 있는 것을 확 빼주는 것을 의미합니다.

그러니깐 currentCourseGoal에 [1,2,3] 가 있고 enteredGoalText에 4가 들어가면 

2차원 배열이 되는 것이 아니라 [1,2,3,4] 요렇게 됩니다.