useHistory useHistory는 react-router-dom 안에 있는 객체이다. react-router-dom@5 버전까지 가능하며 react-router-dom@6 버전부터는 useNavigate 객체로 변경되었다. 사용법 const history = useHistory(); 변수에 useHistory를 추가해서 사용할 수 있다. 1. push history.push('/about')}>어바웃으로 push는 페이지를 이동 할 수 있다. go 라는 것도 똑같이 페이지를 이동하지만 두개의 차이점은 push는 prop을 전달 할 수 있다. 또한 히스토리 스택에 새 항목을 푸시한다. 2. go history.go('/about')}>어바웃으로 go 는 push와 비슷하게 사용된다. 히스토리 스택의..

비구조화 할당 비구조화 할당은 ES6에서 추가된 문법이다. 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있다. 비구조화 할당의 장점 배열, 객체 내 값을 추출하는 코드가 매우 간단해진다. 필요한 객체와 나머지 요소 분리가 매우 간단하다. 기본값 지정이 가능하다. 비구조화 할당 문법 비구조화 할당이라는 문법이 나오기 전에는 배열안에 있는 요소를 꺼내기 위해서는 직접 하나하나 꺼내서 값을 지정해줘야 했다. let arr = [1,2,3]; let one = arr[0]; let two = arr[1]; let three = arr[2]; console.log(one,two,three); // result : 1 2 3 굉장히 번거로운 작업을 거쳐야 배열의 요소를 변수에 담을 수 있었다. 하지만 ..

async & await ES8 에서는 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기처럼 동작하도록 구현할 수 있는 async 와 await이 도입 되었다. Promise 의 후속 처리 메서드 없이 마치 동기 처럼 Promise가 처리 결과를 반홚하도록 구현 할 수 있다. async 함수 function 앞에 async를 적어주면 함수는 Promise 객체를 생성했을 때 처럼 Promise 를 반환한다. Promise 가 아닌 값을 반환 하더라도 이행 상태의 Promise로 감싸주면 그 값을 감싸서 이행 된 Promise로 반환한다. async function f() { return 1; } f().then(alert); // 1 Promise를 반환 받아도 가능하지만 결과는 똑같다. 결론으로 ..

Spread 문법 Spread 문법은 javaScript 에서 자주 사용하는 유용한 문법이다. React에서 매우 유용하게 사용했던 친구 중 하나이다. 나머지 매개변수 기능을 반대로 제공해주는 친구라고 생각하면 편할 것이다. 나는 미리 사용을 해봤는데 주로 배열이나 객체를 펼칠 때 사용했다. 객체를 펼친다 라는 건 무슨 말인지 처음에는 의아했다. 코드를 한번 보면 확실하게 이해가 갈 것이다. // Spread 연산자 사용 let arr2 = [1, 2, 3, 4, 5]; console.log(...arr2); // result = 1 2 3 4 5 말 그대로 펼쳐준다. Spread 문법은 이터러블 객체에만 사용할 수 있다. 또한 아주 유용한 예제가 있다. // Spread 1 const cookie = ..

Promise 객체 비동기 처리를 조금 더 편하게 처리 할 수 있는 ES6에서 도입된 기능이다. Promise 는 자바스크립트 비동기 처리에 사용되는 객체이다. Promise 가 필요한 이유? 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다. 예를 들어 요청한 데이터를 다 받아오기도 전에 화면에 출력하려면 에러가 발생하거나 빈 화면을 출력한다. 이러한 문제점을 해결하기 위한 것이 Promise 이다. 이전에는 비동기 처리를 하기 위해 콜백함수로 처리를 해야했다. 하지만 콜백함수로 처리하게되는 코드가 많으면 콜백지옥이 발생하게 된다. 콜백 지옥이란 콜백함수안의 또 콜백함수 그리고 또 콜백함수 이렇게 계속 파고 드는 것을 말한다. 콜백 지옥(콜백헬) 은 가독성을 나쁘게 하며 실수를 유발하는 원인이 ..

브라우저의 렌더링 과정 1. DOM Tree 생성 1.1 브라우저의 렌더링 엔진이 html 코드를 읽고 파싱한다. 2. CSSOM (CSSDOM) 생성 2.1 css파일 인라인 css 코드를 파싱한다 2.1 이 때 DOM 과 CSSOM 을 합쳐서 render Tree가 만들어진다. 3. Layout 단계 3.1 각 노드(html element) 들이 스크린에서 좌표에 따라 위치를 결정한다. 3.2 Position, size 등이 Layout 단계에서 결정 된다. 4. Paint 단계 4.1 실제로 화면에 그려지는 과정이다.