kdh22q

리액트 네이티브에서 styled-components를 사용하면, CSS-in-JS 방식으로 컴포넌트의 스타일을 선언할 수 있다.

# 기본 개념

설치: styled-components를 설치한다.

npm install styled-components​

사용법: styled-components를 사용하여 스타일링된 컴포넌트를 정의한다. 이 컴포넌트는 리액트 네이티브의 기본 컴포넌트를 확장하여 스타일을 적용할 수 있다.

# 사용 예시

import React from 'react';
import styled from 'styled-components/native';

// styled-components로 스타일링된 컴포넌트 정의
const StyledView = styled.View`
  background-color: lightblue;
  padding: 20px;
  border-radius: 10px;
`;

const StyledText = styled.Text`
  color: darkblue;
  font-size: 18px;
`;

const App = () => (
  <StyledView>
    <StyledText>Hello, styled-components!</StyledText>
  </StyledView>
);

export default App;

# 주요 기능

1. 템플릿 리터럴: 스타일을 정의할 때 템플릿 리터럴을 사용한다. CSS 문법과 유사하며, 스타일을 읽기 쉽게 만들어 준다.

2. props 사용: 스타일을 동적으로 변경하려면 props를 사용할 수 있다.

const StyledButton = styled.TouchableOpacity`
  background-color: ${props => props.primary ? 'blue' : 'gray'};
  padding: 10px;
  border-radius: 5px;
`;

3. 함수 사용: 스타일을 함수로 정의할 수 있어, 더 복잡한 로직을 포함할 수 있다.

const StyledView = styled.View`
  background-color: ${props => props.bgColor || 'white'};
  padding: ${props => props.padding || '10px'};
`;

4. 기본 스타일: 기본값을 설정할 수 있으며, props가 제공되지 않을 때 기본 스타일이 적용된다.

const StyledText = styled.Text`
  font-size: ${props => props.fontSize || '16px'};
  color: ${props => props.color || 'black'};
`;

5. 컴포넌트 조합: 다른 styled-component와 함께 사용할 수 있으며, 재사용성과 유지보수성을 높일 수 있다.

const Wrapper = styled.View`
  padding: 20px;
`;

const Content = styled.View`
  background-color: lightgray;
  padding: 10px;
`;

const App = () => (
  <Wrapper>
    <Content>
      <StyledText>Nested components</StyledText>
    </Content>
  </Wrapper>
);

# 성능 최적화

• 스타일시트 캐싱: styled-components는 스타일을 캐싱하여 성능을 최적화한다. 스타일을 한 번 정의하면, 이후에는 재사용된다.
• 조건부 스타일링: 스타일을 조건부로 변경할 수 있어, 특정 props나 상태에 따라 스타일을 동적으로 조정할 수 있다.

# 디버깅

• 디버그 도구: styled-components는 개발 도구와 통합되어, 컴포넌트의 스타일을 쉽게 디버깅할 수 있다. styled-components의 개발자 도구를 사용하면, 스타일과 props를 실시간으로 확인할 수 있다.

리액트 네이티브에서 그림자를 설정하는 방법이다. 그림자 속성은 iOS와 Android에서 약간 다르게 처리되므로, 두 플랫폼을 모두 고려해야한다.

# iOS에서 그림자 설정

iOS에서는 shadowColor, shadowOffset, shadowOpacity, shadowRadius 속성을 사용하여 그림자를 설정할 수 있다.

1.shadowColor: 그림자의 색상을 설정한다. 예를 들어, #000은 검정색 그림자를 의미한다.

shadowColor: '#000',

2. shadowOffset: 그림자의 오프셋을 설정한다. width와 height를 포함하는 객체로, 그림자가 요소의 어떤 방향으로 떨어지는지를 정의한다.

shadowOffset: { width: 0, height: 2 },

3. shadowOpacity: 그림자의 불투명도를 설정한다. 0은 투명하고 1은 불투명하다.

shadowOpacity: 0.8,

4. shadowRadius: 그림자의 흐림 정도를 설정한다. 값이 클수록 그림자가 더 흐릿해진다.

shadowRadius: 4,

예제:

<View style={{
  width: 100,
  height: 100,
  backgroundColor: 'white',
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.8,
  shadowRadius: 4,
}}>
</View>

# Android에서 그림자 설정

Android에서는 elevation 속성을 사용하여 그림자를 설정한다. elevation 값이 클수록 그림자가 더 강해진다.

1. elevation: 요소의 높이를 설정하여 그림자를 생성한다. 값이 클수록 그림자가 더 두꺼워진다.

elevation: 5,

예제:

<View style={{
  width: 100,
  height: 100,
  backgroundColor: 'white',
  elevation: 5,
}}>
</View>

# 플랫폼별 그림자 조정

iOS와 Android에서 동일한 시각적 효과를 얻으려면 두 플랫폼의 속성을 조정할 필요가 있다. iOS에서는 shadowOpacity와 shadowRadius를 조정하고, Android에서는 elevation을 조정하여 비슷한 효과를 얻을 수 있다.

# 복합적인 그림자 효과

복합적인 그림자 효과를 원한다면, View를 중첩하여 각각의 그림자 효과를 적용할 수도 있다. 예를 들어, 외부 그림자와 내부 그림자를 함께 설정하는 등의 효과를 사용하는 방식이다.

<View style={{
  width: 100,
  height: 100,
  backgroundColor: 'white',
  elevation: 5,
  shadowColor: '#000',
  shadowOffset: { width: 0, height: 2 },
  shadowOpacity: 0.8,
  shadowRadius: 4,
}}>
  <View style={{
    width: 80,
    height: 80,
    backgroundColor: 'gray',
    position: 'absolute',
    top: 10,
    left: 10,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.5,
    shadowRadius: 2,
  }} />
</View>

이렇게 하면 외부 View와 내부 View에 각각 그림자 효과를 적용할 수 있다.

Flexbox는 레이아웃을 구성할 때 매우 강력한 도구로, 다양한 화면 크기와 해상도에 대응할 수 있도록 해준다. 주로 flexDirection, justifyContent, alignItems, flex, flexWrap 등의 속성을 설정하여 레이아웃을 조절한다.

1. flexDirection: 이 속성은 자식 요소들이 배치되는 방향을 결정한다. 기본값은 column으로, 위에서 아래로 쌓인다. row로 설정하면 왼쪽에서 오른쪽으로 배치된다.
2. justifyContent: 이 속성은 주 축(main axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. 예를 들어, center로 설정하면 중앙에 정렬되고, space-between으로 설정하면 요소들 사이에 균등한 간격을 둔다.
3. alignItems: 이 속성은 교차 축(cross axis) 방향으로 자식 요소들이 어떻게 정렬되는지를 설정한다. flex-start, center, flex-end, stretch 등을 사용하여 정렬을 조절할 수 있다.
4. flex: 이 속성은 자식 요소가 남은 공간을 얼마나 차지할지를 설정한다. flex: 1로 설정하면 자식 요소가 가능한 모든 공간을 차지하게 된다.
5. flexWrap: 이 속성은 자식 요소들이 주 축 방향으로 넘칠 때 어떻게 처리할지를 설정한다. nowrap(기본값)으로 설정하면 넘치는 요소들이 한 줄에 표시되며, wrap으로 설정하면 다음 줄로 넘어가게 된다.

Flexbox를 잘 활용하면 다양한 화면 크기와 방향에서도 일관된 레이아웃을 유지할 수 있다. 각 속성들을 조합하여 원하는 레이아웃을 쉽게 구현할 수 있다.

React Native의 스타일링 시스템은 프레임워크를 통해 개발자가 JavaScript 및 React를 사용하여 iOS 및 Android용 기본 앱을 만들 수 있는 방법의 핵심적인 측면이다. 스타일 지정에 CSS가 사용되는 웹 기반 애플리케이션과 달리 React Native는 기본 레이아웃과 성능을 염두에 두고 CSS와 유사한 스타일의 하위 집합을 기반으로 하는 다른 시스템을 사용한다.

1. 스타일 지정을 위한 JavaScript 개체

React Native에서 스타일은 CSS 파일이 아닌 JavaScript 객체를 사용하여 정의된다. 이러한 객체에는 CSS와 유사하지만 기본 모바일 성능에 최적화된 속성이 포함되어 있다. 스타일은 style 소품을 통해 구성 요소에 전달된다.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  text: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

• 스타일은 스타일을 최적화하고 유효성을 검사하는 데 도움이 되는 StyleSheet.create 메서드를 사용하여 생성된다.
• style 소품은 View 및 Text 구성 요소 모두에 전달된다.

2. CSS와의 차이점

React Native의 스타일링 구문은 CSS와 유사하지만 특정 기능들이 부족하다.

• No cascade: React Native에는 CSS와 같은 계단식 스타일 시스템이 없다. 각 스타일은 적용되는 구성요소에 따라 다르다.
• No inheritance: 하위 요소가 특정 스타일을 상속할 수 있는 HTML과 달리 React Native 구성 요소는 명시적으로 전달되지 않는 한 상위 요소에서 스타일을 상속하지 않는다.
• Limited selectors: .class, #id 또는 element와 같은 CSS 선택기는 지원되지 않는다. 스타일은 style 소품을 통해 직접 적용된다.

3. 측정 단위

• React Native는 CSS에서 사용되는 전통적인 픽셀 단위('px')가 아닌 밀도 독립적 픽셀(DIP)을 사용한다. 이렇게 하면 픽셀 밀도가 다양한 화면에서 UI가 보기 좋게 표시된다.
• em, rem, % 또는 vh와 같은 단위를 사용할 수 있는 웹과 달리 React Native는 크기, 여백, 패딩 등에 대해 절대 숫자에만 거의 전적으로 의존한다.

4. 레이아웃용 Flexbox

React Native는 레이아웃 관리를 위해 Flexbox에 크게 의존한다. Flexbox는 컨테이너 내에서 구성 요소를 정렬하고 배포하는 효율적인 방법을 제공하는 레이아웃 모델이다.

React Native의 주요 Flexbox 속성은 다음과 같다:

• flexDirection: 기본 축(행 또는 열)을 결정한다. 기본값은 'column'인 반면 웹 Flexbox에서는 기본값이 'row'이다.
  • row: 하위 구성요소가 가로로 배치
  • column: 하위 구성요소가 수직으로 배치
• justifyContent: 기본 축을 따라 하위 항목을 정렬한다.
  • 값: flex-start, flex-end, center, space-between, space-around, space-evenly
• alignItems: 교차축을 따라 하위 요소를 정렬한다.
  • 값: stretch(기본값), flex-start, flex-end, center.
• flex: 형제에 비해 구성 요소가 어떻게 성장해야 하는지 제어한다. flex: 1이 있는 구성 요소는 flex가 있는 다른 구성 요소가 경쟁하지 않는 경우 사용 가능한 공간을 모두 차지한다.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

5. 플랫폼별 스타일

React Native는 Platform 모듈이나 조건부 논리를 통해 플랫폼별 스타일을 허용한다.

• 앱이 iOS에서 실행되는지, Android에서 실행되는지에 따라 조건부로 스타일을 적용할 수 있다.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  text: {
    ...Platform.select({
      ios: {
        fontFamily: 'Arial',
      },
      android: {
        fontFamily: 'Roboto',
      },
    }),
  },
});

여기서 Platform.select는 플랫폼에 따라 적절한 글꼴이 사용되도록 보장해준다.

6. 스타일시트와 인라인 스타일

React Native는 스타일을 정의하는 두 가지 주요 방법을 제공한다.

StyleSheet.create: 이 방법은 유효성 검사와 더 나은 성능을 제공하므로 선호된다. 스타일을 캐시하고 네이티브 브리지에 맞게 최적화한다.
인라인 스타일: 스타일은 인라인 JavaScript 개체로 직접 전달될 수도 있다. 그러나 이는 모든 렌더링의 스타일을 다시 계산하므로 효율성이 떨어진다.

<View style={{ backgroundColor: 'blue', padding: 10 }} />

인라인 스타일은 간단한 사용 사례에 작동하지만 보다 복잡한 스타일에는 StyleSheet.create를 사용하는 것이 좋다.

7. 스타일 결합

style prop에 배열을 전달하여 단일 구성요소에 대해 여러 스타일을 결합할 수 있다.

const baseStyle = {
  color: 'black',
  fontSize: 18,
};

const boldStyle = {
  fontWeight: 'bold',
};

<Text style={[baseStyle, boldStyle]}>Bold Text</Text>

이 경우 baseStyle과 boldStyle의 스타일이 모두 적용된다. 충돌이 있는 경우 배열의 뒷부분에 있는 스타일이 이전 스타일을 재정의한다.

8. 동적 및 조건부 스타일

스타일은 JavaScript 개체이므로 상태, 소품 또는 기타 논리를 기반으로 조건부 스타일이나 동적 스타일을 쉽게 적용할 수 있다.

const isActive = true;
const styles = {
  text: {
    color: isActive ? 'green' : 'red',
  },
};

동적 스타일을 사용하여 사용자 작업, 화면 크기 등에 따라 다양한 스타일을 적용할 수 있다.

9. 그림자 및 테두리 속성

React Native는 기본 그림자 및 테두리 속성을 지원한다.

• 그림자 속성: iOS에서 사용할 수 있다.
• shadowColor, shadowOffset, shadowOpacity, shadowRadius.
• Elevation(Android 그림자용): Android에서는 elevation 속성을 사용하여 그림자가 생성된다.

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 3,
    elevation: 5, // 안드로이드 그림자
  },
});

10. 의사 클래스 및 미디어 쿼리

React Native는 :hover, :focus 또는 :before와 같은 의사 클래스를 지원하지 않는다. 대신 JavaScript 로직(예: 사용자 상호 작용 이벤트)을 사용하여 이러한 상태를 관리해야 한다.
마찬가지로 미디어 쿼리는 기본적으로 지원되지 않지만 react-native-Response와 같은 타사 라이브러리를 사용하거나 Dimensions를 쿼리하여 다양한 화면 크기를 수동으로 처리할 수 있다.

11. 반응형 디자인

React Native는 기본적으로 미디어 쿼리를 제공하지 않지만 다음을 통해 반응형 레이아웃을 만들 수 있다.

- 'Dimensions' 사용

import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

기기 크기에 따라 UI 크기를 조정하기 위한 'react-native-Response' 또는 'react-native-size-matters'와 같은 라이브러리이다.

12. 애니메이션 및 변형

React Native는 Animated 라이브러리를 통해 기본적으로 애니메이션을 지원하며 구성 요소에 애니메이션 스타일을 적용할 수 있다. 또한 rotate, scale, translateX 등과 같은 transform 속성을 사용하여 시각적 모양을 동적으로 조작할 수 있다.

const animatedValue = new Animated.Value(0);
const animatedStyle = {
  transform: [{ translateY: animatedValue }],
};

React에서 useState는 함수형 컴포넌트에 상태(state)를 추가할 수 있게 해주는 Hook이다. 이는 현대 React 개발에서 중요한 구성 요소로, 사용자 입력이나 동적인 데이터 등을 렌더링 사이에 기억하도록 한다.

# React에서의 상태(state)란?

React에서 상태는 컴포넌트가 렌더링되고 동작하는 방식을 결정하는 객체이다. 상태가 변경되면 React는 해당 컴포넌트를 다시 렌더링하여 새로운 상태를 반영한다. 상태는 사용자 입력, 서버에서 가져온 데이터, 계산 결과 등 동적인 정보를 포함할 수 있다.

전통적으로 상태 관리는 클래스 컴포넌트에서 this.state와 this.setState를 사용하여 이루어졌다. 그러나 React 16.8 버전에서 Hooks가 도입된 이후, 이제는 함수형 컴포넌트에서도 useState를 통해 상태를 관리할 수 있다.

# useState 문법

setCount(prevCount => prevCount + 1);

• state: 현재 상태 값을 나타낸다. 이 값은 React가 컴포넌트를 렌더링하는 데 사용된다.
• setState: 상태 값을 업데이트할 때 사용하는 함수이다. 이 함수를 호출하면 React가 새로운 상태로 컴포넌트를 다시 렌더링한다.
• initialState: 컴포넌트가 처음 렌더링될 때의 초기 상태 값을 나타낸다. 원시 값, 객체, 배열 또는 함수가 될 수 있다.

# useState 사용 예시

import React, { useState } from 'react';

function Counter() {
  // "count"라는 상태 변수를 선언하고 초기 값을 0으로 설정
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>당신은 {count}번 클릭했습니다</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

export default Counter;

예시 설명

• const [count, setCount] = useState(0);
• count는 상태 변수를 의미
• setCount는 count를 업데이트하는 함수
• useState(0)는 count의 초기 값을 0으로 설정

버튼을 클릭하면 setCount(count + 1)이 호출되어 count 상태가 1 증가하고, 컴포넌트가 다시 렌더링된다.

# useState에 대한 중요한 사항

1. 렌더링 간 상태 유지: 일반 변수와 달리, React는 렌더링 사이에 상태를 "기억"한다. 예를 들어 count가 업데이트되면, React는 이 값을 렌더링할 때마다 유지한다.

2. 반응성: setState 함수를 사용하여 상태가 변경되면 React는 자동으로 컴포넌트를 다시 렌더링한다. 이를 통해 UI가 현재 상태를 반영하게 된다.

3. 함수형 업데이트: 새로운 상태가 이전 상태에 의존하는 경우, setState에 함수를 전달하는 것이 더 안전하다. 이렇게 하면 React가 상태 업데이트를 올바르게 처리할 수 있다. prevCount는 이전 상태 값을 나타낸다.  

setCount(prevCount => prevCount + 1);

4. 지연 초기화: 초기 상태가 계산의 결과일 경우, 함수를 useState에 전달할 수 있다. 이 함수는 컴포넌트가 처음 렌더링될 때만 호출된다. 이 경우, expensiveComputation 함수는 초기 렌더링 시에만 실행된다.

const [count, setCount] = useState(() => expensiveComputation());

# 일반적인 패턴 및 모범 사례

1. 여러 개의 useState 호출: 하나의 컴포넌트에서 여러 개의 상태를 관리하기 위해 useState를 여러 번 호출할 수 있다.

const [name, setName] = useState(''); const [age, setAge] = useState(0);

const [user, setUser] = useState({ name: 'Alice', age: 25 }); // 중첩된 상태를 업데이트하는 올바른 방법 
setUser(prevUser => ({ ...prevUser, age: 26 }));

// 잘못된 방식 
user.age = 26; 
// 올바른 방식 
setUser({ ...user, age: 26 });

# useState의 사용 사례

• 폼 처리: 입력 필드의 값을 관리하는 데 사용.
• 카운터: 값의 증가나 감소를 관리 (예: 투표 시스템, 장바구니 수량 등).
• 토글 상태: true/false 값을 전환하는 데 사용 (예: 요소 표시/숨기기).
• 데이터 가져오기: API로부터 가져온 데이터를 저장.

# 요약

• useState는 함수형 컴포넌트에 상태를 추가하는 기본적인 Hook이다.
• 상태가 변경되면 React는 해당 상태에 따라 컴포넌트를 다시 렌더링한다.
• React는 렌더링 사이에 상태를 유지하며, 상태는 setState 함수를 통해 업데이트된다.

이 Hook은 React 함수형 컴포넌트에서 상호작용적이고 동적인 UI를 구축하는 기초이다.