odada

React Native 심화 📚1. 네비게이션Stack Navigation// 기본 스택 네비게이션 설정import { NavigationContainer } from '@react-navigation/native';import { createStackNavigator } from '@react-navigation/stack';const Stack = createStackNavigator();function App() { return ( );}Tab Navigationimport { createBottomTabNavigator } from '@react-navigation/bottom-tabs';const Tab = createBott..

React Native 시작하기 📱목차React Native 소개개발 환경 설정기본 컴포넌트기본 기능 구현실습 예제다음 학습 주제학습 팁 💡공식 문서를 자주 참고하세요Expo Snack으로 코드를 실험해보세요작은 프로젝트부터 시작하세요컴포넌트를 재사용 가능하게 설계하세요스타일링에 시간을 투자하세요1. React Native란?https://reactnative.dev/https://expo.dev/React Native는 페이스북이 개발한 모바일 앱 개발 프레임워크입니다. React의 문법을 사용하여 iOS와 Android 앱을 동시에 개발할 수 있습니다.장점하나의 코드로 iOS/Android 개발 가능JavaScript/React 지식 활용 가능빠른 개발 속도와 실시간 미리보기 (Hot Reload..

React Recoil리액트의 하나의 컴포넌트에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 여러 방법이 있습니다.state 와 props를 사용해서 컴포넌트 간에 데이터를 전달React Context API를 사용해서 컴포넌트 간에 데이터를 전달Redux, MobX, Recoil 등의 상태 관리 라이브러리를 사용Recoil이란Recoil은 React 상태 관리를 위한 라이브러리로, 전역 상태를 관리하기 위한 간단한 방법입니다.Recoil은 atom과 selector를 사용하여 상태를 관리합니다.Recoil 문법atom을 사용하여 상태를 생성합니다.useRecoilState를 사용하여 상태를 사용합니다.selector를 사용하여 파생된 상태를 생성합니다.Recoil 사용..

조건부 렌더링 (Conditional Rendering)조건부 렌더링은 특정 조건에 따라 다른 결과를 보여주는 것을 말합니다.React에서는 삼항 연산자나 && 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.1. 삼항 연산자삼항 연산자는 조건에 따라 다른 값을 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; return {isLogin ? 로그인 중 : 로그인 해주세요};}export default App;2. && 연산자&& 연산자는 조건이 참일 때만 결과를 반환하는 연산자입니다.import React from 'react';function App() { const isLogin = true; retur..

React의 핵심 개념React를 시작하는 개발자들을 위한 핵심 개념들을 정리해보았습니다. react의 핵심 개념을 이해하고, 실제 프로젝트에 적용해보면서 경험을 쌓는 것이 중요합니다.리액트 홈1. React란?https://odada.me/250React는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.리액트는 하나의 html 페이지만 존재하는 웹사이트(웹애플리케이션)으로 다른 컨텐츠 페이지를 불러들어오는 구조입니다.이미지출처: 소플의 리액트- 설치node.js 설치 후, 터미널에서 아래 명령어로 설치합니다.npx create-react-app@latest ./- 실행npm start1. 컴포넌트 (Components)https://odada..

Redux로 전역 상태 관리하기Redux 소개Redux는 상태 관리 라이브러리로, React와 함께 사용하기 좋습니다. Redux를 사용하면 컴포넌트 간에 상태를 쉽게 공유할 수 있습니다.- Redux 특징Single Source of Truth: 애플리케이션의 상태는 하나의 스토어에 저장됩니다.State is Read-Only: 상태를 직접 변경할 수 없습니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.Changes are Made with Pure Functions: 상태를 변경하는 함수인 리듀서는 순수 함수여야 합니다.- Redux 구조Actions: 상태 변경을 위한 객체Reducers: 상태를 변경하는 함수Store: 애플리케이션의 상태를 저장하는 객체store/|-- acti..

Chakra-ui로 스타일링하기 0. Tailwind CSS vs Chakra UI - Tailwind CSS Tailwind는 유틸리티 클래스를 제공하여, HTML 내에서 직접 스타일을 적용할 수 있게 해줍니다. 이는 빠르게 프로토타이핑을 할 수 있게 해주며, CSS 파일을 별도로 관리할 필요가 없습니다. - Chakra UI Chakra UI는 컴포넌트를 제공하여, 컴포넌트를 사용해 스타일을 적용할 수 있게 해줍니다. 이는 컴포넌트를 사용해 스타일을 적용할 수 있어, 컴포넌트를 재사용하기 용이하며, 테마 설정을 통해 쉽게 스타일을 적용할 수 있습니다. - Tailwind CSS와 Chakra UI를 함께 사용 Tailwind CSS와 Chakra UI를 함께 사용하여, Tailwind CSS의 유틸리..

1. styled-reset styled-reset은 CSS 초기화 라이브러리로, 브라우저별 기본 스타일을 초기화할 수 있습니다. styled-reset 사이트 - 설치 npm install styled-reset yarn add styled-reset - 사용법 // src/App.js import React from 'react' import Routers from './components/Routers' import { Reset } from 'styled-reset' const App = () => { return ( {/* 초기화 */} ) } export default App 2. styled-components styled-components는 CS..

리액트 ES6 문법 정리 리액트는 ES6 문법을 사용하여 개발합니다. ES6는 자바스크립트의 표준 버전으로, 보다 간결하고 효율적인 코드 작성을 가능하게 합니다. 이번 장에서는 ES6 문법을 정리하고, 리액트에서 사용하는 주요 문법을 알아보겠습니다. 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. 변수란 데이터를 담는 공간을 의미합니다. 변수를 선언할 때는 var, let, const 키워드를 사용합니다. let : 재할당할 수 있는 변수를 선언할 때 사용한다. 값을 변경할 수 있다. const : 상수를 선언할 때 사용한다. 값을 변경할 수 없는 값을 명확하게 표시할 때 사용한다. 의도치 않은 값 변경을 방지한다. var : 변수를 선언할 때 사용한다. ES6 이전에 사용하던 키워드로..