[TIL] 23Y01M26D

26 Jan 2023 in TIL

• Facts(사실, 객관)
• Feelings(느낌, 주관)
• Findings(배운 점)
  • Example Code
• Affirmation(자기 선언)
• Reference

Facts(사실, 객관)

---

RN을 이용하여 회사 프로젝트 진행 중 Toast창 출력이 필요하였다.

Feelings(느낌, 주관)

---

원래 작은 창을 띄우거나 할때 Modal창을 주로 썼었는데 Figma를 보니 창이 띄워지고 사라진다고 얘기를 하여서 Modal 대신 Toast창을 하기로 하였다. 학원에서 Java를 이용해 Android Studio에서 Toast를 한번 출력한적은 있지만 시간이 지나서 기억이 나지 않았고 이번에는 RN에서 해야하니까 구글링을 해야겠다는 생각이 들었다.

Findings(배운 점)

---

먼저 React native Toast 라이브러리를 설치해야했고 useRef를 이용해 특정 DOM을 건드려 화면에 출력하는 형식으로 이루어지는거 같았다. View 컴포넌트 안에 Toast 컴포넌트를 넣어서 사용해야했으며 버튼이 클릭했을 경우 useRef를 활용하여 DOM에 접근한 후 알림창을 출력하였다.

Example Code

const toastRef = useRef<any>();

<View>
	<TouchableOpacity onPress={() => toastRef.current?.show('Toast Test');}>
		<Text>
			Button
		</Text>
	</TouchableOpacity>
	<Toast
	  ref={toastRef}
	  position='top'
	  fadeInDuration={200}
	  fadeOutDuration={2000}
	  style={{ backgroundColor: 'rgba(0, 0, 0, 0.7)', borderRadius: 10 }}
	/>
</View>

Affirmation(자기 선언)

---

아직 useRef의 활용과 DOM에 대한 정확한 개념이 잡히지 않은 거 같다는 생각이 들어서 앞으로 웹의 기초부터 공부하면서 회사 프로젝트를 진행하여야겠다고 생각했다.

Reference

---

• https://www.npmjs.com/package/react-native-easy-toast