Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

React로 라이브러리 없이 여러곳에서 재사용할 수 있는 간단한 모달창 만들기! // App.jsx import { FaRegTrashAlt } from "react-icons/fa"; import Modal from "./components/Modal"; function App() { return ( 삭제하기 ); } export default App; 먼저 상위 컴포넌트에 위처럼 버튼을 만들어주고, components 폴더를 생성해서 버튼을 눌렀을 때 나오는 Modal 컴포넌트를 불러오기 다음 Modal 컴포넌트에서 스타일링과 열고 닫는 기능을 작성할건데 // Modal.jsx import { IoClose } from "react-icons/io5"; const Modal = ({ isOpen, o..

2024. 1. 2.

React, Next

엄청 간단한 엑셀 저장 기능을 구현할 수 있는 라이브러리를 발견했다! https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4230 other projects in the npm registry using xlsx. www.npmjs.com npm install xlsx xlsx 라이브러리를 설치해주기 다른 기능도 많지만, 정말 간단하게 버튼을 클릭하면 데이터를 엑셀로 저장하는 기능을 구현하기 위..

2023. 12. 29.

React, Next

ScrollView 컨테이너의 사용 가능한 공간을 넘어가면 스크롤 할 수 있어야하는데 웹에서는 공간을 넘어가면 기본으로 스크롤바가 나타나서 스크롤이 되지만, 모바일 앱은 그렇지 않다. 스크롤할 수 있게 만들려면 컴포넌트를 사용하면 된다. import { ScrollView } from "react-native"; export default function HomeScreen() { return ( ) } 만약 원래 있던 View 대신 ScrollView를 사용한다면 스크롤은 되겠지만, 원래 있던 공간배치, 레이아웃이 달라지게 된다. 스크롤 가능한 영역은 부모 요소의 크기에 따라 결정되기 때문에 위에 View로 한 번 더 감싸줘서 부모의 높이를 설정하는 style을 적용하던가, 직접 ScrollView의..

2023. 12. 8.

React, Next

api 요청 시 API KEY 등 중요한 정보를 노출하지 않을 때나, 다양한 변수를 저장하기 위해서 환경변수를 설정하면 쉽게 관리할 수 있다. react-native-dotenv 라이브러리를 설치하고 babel.config.js 파일도 추가해줘야한다. module.exports = function (api) { api.cache(true); return { presets: ["babel-preset-expo"], plugins: [ ... [ "module:react-native-dotenv", { moduleName: "@env", path: ".env", blacklist: null, whitelist: null, safe: true, allowUndefined: true, }, ], ], }; };..

2023. 12. 6.

React, Next

Navigation이란? 네비게이션이란 여러 화면 간 이동할 수 있도록 하는 것을 의미하는데 웹 브라우저에서 네비게이션은 URL을 입력해서 특정 페이지에 도달하고 링크를 사용해서 하위 페이지로 이동하는 개념이지만, 모바일 앱에선 버튼을 눌러서 한 화면에서 다른 화면으로 이동하거나 이전 화면으로 돌아가는 식이다. 프로젝트를 생성하고 아래 패키지 설치하기(Expo 기준) npm install @react-navigation/native-stack npm install @react-navigation/native Navigator 설정 // App.js import AppNavigation from "./src/navigation"; export default function App() { return ; ..

2023. 12. 5.

React, Next

이벤트 처리 방식은 웹용 React와 같은 방식으로 작동한다. 이벤트 핸들러 함수에 연결 후 useState훅을 사용해서 컴포넌트에서 state를 관리한다. 사용자가 내용을 입력 후 추가 버튼을 누르면 내용 보여주는 앱 만들기 export default function App() { const [enterText, setEnterText] = useState(""); function inputHandler(enteredText) { console.log(enteredText); } return ( 내용 ); } 사용자가 TextInput에 내용을 입력할 때 해당 입력값을 가져오기 위해서 inputHandler라는 함수를 만들기 이 함수를 연결하기 위해서 RN에서 컴포넌트에 제공하는 onChangeText..

2023. 11. 27.