qwef

서스펜스란 어떤 컴포넌트가 읽어야 하는 데이터가 아직 준비가 되지 않았다고 리액트에게 알리는 방법. 리액트에서 비동기 데이터를 읽어 오는 것을 표준화. 이거 리액트에서 ~~비동기 이렇게 하라고 제공해 주는데 왜 안돼냐.. 여튼 로딩방법 const [success, setSuccess] = useState(false); const [data, setData] = useState([]); useEffect(()=>{ axios.get(~~~~) .then((res)=>{ return res.date }) .then((data)=>{ setData(data); setSuccess(true); }) },[]) return( { success?( { data.map((el)=>{ return {el.name} }..

배열이나 객체의 속성들을 펼쳐서 주는 것. 예를 들어 배열 하나를 ...arr 하면 내부의 값을 쫙 개개로 뿌려줌 객체도 가능함 const [dbData, setDbData] = useState({ _id:'', name:'', belong:'', phone:'', status:'' }); const changeHandler = (e)=>{ setDbData({ ...dbData, [e.target.name]:e.target.value }); } 이렇게가 가능. e.target은 input인데 name이 보통 db의 열이름이랑 맞추니까. 그게 관례니까. 배열도 가능

되게 간단히 컴포넌트를 만들 수 있음. 저거는 외부 라이브러리라서 설치 해야 함. import 해야 한다. 외부 컴파일러. const TestData = styled.div` width:100%; height:100% backgroun-image:url(${props=>props.img}); ` 저런 식으로. 말 그대로 스타일된 컴포넌트 저거 컴포넌트라 props 쓸 수 있음. 이런 식으로. 컴포넌트라 img처럼 저렇게 속성 줄 수 있음.

import img02 from './images/img02.jpg'; function App() { return ( {/* */} // ); } 저렇게 4가지 방법, 아니 첫번째 저렇게 가져오는 건 문제. 걍 html에서 쓰듯이 하면 안됨. 저거 빼고 아래 3개 import 해서 가져오거나 아예 reqire 해서 가져오거나. 근데 그냥 public 폴더에 images 폴더 만들어서, 거기서 가져오는 게 좋음. process.env는 환경변수들 있는 객체인데, 거기서 PUBLIC_URL 이 public 폴더 url임.

import React, { useEffect, useState } from 'react' function Test(){ const [users, setUsers] = useState(null); const [loading, setLoading] = useState(true); useEffect(()=>{ fetch("http://localhost:4000/users") .then((res)=>{ return res.json(); }) .then((data)=>{ setUsers(data); setLoading(false); }) .catch(err=>{ setLoading(false); console.log(err); }) },[]) console.log(users); return( {loading?n..

이거는 들어온 값이 바뀔 때 마다 호출됨. 이거는 값이 바뀌면 감지하고 그걸 return해 준다. useEffect는 배열로 반환을 하는데, useEffect에 들어가 있는 배열을 의존성 배열이라고 한다. useEffect 구조 useEffect(()=>{}, []) 이렇게 useEffect(콜백, 배열); 저 배열안에 무언가 있냐 없냐에 따라 create로 동작하냐, update로 동작하냐. 콜백은 create나 update 하는 순간 실행하고 싶은 내용들. 저 배열은 반환하고 싶은 값들 넣으면 됨. update 되었을 때 보통 저기에 fetch 등해서 나오는 값을 받아 놓음. 그러면 딱 불러왔을 때 값이 바뀌면서 그걸 감지해서 콜백을 실행함. const [count, setCount] = useSta..

1. 컴포넌트 호출 2. 생성자 호출 3. render() 호출 4-1. ComponentDidMount() 4-2. ComponentDidUpdate()

이건 어쩔 수 없음. 부모를 통해서 가야 함. function App() { const [count, setCount] = useState(0); const handlerCount = (value)=>{ setCount(count+value); } return ( ); } 이렇게 하고 function Viewer({count}) { return ( 현재 카운트 {count} ); } 뷰에서는 저렇게 그냥 그대로 쓰면 되고. 이미 useState() 상태로 들어온 거라 (아마?) function Controller({handlerCount}) { return ( {handlerCount(-1)}}>-1 {handlerCount(-10)}}>-10 {handlerCount(-100)}}>-100 {handl..

원래 onClick 하면 event였나? 이벤트가 기본으로 들어가서 인자 전달을 못했음 근데, {handlerCount(-1)}}>-1 이렇게 하면 인자 넣을 수 있음. (e)=>{} 하면서 이벤트 씹고 내용은 그냥 내가 하고 싶은 함수 호출하는 느낌.

%PUBLIC_URL%/ 이렇게 하면 됨.