리액트에서 export란? 리액트로 무언가를 개발할 때, 컴포넌트 단위로 나누어서 하나의 페이지를 구성하게 된다. 따라서, 부모 컴포넌트에 여러 개의 자식 컴포넌트들을 import 하는 상황이 생기게 되는데, import 하기 위해서는 자식 컴포넌트를 export 해줘야 한다. 요약하자면, export는 컴포넌트의 재사용을 위해 import 되기 위한 권한 설정이라고 할 수 있다. export의 종류 default export const List = () => { return } export default List; 우리가 일반적으로 가장 많이 쓰는 export 방식으로 파일 안에 하나의 함수만 있을 때 쓰이는 기본적인 방식이다. default 방식은 기본 이름을 사용하는 방식으로 함수 이름인 List를..

성능 최적화란? 함수형 컴포넌트를 사용하는 리액트의 특성상 컴포넌트의 상태가 바뀌거나, 전달받은 Props가 업데이트되거나, 자식 컴포넌트일 때 부모 컴포넌트가 렌더링 되는 경우 컴포넌트가 리렌더링 되는 현상이 발생한다. (컴포넌트가 리렌더링 되면 그 안에 있는 함수, 변수, 컴포넌트 모두 재생성되게 된다.) 안에 들어 있는 정보가 바뀌었으니 새로 렌더링이 되는 것은 어찌 보면 당연한 현상이다. 하지만, 관점을 바꿔 생각해 보면 하나의 컴포넌트 안에 무수한 상태, 변수들과 전달받은 다양한 Props들이 있을 텐데 수많은 요소 중에서 하나 바뀌었다고 전체가 리렌더링 되는 것은 정말 비효율적인 것이다. (한 명이 잘못했다고 모두가 손들어야 하는 건 아니다.) 따라서, 우리는 컴포넌트가 렌더링 될 때 굳이 같..

URL 객체란? 자바스크립트에서 도메인에 대한 정보를 가지고 올 때, 주로 window.location.href를 사용했을 것이다. 이번 글에서 소개할 URL 객체를 이용하면 도메인 주소를 비롯한 프로토콜, 쿼리스트링 등 현재 페이지에 대한 모든 정보들을 쉽게 조회할 수 있다. 물론, URL 객체를 사용하지 않고 window.location을 이용해서도 똑같이 구현 가능하다. 하지만, 매번 변수에 저장하는 것보다는 하나의 객체로 만들어서 사용하면 편의성 측면에서 훨씬 더 효율적일 수 있다. 사용 방법 URL 객체 선언하기 const url = new URL(window.location.href); new URL('도메인 주소')를 통해 URL 객체를 선언해 준다. 파라미터(경로)와 쿼리스트링 조회하기 /..

복사에도 두 가지가 있다. 자바스크립트에서 변수에 객체나 배열을 할당할 때, 우리는 이것이 얕은 복사인지 깊은 복사인지 구별해야 한다. 물론, 아무것도 모를 때는 이게 복사면 복사지 얕고 깊은 정도가 따로 있나 싶지만 이게 무엇이냐에 따라서 원본 객체나 배열에도 영향이 가게 되고, 결국 코드 전체에도 영향을 줄 수 있는 문제이기 때문에 우리는 얕은 복사와 깊은 복사에 대해서 확실히 알고 가야 한다. 얕은 복사와 깊은 복사는 이름에서부터 얕고 깊다고 되어 있기 때문에, 우리는 대충 이게 어떤 것을 뜻하는지 알 수 있다. 얕은 복사는 말 그대로 얕다고 되어 있기 때문에 무언가를 복사하지만 확실히 복사되는 게 아닐 것 같다는 느낌이 들고, 깊은 복사는 얕은 복사와 다르게 확실하게 복사되는 느낌이겠구나라고 감을..

What every()와 some() 메서드는 둘 다 콜백함수를 인자로 두며, 콜백함수의 인자는 (값, 인덱스, 배열) 순으로 받는다. 반환값으로는 Boolean 타입을 반환하며 every()는 전부 참일 때, some()은 하나라도 참일 때 true를 반환한다. How every() let arr = [1, 2, 3]; let result = arr.every(val => val > 2); console.log(result); // false let arr = [3, 6, 9]; let result = arr.every(val => val % 3 === 0); console.log(result); // true every()는 배열 안에 있는 모든 값이 특정 조건을 만족하는 경우 true를 반환하는 메..