7.4.3 SearchHeader 컴포넌트 UI 구성하기

SearchHeader 컴포넌트의 너비 설정이 끝났다면 컴포넌트의 UI를 구성해봅시다. 이 컴포넌트에서는 검색어를 입력할 TextInput과 검색어를 초기화하는 버튼을 보여줘야 합니다.

components/SearchHeader.js

import React from 'react';
import {
  Pressable,
  StyleSheet,
  TextInput,
  useWindowDimensions,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';

function SearchHeader() {
  const {width} = useWindowDimensions();
  return (
    <View style={[styles.block, {width: width - 32}]}>
      <TextInput style={styles.input} placeholder="검색어를 입력하세요" autoFocus />
      <Pressable
        style={({pressed}) => [styles.button, pressed && {opacity: 0.5}]}>
        <Icon name="cancel" size={20} color="#9e9e9e" />
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    flex: 1,
  },
  button: {
    marginLeft: 8,
  },
});

export default SearchHeader;

▲ 그림 7-4 SearchHeader 컴포넌트 UI 구성하기

TextInput에 autoFocus라는 Props를 사용해줬는데, 이러면 이 컴포넌트가 화면에 나타날 때 자동으로 포커스가 잡힙니다. 그럼 검색 화면을 열자마자 바로 키보드가 떠서 검색어를 입력할 수 있겠죠?

컴포넌트의 UI를 다 구성했으니 이제 검색어에 대한 상태를 관리해줘야 합니다. SearchHeader에서 입력한 검색어를 SearchScreen에서 사용할 수 있어야 하는데요. 현재 SearchHeader 컴포넌트는 MainTab 쪽에서 사용하고 있기 때문에, 상태를 공유하려면 이번에도 Context를 사용해야 합니다.