모바일 개발/React Native-이론 썸네일형 리스트형 캘린더 앱 클론코딩 -상단 바 화살표 및 날짜 눌렀을 때, 원하는 년,월,일로 갈 수 있게 하기 1. 상단바의 날짜 누를 시 원하는 년월일 선택 및 갈 수 있도록 만들기 2. 화살표 누를 시 저번 달, 다음달로 이동하기 3. 스스로 해보기 스무스하게 함. 16분 더보기 캘린더 클론코딩 특정 날짜 눌렀을 때, 달력이 반응이 오도록 하기 1. 개요도 상태 변수가 추가되었다. 상태 변수는 renderItem 의 on Press 을 이용해 사용자가 특정 날짜 누를 때 마다 상태 변수가 최신화 되도록 세팅한다. 이렇게 세팅된 상태변수는 총 3가지에서 쓰인다. 먼저 달력에 들어갈 dayjs 변수들을 배열로 돌려주던 utill.js에 이제 now(현재시간)을 안 넣고, 해당 상태 변수를 넣는다. 이렇게 되면 사용자가 달력 내 전월이나 내월의 날짜를 클릭 했을 시 그 날짜의 달로 넘어가는 기능이 구현된다. 왜냐하면 눌러진 날짜가 속한 달을 기준으로 달력에 들어갈 값의 배열을 다시 뽑기 때문이다. 두 번째로 renderItem에서 쓰인다. onPress를 누르면 상태변수가 해당 날짜로 세팅된다. isSelected라는 변수에서 상태 변수가 이용되는데.. 더보기 달력 클론코딩 (3) 달력 화면 만들기 저번에 만들었던 달력 데이터를 이용해서 달력 모양으로 화면에 띄우겠다. 위에 오늘의 날짜 2022.11.24 부분은 아직 구현 안하고, now라는 현재 시각 받아서 진행 하겠음. 1. FlatList 를 만들어 화면 띄우기 data는 저번에 우리가 util.js 에서 만들었던 column을 이용한다. 여기에는 현재 "년월일 시분초"를 뜻하는 now를 넣었다. 사실 안 넣어줘도 되지만, (why? dayjs()는 현재 년월일 시분초 의미하는데, 인수가 아무것도 넘어오지 않으면 getCalendarColumns 안에 있는 dayjs는 인수를 아무것도 안 받게되기 때문) 일단 넣어준다. data에 colums를 넣으면 이제 renderItem에서 columns의 배열 원소를 차례로 돌면서 어떠한 기능을 처리한.. 더보기 캘린더 앱 클론코딩(2) - 달력 내부 날짜 데이터 만들기 달력 내부에는 다음과 같이 날짜가 있어야 한다. 우리는 이번 4월달의 날짜 데이터를 만들 것이다. 위에서 보면 알 수 있듯이, 달력에는 해당 월의 날짜 뿐만 아니라, 빈 공간을 채우는 전월, 내월의 날짜가 조금씩 들어가 있다. 이 부분도 얼마나 필요한지 계산 해내어서 데이터에 추가할 것이다. 1. getCanlendarColumns // 딴 파일에서 import될 최종본 // now를 선언하지 않았는데 왜 돌아갈까? // now를 선언하지 않은 것이 맞다. 근데 그냥 dayjs()에 파라미터 안 넣은 경우, dayjs()는 최신 날짜를 반환한다. // 이걸 이용한 것이다. 그냥 now 다 지워버려도 동작한다. export const getCalendarColumns = (now) => { // now는 .. 더보기 달력 클론코딩 (1) dayjs 에 대하여 알아보기 1. dayjs는 react에서 날짜, 시간을 표시하고 시간 계산을 위해 쓰는 라이브러리다. (1) install npm install dayjs yarn은 따로 보시길.. (2) import 이제 다운 받은 dayjs 라이브러리를 사용해 보겠다. dayjs 자체만 import 한다고 해서 내장 함수를 다 쓸 수 없다. 몇몇 함수들은 직접 import및 상속도 받아야 한다. 2. 많이 쓰이는 함수 알아보기 (0) 사전 세팅 now라는 변수에 년월일 시분초를 넣어주겠다. 다음이 dayjs를 통해 변수에 년월일, 시분초를 넣는 방법이다. const now = dayjs("2022-11-04 16:01:30"); (1) set 함수, format 함수 day(now).set("minute", 5)는 now에서.. 더보기 계산기 - 클론코딩 (CustomHook 으로 지금까지 만든 부분 감싸기) 하나의 파일에 상태 변화 변수, 함수들과 View 부분이 혼재 하면, 유지 보수가 어렵다. 그래서 상태 변화 변수, 함수들은 다른 파일로 빼주고, 그 파일 return 값에 태워서 View part 파일에게 건네다 주는 식으로 해야지 가독성이 좋다. 우리는 우리가 만들었던 Hook들을 모아 나만의 Hook file을 만들 것이다. **주의점** Hook은 무조건 use라는 이름으로 시작해야함. Custom Hook (우리가 만들려는 Hook) file 도 예외 없음 이번엔 계산기 만드는데 썼던 Hook 이니까 useCalculator라고 쓰자. 이 안에 내용 다 넣고 return {} (객체) 안에 태워 보낸다. ()는 하나의 값 밖에 못 보내기 때문에 {}를 사용해야 한다. ()는 아무 의미 없고 그냥.. 더보기 계산기 클론코딩 - 예외처리 프로그램을 만들 때 수많은 예외처리가 필요하다. 계산기에도 수많은 예외처리가 필요하지만 일단 몇 개만 해보자 문제1: 두 번째 값을 한 자리 수 밖에 클릭할 수 없는 이유 문제가 발생하는 이유: const onPressNum = (num) => { if(currentOperator) { setResult(input); setInput(num); } else{ const newInt = Number(`${input}${num}`) setInput(newInt) } }; 첫번째 숫자 누르기 -> = 아닌 연산자 누르기 -> 두 번째 숫자 누르기 순으로 진행된다. 위의 로직을 보면 현재 연산자가 골라져 있으면, 붙여쓰지 말고, 바로 바로 result로 값을 넘기게 되어있다. 그래서 두 번째 숫자에서는 한 자리.. 더보기 계산기 클론코딩 - 계산 및 초기화 로직 0. Test 하는 값들이 눈에 보이도록 UI에 test 결과 창 만들기 test 결과창을 만들어 test 내용을 항시적으로 확인하는 것이 좋다. main 함수에다가 만들어준다. 1. Button에서 함수 이용해 중복 코드 제거 배열의 Map 함수 이용 하나의 row에 들어가는 숫자 값들로 배열을 만들어주고 - [7,8,9] 배열의 내장 함수 map을 이용 (num)은 배열의 원소가 차례대로 대입되는 인수 text는 String 값을 받아야 하므로 `${}`이용해서 number 변수인 num을 String으로 형 변환 이런 식으로 789, 456, 123의 코드를 줄이자. 2. 숫자 클릭 시 결과창에 찍히도록 const onPressNum = (num) => { setInput(num); } 해당 num.. 더보기 이전 1 2 3 4 5 6 7 다음
