전체 글

Front-End/React
[React] useCallback과 useMemo 제대로 사용하기
useCallback과 useMemo는 메모이제이션 된 값을 반환한다. 차이점은 useCallback은 함수를 메모이제이션하고 useMemo는 값을 메모이제이션한다. 면접을 준비하여 외웠던 대답이다. 실제 프로젝트를 하면서 useCallback을 써봤지만 왜 쓰는지, 언제 써야하는지를 정확히 이해하지 못했었다.(심지어는 전혀 이점없는 곳에 썼다🙄) 회사에 와서야 useCallback과 useMemo를 사용하는 목적이 무엇인지를 완전히 이해하고 올바르게 사용하게 되었다. 이제 내가 이해한 내용을 여기에 정리해보려한다. REACT의 리렌더링 React가 리렌더링을 하는 조건은 3가지이다. 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 여기 ..
→2021.09.12
Front-End/React
Redux-saga를 알아보자
💡 이 글을 읽기 전에 읽어보면 좋은 글 1️⃣ Symbol을 알아보자 2️⃣ for-of와 Iterator 3️⃣ Generator란 무엇일까? Redux-saga란?🤔 공식문서에서는 Redux-saga를 다음과 같이 소개하고 있다. Redux-saga는 react/redux 애플리케이션의 사이드 이펙트, 예를 들면 데이터 fetching이나 브라우저 캐시에 접근하는 순수하지 않은 비동기 동작들을 더 쉽고 보기 좋게 만드는 것을 목적으로 하는 라이브러리이다. redux에서는 action을 발생시키면 reducer를 통해 state를 변화시켜 store를 갱신했다. Redux-saga는 action과 reducer사이에서 흐름을 제어하는 미들웨어이다. 이 중간에서 Redux-saga는 action이 발생..
→2021.09.04
Front-End/JavaScript
[JavaScript] Generator란 무엇일까?
Generator👀 function* generateSequence() { yield 1; yield 2; return 3; } 일반 함수는 function 키워드로 시작한다면, 제너레이터 함수는 function* 키워드로 시작한다. (화살표 함수는 사용할 수 없다.) 제너레이터 함수 안에는 yield 구문이 존재한다. yield 구문의 문법은 return 구문과 비슷하다. 차이점은 return은 한번만 실행되지만, 제너레이터 함수의 yield는 여러번 실행된다는 것이다. yield 구문은 제너레이터의 실행을 멈췄다가 다음에 다시 시작할 수 있게 만든다. 제너레이터 함수는 일반 함수와 동작 방식이 다른데, 제너레이터 함수를 호출하면 코드가 실행되지 않고, 제너레이터 객체가 반환된다. let generat..
→2021.09.04
Front-End/JavaScript
[JavaScript] for-of와 Iterator
for-of문 for(let value of myArray){ console.log(value); } for-in 문이 객체의 속성들을 순회하기 위한 구문이라면, for-of 문은 배열의 요소들, 즉 data 를 순회하기 위한 구문이다. 정확히는 일반 Object 요소를 제외한 Array, Map, Set 등의 객체 타입을 순회할 수 있다. (추가로 String도 가능하다. 문자열로 이루어진 배열로 보기 때문) forEach와는 다르게 break, continue, 그리고 return 구문과 함께 사용할 수 있다. for-of문은 어떤 메소드를 반복 호출하는 방식으로 동작한다. Array, Map, Set 등의 객체들은 공통적으로 이터레이터(iterator) 메소드를 제공한다. 일반 객체는 이터레이터 메..
→2021.09.04
Front-End/JavaScript
[JavaScript] Symbol을 알아보자
Symbol이란?🤔 심볼(Symbol) 은 ES6에서부터 추가된 7번째 타입의 값이다. 심볼(Symbol)은 프로그램이 이름 충돌의 위험 없이 속성(property)의 키(key)로 쓰기 위해 생성하고 사용할 수 있는 값이다. let newSymbol = Symbol(); Symbol()을 호출하면 새로운 심볼 값이 생성된다. 이 값은 고유하다. 즉, 다른 어떤 값과도 다르다. 심볼을 키값으로 사용하게 된다면 다른 어떤 속성과도 충돌하지 않는다. Symbol의 특징 심볼은 이런 식으로 사용할 수 있다. let isOpen = Symbol('isOpen'); ... element[isOpen] = true; 위 코드에서 isOpen문자열은 주석일 뿐이다. 심볼 값을 console.log()로 찍거나, .t..
→2021.09.04

• 이전
• 1
• ···
• 5
• 6
• 7
• 8
• 9
• 다음