리액트(react) 3

react 리액트 setState 바로 적용되지 않는 이유

[state, setState] = useState(); [state, setState] = useState(true); function handler(){ setState(!state); setState(!state); } 이렇게 사용할 경우 아무런 변화가 없을 걸 기대하지만 실제로는 true => false로 바뀌어 작용한다. 그 이유는 리액트가 컴포넌트를 불러올때 state의 값도 불러오기 때문에 setState(!true); setState(!true); 처럼 되는 셈이다. 그런데 [state, setState] = useState(true); function handler(){ setState((prev)=>!prev); setState((prev)=>!prev); } 와 같이 코드를 작성할 경..

리액트(react) 2024.01.21

리액트 public vs assets

리액트를 사용할 때 이미지 파일 같은 것들을 public 폴더와 assets 폴더에 넣곤 하는데 이 둘의 차이점이 무엇인지 궁금했다 차이점을 알아보자 Public 퍼블릭 폴더에 있는 데이터들은 빌드 과정에서 공개적으로 제공된다. 즉 접속하는 유저가 마음대로 접근할 수 있다는 뜻이다. 만약 public/image.jpg 라고 있다면 localhost:5173/image.jpg를 url로 하여 접근할 수 있다는 뜻이다. 그렇기에 코드내에서 사용할 때에도 처럼 사용할 수 있는 것이다 src/assets (정확히 말하면 assets폴더일 필요는 없고 src 폴더안에만 있으면 된다) 공개적으로 제공되지 않기에 유저가 접근할 수 없다 빌드 과정에서 최적화되어 제공하기 직전에 public 폴더에 '삽입'된다. 그렇기에

리액트(react) 2024.01.21

리액트의 훅 기능들 요약 react hooks

0. 훅의 규칙 함수형 컴포넌트,혹은 커스텀 훅 내에서만 사용가능 컴포넌트의 루트위치에서만 가능(중첩 함수안에서 사용 불가능) 1. useState() import {useState} from 'react' const [title,setTitle] = useState('초기값') setTitle('변경값') //title = 변경값 // 객체도 가능 const [item,setItem] = useState({name:'',count:0}) //기존의 값을 업데이트 하는 방식 setTitlte((이전값)=> ( name:이전값.name, count: 이전값.count+1 ) 현재 값의 스냅샷인 title과 이 값을 변경해주는 함수 setTitle 로 이루어진 배열을 반환 리액트에서 변수값 변경시 컴포넌트가..

리액트(react) 2023.08.14