☠️ 문제

ScrollView 안에 애들이 붙어서 나온다..

👩🏻‍💻 시도해본 것들

ScrollView에 StyleSheet로 padding값을 주었는데 적용이 안 되었음

return (
  <ScrollView contentContainerStyle={styles.contentContainer}>
  </ScrollView>
);
...
const styles = StyleSheet.create({
  contentContainer: {
    paddingVertical: 20
  }
});

👩🏻‍🎓 해결

1️⃣ 이미지들을 감싸고 있는 스크롤뷰에 스타일을 주는 것이 아니라 그 사진자체(Poster 컴포넌트)를 View로 감싸서 padding값을 줘야함

2️⃣ 그리고 Poster컴포넌트는 카테고리에서도 쓰기 때문에 Poster컴포넌트 내에서 쓰는 것이 아니라 내가 쓰는 Main.jsx에서만 적용하면 됨

이렇게 사진들이 잘 띄워져서 나오는 것을 볼 수 있음!

{data.map((item, idx) => {
                return (
                  <View style={{ paddingTop: 15, paddingRight: 20 }}>
                    <Poster
                      imageURL={item.MAIN_IMG}
                      title={item.TITLE}
                      key={idx}
                    />
                  </View>
                );
              })}

✅ 알게된 점

이미지 자체에 패딩값을 줘야하는지 이미지를 감싸고 있는 컴포넌트에 패딩값을 줘야하는지 헷갈렸는데 이번 기회에 좀 더 감을 잡게 되었다!

---

📚 Today Study

<ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {/* <FlatList
                horizontal
                contentContainerStyle={{ paddingHorizontal: 20 }}
                data={data}
                renderItem={({ data }) =>  <Poster
                    imageURL={data.MAIN_IMG}
                    title={data.TITLE}
                    key={data.id}
                  />}
                keyExtractor={(item) => item.id}
                ItemSeparatorComponent={<View style={{ width: 10 }} />}
              /> */}

              {/* 맵2 */}
              {/* onStageData.((item) => <View>Onstage : 정보,,,</View>) */}
              {/* {data.map((item, idx) => {
                console.log('-------------------------------');
                console.log(startdate);
                console.log(enddate);
                console.log(today);
                if (startdate <= today && today <= enddate) {
                  return (
                    <View style={{ paddingTop: 15, paddingRight: 20 }}>
                      <Poster
                        imageURL={item.MAIN_IMG}
                        title={item.TITLE}
                        key={idx}
                      />
                    </View>
                  );
                } else {
                  return (
                    <View>
                      <Text>Upcoming</Text>
                    </View>
                  );
                }
              })} */}

<Image
       resizeMode="cover"
       source={{ uri: imageURL }}
       style={{ width: 110, height: 165 }}
/>

이미지에 야매링크 넣기

https://blog.naver.com/PostView.naver?blogId=mj7392&logNo=222663841031&redirect=Dlog&widgetTypeCall=true&directAccess=false

---

📝 Today Review