View 컴포넌트 안에서 삼항연산자로 css 사용 예시

isFirst를 boolean type으로 가정한다.

      {/* Experience */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Experience</Text>
        {user.experience?.map((experience, index) => (
          <ExperienceListItem key={experience.id} experience={experience} isFirst={index === 0} />
        ))}
      </View>

export default function ExperienceListItem({
  experience,
  isFirst,
}: ExperienceListItemProps) {
  return (
    <View style={styles.container}>
      <Image source={{ uri: experience.companyImage }} style={styles.image} />
      <Text style={styles.title}>{experience.title}</Text>
      <Text>{experience.companyName}</Text>
    </View>
  );
}

type ExperienceListItemProps = {
  experience: Experience;
  isFirst: boolean;
};

export default function ExperienceListItem({
  experience,
  isFirst,
}: ExperienceListItemProps) {
  return (
    <View
      style={[
        styles.container,
        { backgroundColor: isFirst ? "lightgray" : "white" },
      ]}
    >
      <Image source={{ uri: experience.companyImage }} style={styles.image} />
      <Text style={styles.title}>{experience.title}</Text>
      <Text>{experience.companyName}</Text>
    </View>
  );
}

<View
      style={[
        styles.container,
        { backgroundColor: isFirst ? "lightgray" : "white" },
      ]}
    >