Toggle버튼, 꾹 누를 시 삭제, 추가 버튼 구현

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

[TIL #13] React (Hooks) - useRef 란?

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 끝으로 이동한다.