FrameWork (18) 썸네일형 리스트형 [ReactNative] KeyBord 이벤트를 감지하고, 콜백함수 등록 → kdybord 모듈을 사용하여 키보드 이벤트를 감지하고, 콜백 함수를 등록하는 방법 → ‘keyboardDidHide’ → 키보드가 숨겨졌을때를 감지 const handleKeyboardDidHide = () => { console.log('키보드가 닫혔어요.'); }; useEffect(() => { const keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', handleKeyboardDidHide ); return () => { keyboardDidHideListener.remove(); }; }, []); → ‘keyboardDidShow’ → 키보드가 나타날 때를 감지 const handleKeyboardDidHide = (.. [ReactNative] KeyBord 이벤트를 감지하고, 콜백함수 등록 → kdybord 모듈을 사용하여 키보드 이벤트를 감지하고, 콜백 함수를 등록하는 방법 → ‘keyboardDidHide’ → 키보드가 숨겨졌을때를 감지 const handleKeyboardDidHide = () => { console.log('키보드가 닫혔어요.'); }; useEffect(() => { const keyboardDidHideListener = Keyboard.addListener( 'keyboardDidHide', handleKeyboardDidHide ); return () => { keyboardDidHideListener.remove(); }; }, []); → ‘keyboardDidShow’ → 키보드가 나타날 때를 감지 const handleKeyboardDidHide = (.. [ReactNative] ReactNative 에서 사용하는 Tag, Optional 정리 1. : 레이아웃을 구성한다. 2. : 텍스트를 표시한다. numberOfLines={1} 및 ellipsizeMode="tail"는 텍스트가 한 줄을 넘어가면 자르고 "..." 을 표시하도록 설정해준다 3. : 이미지 표시 4. : 스크롤 구현를 사용한다. 5. ** : 리스트 데이터를 렌더링하는데 사용되는 컴포넌트 중 하나이다** 유저가 화면의 끝에 도달했을 때 새로운 데이터를 호출(fetch) 하여 비효율을 해결할 수 있게 한다. 효율적인 렌더링 : 화면에 보이는 아이템만 렌터링 하므로 성능이 향상된다. 리스트가 매우 긴 경우에도 효율적으로 처리가 가능 스크롤 지원 : 스크롤 동작이 자연스럽게 지원되며, 스크롤 위치에 따라 적절한 아이템만 렌더링 한다. code 예제 import React from.. [React] 속성 이름을 동적으로 설정 ( 표현식, 변수의 문자열 또는 결과 값 ) 속성 이름을 동적으로 설정해야 할때, 대괄호 를 사용하여 속성 이름을 설정할 수 있다. 이 기능은 계산된 속성 이름(computed property name) 이라는 ES6의 기능이다. 이를 통해 변수나 표현식의 결과를 속성 이름으로 사용할 수 있다. const todayDate = new Date().toISOString().split('T')[0]; const [selectedDate, setSelectedDate] = useState(''); [ReactNative] <Text/> ‘onPress’ 이벤트에 따른 기본 Gray background 없애기 React Native의 컴포넌트에서 발생하는 onPress 이벤트에 따른 기본 gray background를 없애려면 컴포넌트에 컴포넌트를 사용하여 감싸야 한다. 이를 통해 onPress 이벤트에 대한 기본 터치 피드백이 제거된다. [ 수정전 ] {setSelectedDate(date.dateString);}} style={[tw`border-red-900 h-full`]} > {date.day} [ 수정후 ] { setSelectedDate(date.dateString); }} > {date.day} [ReactNative] expo 웹에서 실행 1. expo 를 실행시키고 Terminal 에서 w 입력 2. 아래와 같이 문구가 나오면 해당 라이브러리를 설치해줍니다. npx expo install react-dom react-native-web @expo/webpack-config 3. 앱을 다시 실행시키고 Terminal 에서 w 입력 [React] 함수 매개변수와 외부 변수 간의 스코프(scope) 이렇게하면 const test ‘ message’ 를 직접 참조할때는 externalTest를 사용하고, 함수의 매개변수로 전달받은 test 를 사용할때는 그대로 test 를 사용할 수 있다. 매개변수는 함수에 입력값을 전달하는 데 사용된다. 함수가 어떤 작업을 수행하기 위해 필요한 데이터를 받아들이기 위한 매개변수를 정의한다. const externalTest = 'message'; const renderDayComponent = ({ date, selectedDate, test }) => { // 'test' 변수는 함수 내부에서는 매개변수로 전달된 객체의 test 속성을 가리킨다. // 함수 내부에서 외부의 const externalTest = 'message&#.. [React] 리액트에서 if문 , 조건부 렌더링 패턴 1. 삼항 연산자 (Ternary Operator) 가장 간단한 조건부 렌더링 패턴 중 하나 return ( {condition ? : } ); 2. && 연산자 && 연산자는 조건이 참일 때만 다음 값이 렌더링되도록 한다. return ( {isLoggedIn && } ); 3. 조건부 연산자 (Logical && Operator) JavaScript의 논리 연산자를 사용하여 조건에 따라 값을 반환할 수 있다. jsxCopy code return ( {isAdmin && } ); 4. 조건문 밖에서 렌더링 변수 설정 조건문 밖에서 변수를 설정하고, 그 변수를 사용하여 렌더링하는 방식이다. jsxCopy code let componentToRender; if (condition) { componentTo.. 이전 1 2 3 다음
