본문 바로가기

React Native

 (15)
React #10 - context API, recoil/zustand 찍먹 다른 컴포넌트인 Right3에서 Left3에 있는 count를 조작하고자 할때, count는 이들의 부모인 App단에서 상태 관리가 이루어져야 한다!!! HOW? 방법 1. prop 드릴링을 통해서 밑으로, 밑으로, 밑으로 자식에게 전달해서 Left3에게 전달하는 것이다. 트리 구조의 뎁스가 긴 경우, 복잡해질 수 있다. 방법 2. contextAPI를 사용! contextAPI 1. context 작성 2. 자식 컴포넌트에서는 useContext를 사용해서 작성한 context를 불러온다 3. 부모 컴포넌트에서는 provider를 import해서 전달할 자식컴포넌트들을 감싸준다. 1. context.jsx 를 작성한다. [CounterContext.jsx] import {createContext, us..
React #7 - 리엑트훅(useMemo, useCallback) 성능 최적화를 할 수 있는! 고도화 작업을 할 수있는 리액트 훅 useMemo 객체 or 함수에 씌워줄 수 있다 : 어떠한 '값'을 memoize 1. 함수의 실.행.결.과 를 memoization 한다! 함수를 수행할 매개변수 값이 변화하지 않는 경우 == 결과값이 같은 경우에는 렌더링X 2. 객체(참조) 때문에계속해서 새로운 객체가 생성되는 것을 방지하면서, 객체 내의 value 값이 변화하는 경우에만 렌더링 import { useMemo, useState } from "react"; // 지정한 수가 소수인지 여부를 반환 var isPrime = function (num) { console.time('소요시간'); // 소수 판별 코드 let prime = true; for (let i = 2; i..
React #6 - 리엑트훅(useReducer, useRef) UseEffect - 사이드 이펙트를 사용할 때 쓰는 훅 매개변수 : setup 함수, [] 배열 생략 -> 항상 호출됨 빈배열 -> 최초 마운트 시에 호출된다. 지정값이 들어간 배열 -> 해당 값이 변경된 경우에만 setup함수 호출 reduce 메서드 reducer reducer가 한번 호출될때마다 다음번 매개변수에 마지막 리턴값을 전달한다. state가 다음번 useReducer 될 때 업데이트 되는 것이다! 예제 1. 은행 (입금 /출금) 프로그램 import { useState } from "react"; import { useReducer } from "react"; import Button from "./Button"; const reducer = (state, action) => { swi..
React #5 - 표현컴포넌트, 리엑트훅 표현컴포넌트 & 컨테이너 컴포넌트 [표현 컴포넌트 예시 - 상태를 관리하지 않는 컴포넌트] (부모) import Header from "../../components/Header"; import Footer from "../../components/Footer"; import TodoContainer from "./TodoContainer"; function ListPage(){ return ( ); } export default ListPage; [컴포넌트 컴포넌트 예시 ] (자식) import {useState} from "react" import { produce } from "immer"; import Todo from "./todo"; //컴포넌트들이 직접 상태관리를 하던 거를 표현 컴포넌트와 ..
React #4 - immer, State, 회원가입 form 실습 깊은 복사를 수행해주는 라이브러리 dependencies 없음 (immer를 다운받으면 함께 다운되는 라이브러리 없음) npm i immer 로 다운로드 받기 가능 vite폴더 상위에 설치하면 된다! produce 함수 : 새로운 상태를 만들어서 반환해준다. 변경된 draft를 원래의 baseState와 비교를 하는 것이다. 다른 부분을 nextState에 저장해줌 immer 사용 [깊은복사 immer 미사용] const handleAddressChange = e => { //값이 변했으면~ 새로 target.name 적용해서 newAddressBook에 복사 const newAddressBook = user.extra.addressBook.map(address => { if(address.id === ..
React #03 - Counter 구현 vite 실행 후 network 가 제대로 통신 되어는지 확인 304 -> 동일한값으로 갱신된 것 200 -> 완료 부모컴포넌트에서 프로퍼티를 전달할 때 *props는 속성의 집합이다! 1.부모 컴포넌트 app에서 TItle, TodoList로 프로퍼티를 전달하는 것! 2. 통채로 전달하고 싶을 때 ㄴ 전개연산자로 props 전부를 전달한다. 컴포넌트는 jsx 를 리턴하는 함수 작은 단위로도 쪼갤 수 있다. (태그 하나하나) 컴포넌트 모듈화하기 (쪼개기) *모듈단위로 조갠다. [Header.jsx] function Header() { return ( Counter - React 파일 경로: {`ch${document.URL.split('/ch')[1]}index.html`} ); } export defa..
React #02 - 가상 DOM, React 시작하기, vite 상태가 변경되어서 뷰를 랜더링할때 브라우저 DOM에 바로 적용하지 않고 브라우저 DOM과 유사한 트리구조의 가상 DOM(자바스크립트 객체)을 먼저 수정한 후 수정전의 가상 DOM과 수정후의 가상 DOM을 비교해서 바뀐 부분만 브라우저 DOM에 실제 반영한다. 컴포넌트 function App(){ return( Simple Todo List - HTML :() React 공부 - 진행중 Nodejs 공부 - 완료 Javascript 공부 - 완료 ); } babel return Hello React with JSX; ->babel이 html로 작성된 해당 코드를 자동 변환하여 읽는다. ReactDOM.createRoot(document.getElementById('root')).render(); 앱 컴포넌..
React #01 - 기초 & todolist 비동기(Ajax) 복습 css 전처리기 : 번들러 : vite 리액트 vs 자바스크립트 : 자바스크립트를 모르면 리액트를 할 수 없다. 주차별 내용(일정은 변동 가능) 1주차 TodoList - vanillaJS Counter 프로그램 - 라이브러리 개발 TodoList - 라이브러리 이용 TodoList - React 2주차 리액트 란? 리액트 역사, 리액트 개발환경 설정, create-react-app, Vite 리액트 개발에 필요한 자바스크립트 문법 JSX, 가상 DOM, 리액트 랜더링 리액트 컴포넌트(함수형 컴포넌트, 클래스 컴포넌트)와 라이프 사이클 리액트 훅, useState, useEffect 3주차 리액트 훅, useRef, useReducer 리액트 훅, useMemo, useCallback 사용자 정의 훅 만..

티스토리툴바