분류 전체보기

Front-End/React
[React] 자주 사용하는 Custom hook 소개
프로젝트를 하면서 자주 사용하는 Custom hooks를 모음. 아마도 계속 추가해나갈 예정이다. usePrevious import { useEffect, useRef } from 'react'; function usePrevious(stateOrProp) { const previous = useRef(null); useEffect(() => { previous.current = stateOrProp; }, [stateOrProp]); return previous.current; } export default usePrevious; 가끔 이전 state의 값이 필요할 때가 있다. 예를 들어 useEffect는 deps에 명시한 값이 하나라도 변경되면 로직을 실행한다. useEffect(() => { ....
→2021.10.16
Front-End/React
[React] Custom hooks의 return value
Custom Hook에서 여러개의 값을 return하는 방법은 두가지가 있다. const [one, two] = useNumbers(); const { a, b, c } = useAlphabet(); array형태와 object형태로의 return이다. 어떠한 경우에 array형태를 사용하고 object형식을 사용하는지에 대한 정답은 없다. 하지만 두 타입의 장단점이 극명하기 때문에 상황에 따라 구분에서 사용하면 좋다. array로 return const [color, setColor] = useState('MintCream'); const [width, setWidth] = useState('100vw'); 적은 수의 값들을 return하는 경우 같은 컴포넌트 내에서 한번 이상 사용하는 경우 array..
→2021.10.16
Front-End/React
[React] Custom hook을 만들기 전에 고려해야 할 것들
들어가면서🚪 Building your own Hooks lets you extract component logic into reusable functions. 최근 내가 컴포넌트를 설계할 때 가장 중요하게 생각하는 것은 컴포넌트의 역할이 명확하게 나타나는가 이다. 예를 들어보자. app이라는 페이지에 input field가 있고 확인 버튼이 있다. 이 화면의 코드는 대충 이런 식일 것이다. function App() { const [value, setValue] = useState(''); const onClick = () => { 클릭 이벤트 }; return ( ); } app 컴포넌트의 역할은 'input field와 button을 적절한 위치에 그리는 것' 그리고 '확인 버튼을 누르면 input ..
→2021.10.16
Front-End/개발일지
React로 타임라인 만들기 (+ 더보기 버튼)
타임라인은 일정 양의 데이터만을 로딩하고 사용자가 +read more버튼을 클릭하면 새로운 데이터를 끝에 추가로 로딩하는 방식으로 동작한다. 각각의 데이터들은 날짜별로 분류되어 있으며 최신 순으로 정렬되어있다. 내가 만들 타임라인의 구성은 다음과 같다. Timeline이라는 큰 틀 안에 날짜별로 분류된 HistoryList가 있고 각각의 기록들은 HistoryItem으로 나타낸다. 이 구성을 표현하기 위해서는 데이터들을 날짜별로 나눠서 재분류할 필요성이 있었다. 타임라인 로직 구성하기 일단 데이터를 어떤 방식으로 가져오는지 알아야 했기 때문에 twitter의 timeline api를 참고했다. 트위터에서는 두가지 방식으로 timeline 데이터를 가져올 수 있다. start_time과 end_time을 ..
→2021.10.08
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
Front-End/JavaScript
[JavaScript] 값과 레퍼런스
JavaScript의 타입👀 JavaScript의 데이터 타입은 크게 두가지로 나눌 수 있다. 원시 타입(Primitive data type)과 객체 타입(Object / reference type)이다. 원시 타입은 다음과 같다. Number(숫자) String(문자열) boolean(논리형) undefined null Symbol(ES6부터 제공) 객체 타입은 다음을 포함한다. function(함수) Array(배열) Object(객체) JavaScript에서 원시 타입을 제외한 모든 값은 '객체' 이다. 즉, 함수나 배열 모두 객체로 본다. 원시타입과 객체 타입의 차이점은 값의 저장 형태이다. 원시 타입 흔히 원시 타입은 불변성(immutable)을 갖는다고 말한다. 원시 타입을 변수에 할당할 때값..
→2021.09.04

• 이전
• 1
• 2
• 3
• 4
• 다음