
💡구현 목표 - 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기 자식 컴포넌트로 아래 인자들을 prop로 전달하고 오른쪽 아이콘을 렌더링시킬지, 왼쪽 아이콘을 렌더링 시킬지 혹은 둘다 렌더링 시킬지 아래와 같이 조건문으로 분기 처리 전체 소스 import React from "react"; import {View, TouchableOpacity, StyleSheet} from "react-native"; import {useNavigation} from "@react-navigation/native"; import Icon from "react-native-vector-icons/Ionicons" import { defaultFontText as Te..

위와 같은 코드를 분석해 보면 거의 유사한 중복 코드가 작성되었다고 할 수 있다. 개발자는 언제나 간결하고 중복 없는 효율적인 코드가 필수이기 때문에 이런 경우 뷰 컴포넌트를 활용할 수 있다. 1. 컴포넌트란 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이다. 기본 HTML 엘리먼트를 확장하여 재사용가능한 코드를 캡슐화하는 데 도움이 된다. Vue.js에서 기본적인 프로그램 구현 방법은 화면 또는 기능을 적절하게 분리하여 컴포넌트화 시켜서 개발하고 이것을 연결하여 프로그램이 작동하도록 구현하는 방법을 사용한다. 각각의 컴포넌트 간 데이터의 이동은 단방향 이동만 가능함. 부모 컴포넌트에 있는 데이터를 자식 컴포넌트가 가져올 때에는 그냥 쉽게 부모 컴포넌트에 props로 변수에 값을 넣어주면 바로 자식..

🔍리덕스(Redux)란? state 상태 관리 library 리덕스는 자바스크립트 app을 위한 예측 가능한 (predictable) state container 이다. 리액트뿐만 아니라 Angular, jQuery, vanila JavaScript 등 다양한 framework와 작동되게 설계되었다. 즉, 리액트만을 위한 Library는 아니다. 🔍리액트에 리덕스가 필요한 이유? 리액트로 프로젝트 진행 시 Component 는 local state를 가지게 되고, 어플리케이션은 global state를 가지게 된다. ✅local state : 각각의 Component가 가지는 state. ✅global state : 어플리케이션 전체에서 global state는 유지, 즉 local state는 glob..