본문 바로가기

반응형

전체 글

(73)
[React] Hook 정리 useState() useState() : state를 사용하기 위한 Hook, 상태를 관리해주며 값이 변하면 렌더링이 일어남 (최상위에서만 Hook호출이 가능하며, 리액트 함수 컴포넌트 내에서만 호출이 가능함) 특징) state 변화 -> 렌더링 -> 컴포넌트 내부 변수 초기화 사용법 const [변수명, set함수명] = useState(초기값); getter:값가져옴 setter:값변경 import React from 'react'; const Test10 = () => { let count = 0; return ( 총 {count}번 클릭했습니다. count++}>클릭 ); }; export default Test10; count를 함수의 변수로 선언해서 사용하면 버튼을 클릭 시 카운트 값은 증가..
Firebase cors 에러 cors 에러 https://stove99.github.io/etc/2021/06/09/firebase-storage-cors-setting/ Firebase Storage CORS 설정하기 Firebase Storage 에 저장된 이미지를 base64 인코딩 할려고 fetch() 메소드로 이미지 데이터를 가져오려고 했으나 CORS 오류가 났다. stove99.github.io
[React] 다중 파일 전송 material ui, axios 1. FORM 작성 material ui를 사용하여 form을 작성하였다. TextField는 input과 같은 속성을 가지고 있으며 pdf,img 외에는 파일을 올릴 수 없도록 설정하였다. 그리고 다중 파일을 업로드 하려면 multiple 속성은 반드시 붙여야한다. 작성완료 {confirmOpen && ( onConfirm(files)} /> )} 2. formData 객체에 담기 파일업로드를 누르면 onUploadImage 함수가 실행이된다. onChange onChange함수는 이벤트 객체 e를 파라미터로 받아와서 사용할 수 있는데, 이 객채의 e.target은 이벤트가 발생한 DOM인 input DOM을 가르키게 된다. 즉, DOM의 value값, e.target.value를 조회하면 현재 inp..
[React] useReducer 사용법 useReducer이란? useReducer은 State(상태)를 관리하고 업데이트하는 useState를 대체할 수 있는 Hook이다. useState로 상태를 관리하면되지 굳이 useReducer를 사용하는 이유는 뭘까? useReducer 한 컴포넌트 내에서 state를 업데이트 하는 로직 부분을 그 컴포넌트로부터 분리시키는 것을 가능하게 해주는 것이다. useReducer는 state 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해준다. Hooks API Reference – React (reactjs.org) Hooks API Reference – React A JavaScript library for building user interfac..
[React] useEffect 사용하여 검색하기 useEffect( () => { setData(user.filter(item => item.name.includes(text))) },[text]) user의 데이터를 filter하여 text에서 일치하는 검색어를 보여준다. -> (원본에서 검색) user가 아니라 data로 filter를 하게 된다면, 원본에서 검색하는 것이 아니라 data안에서 검색하는거라 처음에만 일치하는 데이터가 나오고 두번째부터는 일치하는 데이터가 나오지 않는다!!! import React, { useEffect, useState } from 'react'; const user = [ { id:1 , name: '이나영'}, { id:2 , name: '김태희'}, { id:3 , name: '다음'}, { id:4 , nam..
[React] react에서 비동기 처리하기 (fetch, axios) fetch window object에서 정의되어 있으며, fetch는 ES6부터 Javascript의 내장 라이브러리로 들어왔다. promise기반으로 만들어졌으며, 별도의 설치 없이 모던 브라우저에서 사용 가능하다. useEffect( () => { fetch('https://jsonplaceholder.typicode.com/posts') .then(res => res.json()) .then(data => setData(data)) },[]) useEffect(() => { const getData = async () => { const res = await fetch("https://jsonplaceholder.typicode.com/posts"); const data = await res.jso..
[React] 뒤로가기, 링크이동 navigate 함수, Link 함수 useNavigate() 페이지 전환 시 추가로 처리해야 하는 로직이 있을경우 useNavigate를 사용한다. ex) 로그인 버튼 클릭 -> 회원가입 사용자 : Main 페이지로 이동 -> 미가입 사용자 : Sign 페이지로 이동 useNavigate()문법 navigate('/주소') function App = () => { const navigate = useNavigate() return ( { navigate('/detail') }}>이동 ) } useNavigate() 이용해서 뒤로가기, 앞으로가기 //뒤로가기 navigate(-1)}> Go back //앞으로가기 navigate(1)}> Go forward Link 클릭 시 바로 이동하는 로직일 때 사용 ex) 상품 리스트에서 상세 보기 페..
[React] public 폴더의 용도 리액트로 개발을 끝내면 build라는 작업을 해주는데 지금까지 짰던 코드들을 한 파일로 압축해주는 것이다. src 폴더에 있던 코드, 파일들을 다 압축을 해주는데 public 폴더는 그대로 보존을 해준다. 그래서 형태를 보존하고 싶은 이미지, txt, json같은 파일의 경우는 public에 저장해주면 좋다. public 폴더에 있는 이미지 사용 public폴더에 이미지를 넣으면 import 안해도되고, /이미지경로로 사용하면되니 편하다. css파일에서도 /이미지경로로 사용하면 된다. 하지만 권장하는 방식은 다음과 같다. 리액트로 만든 html 페이지를 배포할때 codingapple.com 경로에 배포하면 아무런 문제가 없지만 codingapple.com/어쩌구/ 경로에 배포하면 /logo192.png ..

반응형