SimCoding

[React] useMemo 사용이유와 코드예시 * useMemo 가 하는일 > 연산결과를 memoization한다. > 의존값이 바뀌었을 때만 연산을 실행하고, 값이 바뀌지 않았다면 연산을 실행하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 값을 사용한다. * useMemo 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 계산을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useMemo 예시코드 // useMemo(callback,[depth]) 의존값을 depth에 넣어준다. // depth의 값이 바뀔때 마다, 이전에 캐싱된값과 비교해 값이 다를경우..

예시 코드와 주석을 보면서 Formdata에 이미지파일 넣는 방법을 확인해 보자 ! 아래 코드를 통해 Formdata에 이미지 파일 넣는방법, 미리보기 이미지 생성/삭제 방법을 확인 할 수 있다. @ input태그 동적으로 생성하기. // map 함수를 활용해 , type="file"인 input을 동적으로 생성해준다. ... ImageUploader.jsx return ( {OrderList.map((item, index) => { return ( { handleImage(e, index); }} key={`ImgUploadInput_${index}`} id={`main_img_${index}`} type="file" accept="image/*" /> ) )}}) @ handleImage함수로, on..

React Hooks - useEffect() 를 활용한 렌더링 관리. useEffect함수가 실행되는 4가지 경우에 대한 예시코드입니다. 1. Component가 Mount 될 때 useEffect(()=>{ console.log('컴포넌트 마운트') },[]) 2. Component가 Unmount 될 때 useEffect(()=>{ console.log('컴포넌트 마운트') // return -> 언마운트시 실행 return console.log('컴포넌트 언마운트') },[]) 3. Componet가 Rerendering 될 때 마다 useEffect(()=>{ // depth가 없는 경우 렌더링 될 때마다 실행된다. console.log('렌더링 될 때 마다 실행') }) 3. Component..

1. [React] React, HTML 에서 dataset을 활용해 Dom요소에 값 저장하기. @ dataset : Dom요소에 값 저장하기 지정 : = “지정” data-이름 불러오기 : Dom.dataset.name data- 뒤에 사용불가능 : 대문자 영문 data- 뒤에 사용가능 : 소문자 영문, 점(.), 하이픈(-), 로우데시(\_), 콜론(:) @ 예시 코드를 통해 dataset사용법을 확인해 보도록 하자. function Dataset() { const onClick = (e) => { const name = e.target.dataset.name; console.log(name); // Eungwang }; return ( 클릭 ); }

1. [React] 리액트 Reack-Hook-Form 이번에, 리액트로 프로젝트를 진행하면서 폼을 어떤식으로 다루면 좋을지에 대해 서칭하던중 Reack-Hook-Form 이라는 엄청나게 유용한 Hook을 알게 되었다. Reack-Hook-Form에서 useForm을 이용하면, 폼을 다루는데 있어 불필요한 렌더링을 막아주고 내장 되어있는 validation을 활용할 수도 있다. 이 외에도 정말 편리한 기능들을 많이 제공하고 있다. React-Hook-Form 공식문서에 자세히 나와있으니 공식문서를 보도록 하자 ! https://react-hook-form.com/kr/api/#watch API 설명서 Performant, flexible and extensible forms with easy-to-use..

1. [React] 리액트 localStorage를 활용해서 페이지데이터 유지하기 프로젝트를 진행하던 중, 게시글 작성 페이지에서 데이터 유지관련하여 문제가 있었다. 게시글 작성 페이지가 4개로 나뉘어져 있는데, 페이지를 이동할 때 페이지가 재렌더링이 되어 입력된 데이터가 초기화 되는 것이 문제였다.. 페이지 이동시에도 데이터가 유지될 수 있는 방법을 찾던 중, 로컬 스토리지를 알게 되었고 이를 활용해서 문제를 해결 할 수 있었다 ! 문제를 해결하기 위해 사용한 코드와 관련 자료를 남긴다. /// useEffect와 watch를 활용해 데이터 값이 바뀔때 마다 localStorage에 데이터를 저장해 주었다. const { register, watch, setValue } = useForm(); useE..