1. children ?

시작 태그와 종료 태그 사이의 내용을 나타낸다.
React 의 특별한 prop 이다.

아래 예시를 보면 이해가 더욱 쉽다.

<CustomView>
  <Text>안녕하세요, whkwon의 velog 입니다 👋</Text>
  <Text>반갑습니다 🙋‍♂️</Text>
</CustomView>

여기서 CustomView 의 children 은 안에 있는 Text 태그들이다. Text 태그가 중요한 게 아니라 CustomView 태그가 감싸고 있는 안에 있는 모든 태그들을 children 이라고 표현한다.

2. 어떻게 사용하면 좋을까 ?

아래와 같이 커스터마이징한 View 태그를 만든다고 하자.

export const SafeArea = ({children, backgroundColor}) => {
  return (
    <SafeAreaView
      style={[
        styles.container,
        {backgroundColor: backgroundColor ?? colors.warmGray800},
      ]}>
      {children}
    </SafeAreaView>
  );
};

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

그 다음 필요한 곳에서 내가 만든 SafeArea 태그를 사용하면 된다.

<SafeArea backgroundColor={'red}>
  <Text>안녕하세요!</Text>
</SafeArea>

🔔 참고
children 의 타입은 React의 ReactNode 를 따른다.