본문 바로가기

분류 전체보기

 (112)
[ React ] React Hooks 정리 5 - useCallback ( + useMemo와 차이점 ) ‼️useMemo에 이어서 useCallback에서도 일단 알고 진행해야하는 개념 메모이제이션 메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 이전에 계산한 값을 자료구조에서 꺼내 재사용하는 것을 말한다 useCallback 사용형태 인자로 전달한 콜백함수 자체를 메모이제이션 해주는것 ! const func = useCallback(()=>{ // 메모이제이션해줄 값 ( 함수 또는 값 ) }, [ 의존성 배열 ] ) useCallback을 사용하면 컴포넌트가 재렌더링이 일어나도 초기화 되지 않고 메모이제이션 된 함수 자체를 계속 갖고 있으면서 재활용 한다. useMemo와 비슷한데 차이점은 useMemo는 값을 메모이제이션하여 의존성 배열에 있는 값의 변경을 감지하여 캐싱..
[ React ] React Hooks 정리 4 - useMemo ‼️일단 알고 진행해야하는 개념 메모이제이션 메모이제이션이란 계산된 값을 자료구조에 저장하고 이후 같은 계산을 반복하지 않고 이전에 계산한 값을 자료구조에서 꺼내 재사용하는 것을 말한다 useMemo 1. 사용 형태 자주쓰이는 값을 메모이제이션 해줌 const value = useMemo(()=>{ // 메모이제이션해줄 값 ( 함수 또는 값 ) }, [ 의존성 배열 ] ) 의존성 배열 안의 값이 업데이트 될때만 메모이제이션해줄 값를 다시 호출해서 메모이제이션 된 값을 반환하거나 업데이트시켜야한다면 업데이트 된 값을 메모이제이션 하여 값을 반환한다. 의존성 배열이 빈 배열이면 처음 mount될때만 실행 ( vue의 computed와 비슷하다고 느껴짐, 메모이제이션이 되는줄은 모르겠지만.. ) 2. 무분별..
[ React ] React Hooks 정리 3 - useRef useRef 1. 변수관리 할때 사용 - 리렌더링이 일어나면 안되는 경우 2. Dom 선택시 사용 1 - 1 . 변수 관리 state가 변경될때마다 컴포넌트는 렌더링이 일어나서 성능이 안좋아질 수 있음 리렌더링을 발생시키지 않으므로 변화를 감지해야 하지만, 그 변화가 렌더링을 발생시키면 안되는 경우에는 useRef를 사용한다. const ref사용 변수명 = useRef( 초기값 ) const testRef = useRef(0) console.log(testRef) // {current: 0} /* useRef를 사용한 변수에 값 할당, 사용은 current를 사용한다 */ testRef.current = 2 console.log(testRef) = // {current: 2} console.log(te..
[ React ] React Hooks 정리 2 - useEffect useEffect 컴포넌트가 렌더링 된 후, 혹은 컴포넌트가 업데이트 될 때마다 실행시키고 싶은 작업이 있을때 사용한다. 1. 사용 형태 1. 컴포넌트가 렌더링 될때마다 계속 실행 useEffect( () => { // 작업 내용 }); 2. 첫 렌더링 후 한번 실행, 그 이후로는 Dependency array안에 있는 state 변경시에만 실행 useEffect( () => { // 작업 내용 },[ state1, state2 ]); 3. 첫 렌더링될때 한번만 실행 useEffect( () => { // 작업 내용 },[]); // 빈배열 2. cleanup 함수 👉 return 구문을 추가 return 안에 사용한 함수는 해당 컴포넌트가 unmount될때, 또는 다음 렌더링시 불릴 useEffect가..
[ React ] React Hooks 정리 1 - useState useState 컴포넌트의 상태값 관리를 위해 사용. 유동적인 값을 바인딩 하기 위해 사용 state 변경시마다 컴포넌트는 다시 렌더링된다. 컴포넌트 렌더링의 조건👇🏻👇🏻👇🏻 더보기 1. setState로 state 변경이 있을 때 2. 새로운 props이 들어올 때 3. 부모 컴포넌트가 렌더링 될 때 4. shouldComponentUpdate에서 true가 반환될 때 - 기본값은 true로 보통 렌더링이 일어나지만, 개발자가 false로 리턴값을 변경한 경우는 렌더링 되지않음 5. forceUpdate가 실행될 때 1. 사용 형태 const [ 현재상태값(state) , 현재 상태를 변경할수 있는 함수(setState) ] = useState( 초기값 ) useState는 state와 setState..
[ REACT ] 블로그 배너 생성기 만든 후기 ( + 링크 ) 원래 블로그 배너는 포토샵으로 만들고 있었는데.. 이제 디자인도 안하고, 포토샵 한달에 11.000원에 1년 강제 정기결제라서 부담스러워서 결제를 끊어버리니 이제 블로그 배너를 텍스트만 넣어서 만들기도 어려웠다.... 폰트 설정도 어렵고 포토샵에 너무 익숙한 삶을 살았다.. 블로그 배너 만들자고 포토샵 계속 결제하긴 좀 그래서.. 기존에 사용하던 블로그 배너 폼을 기준으로 타이틀, 설명 정도만 작성해서 이미지로 복사 할 수 있는 배너 생성 페이지를 만들어 배포했다. 860 X 422 (px) 사이즈로 생성됨 계속 사용하던 vue로 만들까 하다가, 요새 공부중인 react + typescript 로 만들어보았다. ( 그래서 기능에비해 시간 많이 잡아먹음 ) 그리고 모바일에서 접속해도 틀어지지 않도록 구현..
[ JavaScript ] Date 객체에서 년,월,일 따로 출력하기 회사에서 엑셀 파일 다운로드 구현해뒀는데, 해당 파일 다운로드시 오늘날짜를 ( YYYY.MM.DD ) 형태로 파일명에 추가해달라는 요청이 와서 년, 월, 일을 가져오는 방법에 대해서 정리한다. 처음엔 그냥 Date 객체에서 getFullYear, getMonth, getDate등을 사용했는데 코드가 너무 지저분해서 다른 방법을 사용하면서 관련된 코드들을 정리해보았다! 1. getFullYear, getMonth, getDate등을 사용 getMonth에 1을 더해주고 한자리수 일 경우에 0을 추가 해주는등 너무 지저분해보여서 다른 방법을 찾아보았음! const date = new Date() const year = date.getFullYear() let month = date.getMonth() + 1..
[ JavaScript ] 논리 연산자 정리 &&, ||, <<, >>, !, !!, ?, ?? & : 비트 연산자 비트의 논리 합을 하는 연산자 && : 논리곱 연산자 &&는 모든 조건이 참이여야 true || : 논리합 연산자 ||는 둘중 하나가 참이면 true > : 비트 이동 연산자 왼쪽, 오른쪽으로 비트를 밀어내는 연산자 ! , !! : 부정 연산자 ! : 입력값을 boolean으로 변환하는데, true이면 false로 , false이면 true로 값을 반대로 반환한다. !! : boolean타입으로 명시적으로 형 변환 ?. : 옵셔널 체이닝 객체의 속성이 없는 경우, typeError가 발생하지 않고 undefined가 반환됨 ?? : Null 병합 연산자 앞에 오는 값이 null 또는 undefined이면 뒤에오는 값을, 아니면 null 또는 undefined을 반환 ✔️참고 https..
package.json의 scripts의 활용 ( &&, pre-, post- ) package.json의 scripts 리액트, 뷰로 CRA나 CLI로 개발환경 세팅후 자주 실행해야 하는 명령어를 package.json의 scripts에 작성하여 npm 명령어로 실행 할 수 있다. 실행 실행시에는 아래와 같은 같은 형태로 사용하고, npm run 스크립트이름 등록 등록시에는 아래의 형태로 이름과 명령어를 key value형태로 입력한다. { "scripts": { "script_name": "echo some\_command\_here" } } 어떤 스크립트 실행시, 한개의 스크립트로 여러개의 명령어를 실행하고 싶거나 특정 스크립트 이전이나 이후에 특정한 명령어를 실행하고 싶은 경우 아래의 두가지 방법 사용이 가능하다. 예시 > 테스트를 실행하기 전에 일부 테스트 로그를 삭제하고 나..
canvas의 영역을 클립보드에 붙여넣는 과정 정리 + 코드 이전에 간단하게 html2canvas로 화면의 element를 클립보드에 복사하는 방법에 대해서 정리했었다. https://im-designloper.tistory.com/66 [ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js ) html로 작성된 특정 영역을 클립보드에 이미지로 복사해야 하는 상황에 사용! html2canvas 설치 // Install NPM npm install --save html2canvas // Install Yarn yarn add html2canvas https://html2canvas.hert.. im-designloper.tistory.com 아래에서 html2canvas로 html element를 canvas로 변환한 이후에 클..

티스토리툴바