전체 글 (61) 썸네일형 리스트형 [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&#.. [ReactNative] Tailwind React Native Classnames 사용법 1. Install npm: tailwind-react-native-classnames npm i tailwind-react-native-classnames 2. 사용법 Educative Answers - Trusted Answers to Developer Questions import tw from 'tailwind-react-native-classnames' // tailwind & style // tailwind & StyleSheet const styles = StyleSheet.create({ text: { width: 120, paddingTop: 10, paddingRight: 10, paddingBottom: 10, paddingLeft: 0, color: '#4242.. [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.. [React] Component / & 모든 부모 컴포넌트의 속성을 그대로 전달하기 위한 문법 …props 는 해당 컴포넌트로 모든 부모컴포넌트에서 전달된 속성들을 그대로 전달하기 위한 문법이다. 이렇게 사용함으로써 Daycomponent 에서는 부모 컴포넌트에서 전달된 속성을 그대로 사용할 수 있다. 직접 각 속성을 나열하려고 한다면, 새로운 속성이 추가될때마다 일일이 수정해야 하기 때문에 유지보수가 어려워진다. …props 를 사용하면 부모컴포넌트에서 어떤 속성이든 자동으로 전달되므로 코드의 유연성이 높아진다. 그러나 특정한 속성이 있다면 해당 속성은 개별적으로 전달하는 것이 좋다. // parents ( )} style={styles.calenderWrap} /> // Children function DayComponent({ date, state, todos, setSelectedDate .. [React Native] AsyncStorage = localStorage 를 대신해 앱이 꺼져도 디바이스에 데이터 저장 ReactNative 에서는 브라우저와 다르게 웹의 ‘localStorage’ API를 직업 사용할 수 없다. AsyncStorage 를 사용해 로컬 스토리지와 유사한 기능을 구현할 수 있다 AsyncStorage 는 비동기식으로 데이터를 저장하고 불러오는 메서드를 제공한다. AsyncStorage 에는 문자열만 저장할 수 있다. (Json.stringify 사용) 🚧 AsyncStorage · React Native [ 사용법 ] AsyncStorage 설치 프로젝트 디렉토리에서 터미널을 열고 다음 명령어를 실행하여 AsyncStorage를 설치한다. npm install @react-native-async-storage/async-storage AsyncStorage 사용 // AsyncStorage.. 이전 1 2 3 4 5 6 7 8 다음
