정신과 시간의 방

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다.