본문 바로가기

Front-end/React\RN21

React with Redux, Next.js, TypeScript - 1 컴포넌트, JSX, 속성, 상태 Udemy 강의 "React 완벽 가이드 with Redux, Next.js, TypeScript" 를 보고 정리하였습니다. 컴포넌트, JSX, 속성, 상태 기본개념 JSX JavaScript Syntax eXtension -> but 브라우저에 사용 불가능합니다. 그래서 브라우저에 도달하기 전에 개발 서버에서 변환됩니다. 리액트에서의 컴포넌트 컴포넌트 = 자바스크립트 함수 - 컴포넌트의 첫글자는 대문자, PascalCase(MyHeader) 커스텀 컴포넌트는 실제로 렌더링된 DOM에 나타나지 않습니다. 동적 값 출력 외부에 정의된 값들을 가져옵니다. import { CORE_CONCEPTS } from "./data.js"; import componentsImg from "./assets/compone.. 2024. 3. 6.
React 리액트 props 속성 전달과 구조분해할당 리액트를 배우면서 굉장히 유용하고 꿀 코드들을 정리하려고 합니다. 구조분해할당 은 JavaScript와 다른 프로그래밍 언어에서 사용되는 문법입니다. 이를 통해 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 됩니다. props 기본사용 function CoreConcept(props) { return ( {props.title} {props.description} ); } 이 함수는 props object를 가져와서 값을 구성하는 컴포넌트 입니다. App 함수 CoreConcept 컴포넌트에 object 를 만들어 호출하고 function CoreConcept(props) 에서 받습니다. 해당 값들은 또한 별도의 파일로 저장하여 사용할 수 있습니다. 별도 파일로 사용 data.js .. 2024. 3. 5.
글로벌 영역에서 색상관리 색상관리를 위한 js 파일 생성 colors.js const Colors = { primary500: '#72063c', primary600: '#640233', prmiary800: '#3b021f', accent500: '#ddb52f', primary700: '#4e0329' } export default Colors; 하드코딩 되어 있는 부분에서 사용 return return styles 부분에서의 사용 const styles= StyleSheet.create({ buttonOuterContainer:{ borderRadius: 28, margin: 4, overflow: 'hidden' }, buttonInnerContainer: { backgroundColor: Colors.primary500.. 2023. 8. 16.
게임 화면 작업 - 노치 고려해 SafeAreaView 활용, 제목 컴포넌트 생성 App.js return {/* 노치(카메라부분)에 콘텐츠가 가려지기 떄문에 SafeAreaView 사용은*/} {screen} ; 게임화면인 screen 을 SafeAreaView로 감쌌다. GameScreen.js 게임화면 import React from 'react' import { Text, StyleSheet, View } from 'react-native' import Title from '../components/Title' function GameScreen(props) { return ( 게임 스크린 업 or 다운 ) } export default GameScreen const styles = StyleSheet.create({ screen: { flex: 1, padding: 24 } .. 2023. 8. 15.
리액트네이티브, 화면 전환 StartGameScreen.js function StartGameScreen({onPickNumber}) { const [enteredNumber, setEnteredNumber] = useState(''); function numberInputHandler(enteredText) { setEnteredNumber(enteredText); } function resetInputHandler() { setEnteredNumber('') } function confirmInputHandler() { const chosenNumber = parseInt(enteredNumber); if(isNaN(chosenNumber) || chosenNumber 99) { Alert.alert( '메시지', '입력을 확.. 2023. 8. 14.
리액트네이티브, 입력 검증 StartGameScreen.js import { TextInput, View , StyleSheet, Alert} from 'react-native'; import PrimaryButton from '../components/PrimaryButton'; import { useState } from 'react'; function StartGameScreen() { const [enteredNumber, setEnteredNumber] = useState(''); function numberInputHandler(enteredText) { setEnteredNumber(enteredText); } function resetInputHandler() { setEnteredNumber('') } functi.. 2023. 8. 8.
리액트네이티브, 숫자 맞추기 앱 (커스텀 버튼, 누르기, 배경화면) App.js import { StyleSheet,View } from 'react-native'; import StartGameScreen from './screens/StartGameScreen'; export default function App() { return ; } const styles = StyleSheet.create({ rootScreen: { flex: 1, backgroundColor: '#ddb52f' } }); 앱 화면 구성 StartGameScreen.js import { TextInput, View , StyleSheet} from 'react-native'; import PrimaryButton from '../components/PrimaryButton'; function.. 2023. 8. 7.
리액트네이티브, 목표추가 모달, 추가, 지우기, 이미지 새 목표 추가 버튼 클릭 모달로 입력 창이 나타나고 목표추가 추가 완료시 모달창이 사라지고 다시 메인 창이 보여짐 화면 크기 이상 늘어날 시 스크롤 기능 작동 App.js import { useState } from 'react'; import { StyleSheet, View, FlatList, Button} from 'react-native'; import { StatusBar } from 'expo-status-bar'; import GoalItem from './components/GoalItem'; import GoalInput from './components/GoalInput'; export default function App() { const [modalIsVisible, setModal.. 2023. 6. 14.
리엑트네이티브 프로퍼티, 컴포넌트 나누기 GoalItem 부분 나누기 App.js const addGoalHandler = () => { setCourseGoals((currentCourseGoals) => [ ...currentCourseGoals, { text: enteredText, id: Math.random().toString() }, ]); } { return ; }} keyExtractor={(item, index) => { return item.id; }} alwaysBounceVertical={false} /> GoalItem.js import { StyleSheet, View, Text } from "react-native"; function GoalItem(props) { return ( {props.text} ); } ex.. 2023. 5. 22.
리액트네이티브 스타일링, FlatList 리액트 네이티브 디버 npm install --save @react-native-community/cli-debugger-ui $ react-devtools 애뮬레이트 실행 or 재실행(ctrl + m - Reload) 그러면 이렇게 React 개발할 때 사용하던 devtools 가 작동됩니다. 컴포넌트의 주요 역할 다른 자식 컴포넌트들을 구조화하고 묶음 HTML 요소 (div, p ,input) 과 같은 요소 사용불가 > 웹이 아니기 때문에 네이티브 views로 컴파일할 수 없음. 컴포넌트 스타일링과 CSS 관계 React Native 컴포넌트 스타일링은 CSS의 영향을 받아 만들어짐 const styles = StyleSheet.create({})을 사용하는 이유 StyleSheet를 통해 유효성 검.. 2023. 5. 21.
리액트 포털 createPortal, HTML 이동 리액트 포털 ! 렌더링된 HTML 내용을 다른 곳으로 옮기는 것 일반적으로 컴포넌트를 사용하는 곳에서는 createPortal 을 사용하여 해당 컴포넌트의 HTML 내용을 포털을 통해 이동시킬 수 있다. 입력 오류시 나타나는 배경흐림과 모달 컴포넌트를 index.html 내에 옮길 것이다. index.html backdrop-root overlay-root 추가 ErrorModal.js import React from 'react'; import Button from './Button'; import Card from './Card'; import classes from './ErrorModal.module.css'; import ReactDOM from 'react-dom' const Backdrop .. 2023. 1. 11.
리액트 커스텀 컴포넌트 리액트 커스텀 컴포넌트 리액트에서 주로 컴포넌트를 재사용을 하는 것이 중요한 것 같습니다. 그래서 UI 컴포넌트를 재사용하는 것을 기록하려고 합니다. return ( Username 나이 유저 추가 ); 여기서 button 태그를 기본 html 태그를 사용하고 있는데 여기에 css 속성을 붙이고 해당 버튼 컴포넌트를 재사용하기 위해 커스텀 버튼 컴포넌트를 생성하여 사용하려고 합니다. Card 컴포넌트 경우 태그 안에 오는 컴포넌트를 css 적용시키게끔 작성 import React from 'react'; import classes from './Card.module.css'; const Card = props => { return ( {/* AddUser */} {props.children} ); }; .. 2023. 1. 10.

티스토리툴바