TIL_230104_ React Native 심화

정윤숙·2023년 1월 4일

TIL

목록 보기

65/192

내일배움캠프 4기 스파르타코딩 React B반

📒 오늘의 공부

1. React Native 심화 강의

알게된 것

Linear Gradient
npx expo install expo-linear-gradient
배경 이미지 아랫부분으로 갈수록 어두워지게 할 수 있다.
(색을 여러 개 넣어서 적용 가능)
StyleSheet.absoluteFIll
- style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}가 간소화 된 것
  style={StyleSheet.absoluteFill}
스크린 화면 크기
- util.js
- height: ${SCREEN_HEIGHT / 3 + "px"}; 이렇게 적용
React native Swiper
- npm i react-native-swiper --save
- showPagination={false} 페이지표시하는 점 안 보임
- autoplay loop로 반복해서 자동으로 넘어가게
말줄임표 방법
- <Overview numberOfLines={4} ellipsizeMode="tail">
- <Overview>{overview.slice(0, 150)} {overview.length > 150 && "..."}</Overview>
API 연결
- 코드 간결화
- topRated, upComing 등 가져오는 주소가 다를 때 중복되는 부분을 변수로 처리해서 쓰기
- poster url도 같음
- util.js
- 사용할 땐 uri: getImgPath(top.poster_path),
Promise.all
- await Promise.all([getNowPlayings(), getTopRated(), getUpcoming()]);
- 안의 함수가 모두 실행 되어야 값을 반환
- 각 함수에 공통적으로 isLoading(false)가 들어가는데 Promise.all을 통해 한 번만 쓸 수 있다.
- useEffect에도 각 함수 대신 Promise.all의 함수인 getData()만 쓰면 된다.
- 공식문서의 중요성 - 중괄호를 쓸지, 그냥 괄호를 쓸지 공식문서 잘 볼 것!

RefreshControl
- <RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />
- refreshing에는 Boolean을 넣는데 useState로 상태 관리하기
- onRefresh에는 함수로 refresh가 실행됐을 때 상태 변경(true) - 데이터 불러오기 - 상태 변경(false)
flat List
- 리스트를 모두 렌더링하기 때문에 데이터 소모가 큰 ScrollView와 달리 화면에 보이는 부분만 렌더링한다.
- 필수값 - data, renderItem
  -> flat List 자체에 map이 내장되어 있어 data에는 map을 돌릴 배열을 넣어준다.
  -> renderItem은 {item}으로 정해져 있음
- ScrollView 안의 하위부분만 flatList를 적용하고 싶을 때 윗부분을 ListHeaderComponent로 분리할 수 있다.
  (반대의 경우 ListFooterComponent)

detail page 만들기

알게 된 것

뒤로 버튼 만들기
- stack Navigator의 screenOptions에 headerLeft
- headerLeft를 ()가 아닌 {}로 감싸고 있어서 '뒤로'가 화면에 안 보였다.
- 괄호 하나하나 잘 볼 것!!!

reset 활용하기(myPage)

reset({
          index: 0,
          routes: [
            {
              name: "Stacks",
              params: {
                screen: "two",
              },
            },
          ],
        })

문제 및 시도

JSON value 'NaNpx' of type NSString~ Did you forget the % of pt suffix
- 원인 발견
  -> 메인이미지를 감싸는 부분 height: ${SCREEN_HEIGHT / 2 + "px"} 에서 "px"가 문제. px를 지우니 오류는 안 나는데 사이즈가 화면 전체의 1/3이 아니라 한 1/5 정도밖에 차지 안 해서 250px로 바꿈
- screen으로 하면 오류가 안 난다고해서 둘 다 console로 찍어봤는데 똑같은 값이 나옴.
  LOG {"fontScale": 0.941, "height": 812, "scale": 3, "width": 375}
- util.js에서는 SCREEN_HEIGHT을 3으로 나눈 값도 잘 찍히는데 Slides에 import를 해서 콘솔로 찍으면 undefined가 뜬다.
해결
- import할 때 SCREEN_HEIGHT가 중괄호 안에 들어가 있지 않아서 오류가 난 거였다.
- util.js에서 export default가 아닌걸 보고 import를 확인했더니 중괄호가 없었다.
알게 된 것
- 콘솔로 하나하나 찍어보자. 오류 메시지를 검색하는 것도 좋지만 가장 처음 선언된 곳에서부터 값을 가져와서 쓰는 곳까지 콘솔로 찍어보기
- 이번에도 util.js에서는 잘 나왔지만 Slices.js에서

2. 후발대 강의

React Query 강의인 줄 알았으나 리덕스 툴킷, axios 강의여서 넘겨보며 개념 정리!

3. Modern JavaScript Tutorial_4

브라우저 기본 동작

클릭한 사진만 크게 보이는 걸 구현하고 싶었는데 브라우저 기본 동작에 있었다.
- 참고해서 클릭한 썸네일 사진이 가운데 크게 보이게 했다.
- 메인용, 썸네일용 두 가지 크기의 사진이 필요하다.
- 썸네일 사진을 클릭했을 때 a 태그의 href는 메인용 크기 사진
- js를 이용해 클릭한 사진의 href, title을 받아와 현재 메인의 src, alt에 넣어준다.