[RN] react-native button으로 sort 정렬하기
·
React Native
1. Btn1을 누르면 해당하는 열이 오름차순 정렬 -> 내림차순 정렬 -> 디폴트 정렬2. Btn1을 눌러서 오름차순 정렬해놨다가 Btn2를 누르면 Btn2를 기준으로 오름차순 정렬 테이블 헤더 및 화살표 이미지 상태저장 const [selectedHeader, setSelectedHeader] = useState(null); const [arrowState, setArrowState] = useState(0); - 눌러진 열을 구분 할 수 있게 테이블헤더 상태를 useState를 활용하여 저장- 오름차순, 내림차순 구분을 하게 해주는 화살표 상태 저장 헤더 클릭시 아이콘 변경 const handleHeaderClick = (index: number) => { if (selectedHeade..
[RN] react-native tab navigation 스크린 이동 새로고침
·
React Native
options={{ unmountOnBlur: true }} 추가 unmountOnBlur: true옵션이 추가된 탭은 새로고침이 발생한다.
[RN] react-native navigation params 사용하기
·
React Native
Params란?화면을 구성할 때 함께 전달되는 매개변수(parameters)를 의미한다. Params 사용하기params를 사용하기 위해서는 두 가지 과정이 있어야 한다. 1. navigation.navigate() 함수의 두 번째 변수로 params를 전달해야 한다.navigation.navigate('RouteName', { /* params go here */ })params는 JSON직렬화가 가능한 형태를 추천한다.(보통 객체 형태로 전달한다.) 2. Screen의 구성요소에서 params를 읽어야 한다.function ScreenName({ route }) { /* route.params 으로 사용할 수 있다. */} Params 함수1. setParams()현재 화면의 매개변수를 동적으..
[RN] reanimated failed to create a worklet react native.. error
·
React Native
발생 상황react-native-reanimated 패키지를 추가하면서 발생 발생 원인babel.config.js에 reanimate 플러그인을 추가해주지 않아서 발생 해결 방안babel.config.js에 'react-native-reanimated' plugins 추가
[RN] react-native UseEffect (()=> {},[]); 사용법
·
React Native
UseEffect 란?사이드 이펙트(side effects)를 수행하기 위한 훅으로, 데이터 가져오기, 구독설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 작업 등을 수행할때 유용하다. 1. useEffect 기본 사용법useEffect(() => { // Side effects를 수행하세요. return () => { // cleanup 로직이 필요한 경우 여기에 작성합니다. };}, [/* 의존성 배열 */]); Side Effect 부분에 useEffect 동작 시 실행할 로직을 추가한다.그리고 의존성 배열 의 존재 유무 그리고 어떤 값이 들어가있는지에 따라 useEffect가 언제 동작하는지 결정된다. 2. useEffect Side Effect란?함..
[RN] react-native 댓글태그 지우기, Comments Tag remove, Back Space
·
React Native
//키패드 버튼으로 태그 지우기const removeTag = (event) => {if (event.nativeEvent.key === 'Backspace' && comment === '') { onResetReply && onResetReply();}}; {((replyItem?.userName || editTargetUser)) && ( //지우고자 하는 대상에 함수 적용 @{replyItem?.userName || editTargetUser} )} setComment(value)} onKeyPress={removeTag} value={commen..