개발이 좋아서/React가 좋아서

react - useMemo/useCallback

Memoization 메모이제이션 function calculate(){ return 10 } 1) useMemo 계속 재연산하지 않고 연산된 값을 재사용하도록 함 useMemo(콜백함수, 의존성 배열) ex) const value = useMemo(()=>{ return calculate(); },[]) 2) useCallback 함수 재사용하기 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용 useCallback(콜백함수,의존성 배열)

react - rest(Representational State Transfer)

자원의 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미 웹의 기존 기술과 http프로토콜을 그대로 활용하여 웹의 장점을 최대한 활용할 수 있는 스타일이다. CRUD create 생성 post read 읽기 get update 수정 put delete 삭제 delete 클라우드 git add . git commit -m "서버 배포 준비 완료" git push https://www.heroku.com/ Cloud Application Platform | Heroku Heroku is a platform as a service (PaaS) that enables developers to build, run, and operate applications entirely in the cloud...

react - 파일 업로드 관리하기

npm install multer 업로드 이미지를 관리하는 스토리지 서버 multer const multer = require('multer'); const upload = multer({ dest: 'upload/'}) 이미지 파일을 post로 요청이 왔을 때 업로드라는 폴더에 이미지를 저장 app.post("/image", upload.single('image'), (req, res)=>{ const file = req.file; res.send({ imageUrl: file.path, }) }) api서버 데이터베이스 스토리지서버

react - 복습

상태가 변경될 때 리렌더링된다 1. useState(초기값) => [ state, setState ] * 상태값 관리 const newArr = useState(초기값) const state = newArr[0] const setState = newArr[1] const [ state, setState ] = useState(초기값) setState(변경된 값) 2. useReducer() * 어떤 경우에 상태가 어떻게 업데이트될 건지 관리 useReducer(함수, 초기값) => [ state, 함수를 실행시키는 함수] const [ state, dispatch ] = useReducer(reducer, initialstate) dispatch({ type: "DELETE_USER", id: 10, }..

react - 데이터 연동

웹브라우저 api 서버 데이터베이스 - mySQL 1. 데이터베이스 프로그램을 설치 2. 데이터베이스 생성 3. 테이블 생성 (데이터를 논리적으로 나누도록 컬럼을 설정) 4. 테이블에 데이터를 추가한다. sqlite 데이터베이스 - 개발용으로 많이 사용 - ORM(Object Relational Mapping) : 서버에서 데이터베이스를 손쉽게 다루도록 도와주는 툴을 의미함. - 데이터베이스 모델링을 쉽게 할 수 있음 - SQL을 사용하지 않고 CRUD작업을 할 수 있음 Sqlite와 Sequelize 사용하기 1. sqlite와 sequelize 설치하기 npm install sequelize sqlite3 2. sequelize 기본환경 설치 npm install -g sequelize-cli npx..

react - Common JS

react -> es6 node -> Common JS 모듈 1. es6 방식 1) 내보내기 export function hello(){ } function hello(){ } export default hello; 2) 불러오기 import hello from './hello.js'; 2. Common JS 방식 1) 내보내기 (export) function hello(){ } module.exports = hello; 2) 불러오기 (import) const hello = require('./hello.js') hello(); http status codes 200 성공 300 redirection 400 client error 500 server error https://developer.mozil..

react - 싱글페이지 애플리케이션(복습)(useState, useReducer, useContext)

한 개의 페이지로 이루어진 애플리케이션 상태 useState(초기값) => [ state, setState ] useState(10) => return [ state, f ] const stateArr = useState(10); const state = stateArr[0]; const setState = stateArr[1]; const [ state, setState ] = useState(10); function reducer(state, action) { switch(action.type){ case "CHANGE_USER": return { ...state, users: state.users.map(user=> action.id === user.id), } } } useReducer(reduc..

react - 중첩라우팅

중첩 라우팅 1. Outlet 사용 return ( 상품상세보기입니다. ) 2. 부모 Route의 path마지막에 /* 표시 ==> 중첩 라우터의 사용을 명시적으로 표시 자식 라우터는 부모 라우터 컴포넌트 안에 작성

react - API 연동하기(axios)

axios 라이브러리 axios 설치 yarn add axios npm install axios axios사용해서 get, put, delete 등의 메소드로 api 요청함 rest api get : 데이터 조회 post : 데이터 등록 put : 데이터 수정 delete : 데이터 제거 axios 사용법 import axios from 'axios'; 데이터 조회 사용법> axios.get(경로) ex) axios.get('/users/1'); 데이터 등록 사용법> axios.post(경로, 데이터정보) ex) axios.post('/users/',{ username: "green", name: "aaaa", }) useState와 useEffect로 데이터 로딩하기 useState 요청 상태를 관리 ..

react - 리액트 라우터

리액트 라우터 페이지 이동 * 기존 웹페이지는 여러개의 페이지를 사용 새로운 페이지를 로드하는 방식 서브페이지 * 리액트는 spa방식 새로운 페이지를 로드하지 않고 하나의 페이지안에서 필요한 데이터만 가져오는 형태를 가짐 * 라우팅 사용자가 요청한 url에 따라 해당 url에 맞는 페이지는 보여주는 것 * React-Router : 신규페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링해주는 라이브러리 설치하기 npm install react-router-dom yarn add react-router-dom 링크 클릭 시 컴포넌트에 active클래스를 붙여줌 * 클릭한 링크의 스타일을 지정할 수 있음. URL 파라미터 - 사용법 : 경로에 : 사용해서 설정한다...