w-fit

alignSelf는 Flexbox 레이아웃 시스템에서 개별 아이템의 정렬 방식을 제어하는 속성입니다.
React Native는 기본적으로 Flexbox를 사용하기 때문에, alignSelf를 이해하면 레이아웃을 자유자재로 다룰 수 있습니다.

🔍 alignSelf의 동작 원리 (vs. alignItems)

1. 부모 컨테이너의 alignItems

   • 모든 자식 아이템의 기본 정렬 방식을 정의합니다.
   • 예: alignItems: 'center' → 모든 자식이 가로축 중앙 정렬됩니다.

2. 개별 아이템의 alignSelf

   • 특정 아이템 딱 1개만 예외적으로 정렬 방식을 지정합니다.
   • 부모의 alignItems 설정을 무시하고 독립적으로 동작합니다.

🎯 alignSelf: 'flex-start'가 효과적인 이유

• 기본값 문제: React Native에서 View/Pressable은 기본적으로 alignSelf: 'stretch'입니다.
  → 부모의 전체 너비를 차지하려고 합니다 (width: 100%와 유사).

• 해결 방법: flex-start로 변경하면
  → "콘텐츠 크기만큼만 너비를 차지해!" 라는 의미가 됩니다.
  → Tailwind CSS의 w-fit 또는 웹의 width: fit-content와 동일한 효과입니다.

📚 alignSelf의 주요 옵션

💡 실제 적용 예시

<View style={{ flexDirection: 'column' }}> {/* 기본 레이아웃 */}
  {/* 이 Pressable은 부모 너비 전체를 차지함 (기본값) */}
  <Pressable style={{ backgroundColor: 'red' }}>
    <Text>기본 버튼</Text>
  </Pressable>

  {/* 이 Pressable은 콘텐츠 크기만큼만 차지함 */}
  <Pressable style={{ 
    backgroundColor: 'blue',
    alignSelf: 'flex-start' // ← 핵심!
  }}>
    <Text>fit-content 버튼</Text>
  </Pressable>
</View>

🌟 요약

• alignSelf는 "나 혼자만 다르게 정렬할래!" 하는 속성입니다.
• flex-start를 사용하면 자식의 본래 크기를 유지하면서 부모의 정렬 시작점에 붙게 됩니다.
• React Native에서 w-fit 같은 효과를 내려면 alignSelf: 'flex-start'가 최적의 해결책입니다.