1. Toggle버튼 구현
(1) 로직 설계도
(2) 코드리뷰
TodoList 자체를 누를 수 있도록 하기 위해 전체를 감싸던 RootView를 Pressable로 바꾸어 주었다.
(3) 추가적으로 알아낸 점
a. onPress 속성 내부에 함수를 적을 때 표현
ㄱ. 만약 onPress에 적히는 함수가 매개변수를 따로 전달 안하는 경우
// 셋 다 같은 가능함.
onPress(ExFunc)
onPress(() => Ex.Func())
onPress(() => {return Ex.func()})
// 이건 틀린 것. 익명함수로 적어주려면, 함수의 매개변수 부분도 무조건 적어줘야 한다.
onPress(() => Ex.Func)
하지만 익명 함수 형태 ()=> {} 로 적어주면 컴포넌트가 렌더링 할 때마다 새로운 함수를 만들기에 성능이 떨어질 수 있고, re-render 오류가 날 수 있다.
ㄴ. 매개변수를 따로 전달하는 경우
// 이 경우 무조건 다음과 같이 익명 함수 형태로 적어줘야 한다.
onPress{() => ExamFunc("매개변수")}
onPress{() => {return ExamFunc("매개변수")}}
b. return () 와 return {} 의 차이
return () 은 하나의 태그 혹은 하나의 값만 반환 하겠다는 소리이다.
return {} 은 다수의 반환도 ,으로 이으면 가능해진다.
return (
<View>
/*...*/
</View>
)
return {
setInput,
Input,
setSelectedDate,
selectedDate,
}
이건 함수를 쓸 시에도 비슷하다.
() => 명령문 하나 혹은 () => () 은 해당 명령문 하나, 혹은 괄호안에 든 하나의 태그, 값 만 반환하겠다는 소리이다.
복수의 내용이나 변수 선언등은 못한다.
반면 () => { return ~~} 형태는 return 전에 해당 함수에서 쓰일 변수들을 선언할 수 도 있고, 반환 값은 또 따로 적을 수 도 있다.
c. rendering 이란?
Html적 요소, react적 요소들이 눈에 보이도록 그려지는 것을 rendering이라 한다.
java, C++ 에서 run 한다는 것과 비슷한 표현이다.
d. Call-Back이란?
다른 코드의 인수로서 넘겨주는 실행 가능한 코드
// 여기서는 props가 call-back
const ExamFunc = (props) => {
}
2. 꾹 누를 시 삭제 구현
(1) 로직 설계도
(2) 코드리뷰
a. Alert.alert 함수에 대해
일단 onLongPress 가 () => {} 을 썻는데, return을 안 적어준 이유는 선언부 없이 내용이 하나라서 이다.
이 경우 return 안 적어줘도 유일하게 적힌 값을 반환한다.
Alert.alert 분석
Alert.alert("큰 msg", "큰 msg 밑에 주석(작은msg)", [
{text: "버튼 이름",
style: "cancel 이라면 취소 버튼에 맞는 스타일 제공"
onPress : () => {"해당 버튼 눌렀을 시 행동"}},
// 버튼은 객체 형태로 쭉 추가 가능
])
앞의 첫 두 인자는 메세지를 담당하고, 세번째 인자인 배열은 버튼을 원소로 담는다.
버튼은 전부 객체로 이루어져 있고, text, onPress를 적어주면 해당 버튼을 눌렀을 시 작동한다.
위의 예시에서 첫번째 객체가 onPress를 안 적어준 것을 볼 수 있는데, style: "cancel"이면 해당 버튼 누를 시 알아서 팝업창이 닫히는게 default다.
지금 우리는 renderItem 내부에서 해당 작업을 하고 있다.
renderItem은 배열의 내장함수인 map과 똑같은 기능을 한다.
우리는 지금 todo 낱개 하나하나에 onPress (누를 시 하는 동작)을 일일히 다 설정해주고 있는 것임을 잊으면 안된다.
3. 추가 버튼 구현
(1) 로직 설계도
(2) 코드리뷰
(3) 키보드의 return 키 눌러도 추가가 되도록 구현
위에 함수에서도 보이지만
OnSubmitEditiong이란 TextInput 태그의 속성을 사용하면 된다.
이는 () => {기능} 형태의 함수를 집어넣으면 되고, ( )은 Event 발생 시를 가르킨다.
여기서 Event는 키보드의 return 키를 누르는 것을 의미하므로
해당 버튼 누를 시 { }안의 기능을 한다.
(4) 값 제출하고 난 뒤에는 input 창 깔끔하게 비우는 것 구현
아주 쉽게 resetInput을 구현한다.
resetInput 은
이벤트 발생 (여기선 해당 함수 호출) 시 Input을 비운다로 구현하였다.
(5) 값 제출하고 키보드가 자동으로 내려가는 것 방지
TextInput의 해당 속성을 false로 바꾸면 해결된다.
(6) input 창 눌렀을 때 화면이 자동으로 todoList 맨 끝으로 내려가도록 하기.
먼저 useref()에 대해 이해해야 한다.
https://velog.io/@jminkyoung/TIL-13-React-Hooks-useRef-%EB%9E%80
ref라는 useref를 이용한 변수를 만들었다.
onClickReset이라는 컴포넌트를 보면,
다른 기능을 다 마치고 해당 ref.current.focus()라는 기능을 실행하라고 하였다.
이는 ref가 적힌 위치로 focus 하라는 뜻이다.
위 함수를 보면 input 태그에 ref가 적혀있다.
이 곳이 바로 ref의 current한 위치이다.
OnClickReset 컴포넌트가 실행되면 name 이라는 value를 가진 input으로 포커싱 된다.
그 나루토 아빠가 쓰는 인술이랑 원리가 같다.
이 함수는
flasListRes도 useRef를 대입한 변수인데(위의 예시의 ref랑 같음.)
해당 ref가 적힌 위치 값을 맨 끝까지 Scroll 하라는 뜻이다.
해당 컴포넌트를 onPressAdd, onSubmitEditing 에 넣어주면,
+로 값을 추가하는 경우, retrun 키보드 키로 추하는 경우 기능을 다하고 자동으로 리스트 맨 끝으로 포커싱 되는 것이다.
(7) 추가적으로 알아낸 점
TextInput의 onFocus 속성
해당 속성은 TextInput 칸에 초점이 맞춰졌을 때 {} 안에 함수를 호출하여 작동시키는 것이다.
onFocus도 위의 함수들과 같이. FlatList 맨아래까지 스크롤 하라는 내용의 함수를 호출하여 동작시키도록 설정했다.
따라서
input 창을 사용자가 눌렀을 때 (누른 것 === 초점을 맞춘 것)
화면이 자동으로 List 끝으로 이동한다.
'모바일 개발 > React Native-이론' 카테고리의 다른 글
캘린더 클론코딩 - toDo 적힌 날짜는 찐하게 표시 (0) | 2023.04.12 |
---|---|
캘린더Todo 클론코딩 - 달력에 선택된 날짜의 할 일만 나오게 하기 (0) | 2023.04.12 |
캘린더에 to do list 만들기, 컴포넌트 정리 (0) | 2023.04.11 |
ToDo캘린더 클론코딩 - Custom Hook으로 정리 (0) | 2023.04.08 |
캘린더 앱 클론코딩 -상단 바 화살표 및 날짜 눌렀을 때, 원하는 년,월,일로 갈 수 있게 하기 (0) | 2023.04.07 |