form3 [React] 이미지 미리보기 form 만들기 페이지에서 이미지를 미리보기 하고 싶은 경우 사용할 수 있는 코드다 let reader = new FileReader(); if (form.values.imageUrl) { reader.readAsDataURL(form.values.imageUrl); reader.onloadend = () => { setImageSource(reader.result); }; } 비슷한 원리로 다른곳에도 적용이 가능하다 2023. 8. 31. [javascript] FormData 에서 form 쉽게 넣어주기 정석방법 비교 append , stringify ✔️ 정석 방법 let form = new FormData(); form.append("id","id"); form.append("password","password") ✔️ stringify 사용한 방법 data 구조 그대로 stringify 로 감싸주면 string 화 되면서 form 요소처럼 사용이 가능하다. stringify({id:id,password:password}) ✔️ axios 호출시 const { data } = await axios.post(`url`,stringify(params)); 2023. 8. 31. [React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시 useEffect 를 먼저 살펴보자면 리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다. 실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다. > useEffect 사용예시 useEffect(()=>{ // 실행 함수 넣어주는 곳 }, [ // 의존변수 넣어주는 곳 ]) useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를.. 2023. 4. 9. 이전 1 다음 반응형
