React 강의 (6) 썸네일형 리스트형 Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지) lazy loading / React devtools 1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용. 메모리문제를 어느정도 보완이 가능하다 ex) function Clicked() { ... } lazy , Suspense 이용 import {lazy, Suspense} from 'react' let Detail = lazy( ()=> { return import('./Detail.js') } ); //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') ) → Detail를 호출/사용할 때 import 시킨다. 대부분 Suspens라는 걸 같이 쓰는데 => React Dev Tools 크롬 확장 프로그램으로 설치가능. React 내부 구조 보기 데이터 조작 렌더링 .. Coding Apple, React 강좌 내용 정리.17 - 2.Redux redux관련 저번 내용 Coding Apple, React 강좌 내용 정리.17 - Redux.1 2. Redux 다시.. Redux를 쓰는 이유? 1. 복잡한 props 사용을 줄일 수 있다. 모든 컴포넌트가 직접 데이터를 쓸 수 있다. 2. 데이터 수정이 용이하다 : state 데이터 관리가능. [여러 콤포넌트에서 사용하는 데이터를 한 번에 처리/관리] reducer 1. reducer만들기 : state의 수정방법을 미리 정의한다고 이해하자. 수정된 state를 리턴하는 함수라 이해. 단 무조건 state를 리턴해야 한다. 2. store만들때, reducer를 만들어서 넣으면 된다. 3. 데이터를 수정(요청)을 할 때는 dispatch() 를 쓴다. 조그만 사이트라면 오히려 React쓰는게 안 .. Coding Apple, React 강좌 내용 정리.17 - Redux.1 Redux 컴포넌트간에 줄줄이 엮어서 사용하는 props 대신에 redux라는걸 사용할 수 있다. 연결된 컴포넌트들이 state의 공유가 가능하다. Redux 사용하기 위한 순서 1. 설치 터미널에서 npm install redux react-redux 2 . 사용 준비 in code import {Provider} from 'react-redux' // Provider 생성 import { createStore } from 'redux' // redux 생성 필요한 부분을 감싸기 - 로 state를 공유할 대상을 ( ) 감싼다 - 공유할 state를 createStore 함수로 생성한다. let store = createStore( state를 가져오고 리턴하는 함수() ); - createStore로.. Coding Apple, React 강좌 내용 정리.14 - Ajax in React Ajax (Asynchronous JavaScript and XML) 서버에 새로고침없이 요청을 할 수 있게 해준다 서버? 누군가 페이지 요청을 하면 페이지를 전송해주는 프로그램 요청? 여러 종류가 있으며 GET : 특정 페이지 / 자료읽기 등 범용적. 주소에 값을 붙여서 보내는 것들 POST : 주소에 값을 붙이지 않고, 암호같은 중요 정보 전달할 때 사용 GET / POST 요청 할 때마다 항상 새로 고침됨. ajax를 쓰면, 새로 고침없이 내용 수정 등이 가능하다. jQuery 설치해서, $.ajax() 사용 axios 설치해서 axios.get() 사용 일반 자바스크립트 이용해서 fetch() 사용 이 강의는 2번 axios 설치해서 사용하기로 설치 : npm install axios { axio.. Coding Apple, React 강좌 내용 정리.13 - useEffect 훅(hook) useEffect 훅 import React, {useState, useEffect } from "react" 컴포넌트가 mount, update 될때 특정코드 실행할 수 있다 useEffect(() => { console.log("11111"); }); ex) 3초뒤에 alert창을 안 보이게 하는 걸 만들고자 할 때 1. UI 보이고/안보이고하는 상태를 state로 저장 let [alert, alert변경] = useState(true); 2. 조건식으로 state가 true일때만 보여줌 { alert === true ? 재고가 얼마 남지 않았습니다. : null } 3. useEffect 내용 추가 setTimeout 함수를 이용해서, 2초뒤에 useState(false)를 실행한다. useEffe.. Coding Apple, React 강좌 내용 정리.3 - state React에서 state를 쓰는 이유, 방법을 알아보기 데이터를, 변수 (let , var)에 넣거나 state (useState() 이용해서) 에 넣거나 state 만드는 방법 1. import React, {useState} from 'react' - React에 있는 함수를 쓰겠다. useState를 쓰기 위해서 2. useState('저장할 값') * ES6 destructuring 문법 중에서 이 2개 데이터를 변수에 담고 싶으면 var [a, b] = [10, 100]; // var a = 10 , var b = 100 import React, {useState} from 'react' import logo from './logo.svg'; import './App.css'; function .. 이전 1 다음
