본문 바로가기

개발일지/React Native

 (8)
[React Native] 객체 형태의 State 값 변경하기 코드 Server /* 매칭 되었을 때 */ socket.on("matching", (data) => { ... 중략 ... io.to(socket.roomNumber).game = { dices: [], rollCount: 0, }; // 나를 제외한 방에 있는 사람들에게 turn 부여 socket.broadcast.to(socket.roomNumber).emit("submit", true); }); socket.on("roll", (data) => { ... 중략 ... io.to(socket.roomNumber).emit("roll", io.to(socket.roomNumber).game); /* console.log(io.to(socket.roomNumber).game); io.to(socket...
[React Native] Image source를 String 계산값으로 취하기 문제 import React from "react"; import { dice1, dice2, dice3, dice4, dice5, dice6 } from "../../../assets/play"; export default function ({ isTurn, value, hold, onPress }) { const imageSource = `dice${value}`; return ( ); } 두개의 코드 모두 assets의 파일을 도통 참조하지 않는다. 해결책 import React from "react"; import { dice1, dice2, dice3, dice4, dice5, dice6 } from "../../../assets/play"; const IMAGES = { image1: dice..
[React Native] ENOENT: no such file or directory refactoring 작업 중 발생한 error 삭제한 파일의 경로를 찾을수 없다고 에러가 나는데, 어디서 부르는건지 모르겠다. 코드 전부를 뒤져봤지만 삭제한 파일을 import하는 곳은 없었다. error message 내용 중 node_modules 단어를 발견했고, npm install 입력 후 재실행하니 오류가 사라졌다. module 사용 시 node_moudles에서는 어느 파일에서 자신을 사용하는 지, 경로를 저장하는 것 같다.
[React Native] Container - Presenter Pattern Container : Data 관리 (api 요청, state관리) Presenter : View 관리, Container로부터 받은 Data를 출력한다.
[React Native] Noovies 클론코딩 개발일지 Stack과 Tab Navigation 어떤 방법으로 동시에 사용하였을까? navigation.navigate("Detail") 와 navigation.push("Detail") 기능이 같다. Detail로 갔을 시 탭이 사라지는 현상때문에. 어떤 함수가 적합할까? Header 설정방식도 궁금하다. 각 Screen에서 설정해준건가? (결국 이름 변경 못했음) 각 Component 들 별점, 출시일도 컴포넌트로 생성할만하다. 확인해보기 이미지 크기들도 다 일정한 것 같다. 컴포넌트로 따로 만들었는지 확인 스크롤 뷰도 같은 형태가 3개 반복되는데 이것도 확인 별점 출력해주는 것까지? 세로용, 가로용, 자동슬라이드 이렇게 3개 만들예정. 노마드의 네이밍이 궁금하다. 가로용 ComingSoon은 date가 표시..
[React Native] <TextInput> 상태 변화하는 방법 React const [value, setValue] = useState(""); const handleChange = ( e ) => { setValue(e.target.value); } onChange={handleChange} React Native const [value, setValue] = useState(""); onChangeText={(text) => setValue(text)}
[React Native] Text strings must be rendered within a <Text> component 구글링 결과 ; 같은 오타 때문에 생긴다고해서 >; 를 컴포넌트 마다 검색해봤는데 이런 오타는 없었다. 그렇다면 이 부분을 한 번 확인해보자! // MovieScreen.jsx return state ? ( Hello ) : ( " " ); 이런 식의 코딩을 렌더링 부분에서 자주 사용했는데 간과한 부분이 있다. 상위 컴포넌트에서 해당 컴포넌트(MovieScreen)를 어떻게 불러오는 지를 확인해야 한다. //ScreenTab.jsx ( ), }} > 해당 컴포넌트(MovieScreen)을 component props로 사용하고 있었다. 변경 코드 // MovieScreen.jsx return state ? ( Hello ) : ( isLoading );
[React Native] Stack과 Tab Navigation 동시에 사용하기 접근방법 1. 각각의 Tab위에 Stack들 얹기 장점: 직관적임 단점: 스택 파일 갯수가 많아진다. 1. header(title)를 위해 Stack을 만들어야 했다. Tab.Screen의 component props를 Stack이 아닌 Screen에 대해서는 Header가 생성되지 않는다. 그래서 단 한개의 Screen을 쓰더라도 Stack을 만들어주어야 했다. 2. 여러 탭들에서 공통으로 사용하는 하나의 Screen이 존재했는데, 이 Screen을 접근하기위해 Stack마다이 Screen을 넣어줬다. 아니, 사실 이 단 하나의 Screen을 접근하기 위해 여러 개의 Stack을 만들었다... 좋지않은 코드라는 것을 직감했고 (실제로 동작에 오류는 없었다) 다른 방식을 찾기 시작했다. 접근방법 2. S..

티스토리툴바