솧디의 개발로그

리액트네이티브도 리액트 라우터처럼 화면이 이동하는 라우터 설정을 해줘야한다. 여기서 사용되는것은 react-navigation/stack이다! ▼react-navigation 공식문서▼ https://reactnavigation.org/docs/native-stack-navigator/ https://reactnavigation.org/docs/native-stack-navigator/ reactnavigation.org 설치진행! yarn add @react-navigation/native-stack App.js설정 import "react-native-gesture-handler"; import { NavigationContainer } from "@react-navigation/native"; im..

검색기능이 잘 구현된다면 추천검색어는 아주 쉬워진다! 추천검색어는 만들고 있는 앱특성상 장소가 고정값이기에 장소로 추천검색어를 등록하였다. 현업에서 일하다보니 느낀것은 절대 하드코딩금지!!!!!! 물론 이번플젝은 공부용 팀플이지만 실제 회사에서는 절대 하드코딩을 쓰지않는다는점..!! 데이터 컴포넌트를 만들어 사용하던지 json 파일을 만들어 사용한다! 나는 데이터컴포넌트를 만들어 진행하였다! const RecommendSearchData = () => { const datas = [ { id: 1, name: "세종문화회관", }, { id: 2, name: "부산문화회관", }, { id: 3, name: "예술의전당", }, { id: 4, name: "금호아트홀", }, { id: 5, name: ..

이번 앱에서 검색기능 중에서도 제일 고민했던부분은 추천검색어 부분이였다! 추천검색어 하기전에 검색 기능부터! 추천검색은 다음포스팅에 남길게요!ㅎㅎ 검색기능은 키워드를 담고 서버에 param으로 키워드와 함께 보내는 방식이라고 생각하면된다! 일단 검색기능을 구현하려면 keyword를 작성 후 버튼이벤트가 발생하면 useState에 keyword가 담겨 검색할수 있도록 로직을 구현하였다. 이렇게해야 추천검색어 기능도 할수있기에..ㅎㅎ const onChangeSearch = (keyvalue, e) => { setSearchWord({ ...searchWord, [keyvalue]: e, }); }; ▲ 키워드를 담아주는 로직 리액트네이티브에서는 이벤트와 키밸류를 함께 받아주어함!ㅎㅎ const getSea..

이번엔 네이티브에서 가장 활용을 잘할 수 있는 CSS? 아이템이다! 바로 FlatList 기존에 데이터를 map을 돌려 사용했다면 FlatList는 renderItem을 이용해 CSS처리하면서 같이 사용할수있는 아이템이다! map처리하는 로직을 줄일수있다!! 위 의 캐러셀이나 리스트를 뿌려줄 때 사용 할수있다! 캐러셀을 hook으로 만들어 컴포넌트에서 재활용 할 수있게 하였다. import React from "react"; import { Dimensions, Image } from "react-native"; import styled from "styled-components/native"; export default function Page({ item, style }) { return ( {/* ..