React

1. Node.js

⭐ import특정 파일을 불러오는 구문이며, import를 사용하여 다른 파일들을 불러와 사용할 수 있다.이런 식으로 모듈을 불러와 사용하는 것은 node.js에서 지원하는 기능이다. 즉, 브라우저에서는 지원하지 않는다. 정확히 말하자면 최신 자바스크립트에서도 imp

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야한다.Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.✔ 오류 케이스✔ 정상 코드 1 (&

💭 컴포넌트 컴포넌트를 선언하는 방식은 두가지이다. 하나는 함수 컴포넌트, 다른 하나는 클래스형 컴포넌트다. ✔ 함수 컴포넌트 ✔ 클래스형 컴포넌트 클래스형 컴포넌트와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을

💭 props 컴포넌트 속성을 설정할 때 사용하는 요소이며 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다. > 예제로 상위 컴포넌트 APP.js, 하위 컴포넌트 MyCompone

컴포넌트 내부에서 바뀔 수 있는 값이며 클래스형 컴포넌트가 지니고 있는 state와 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state가 있다.💡 class형 컴포넌트의 state✏ 코드 설명constructor를 작성할 때는 반드시 super(pr

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용 하는 것예) 버튼에 마우스 커서 올렸을 때 onmouseover 이벤트 실행, 클릭하면 onclick 이벤트 실행, Form 요소가 값이 바뀔 때 onchange 이벤트 실행 등✔ HTML의 이벤트이벤트를 실행하면 "

✔ 코드 설명여기서 넘어가는 e객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다SyntheticEvent이벤트 발생 시, 이벤트 핸들러는 SyntheticEvent(일반적인 이벤트 객체)의 인스턴스를 전달일반적으로 우리가 사용하는 ev

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)가 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 다만 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며 함수 컴포넌트에서는 사용할 수 없다. 그 대

컴포넌트 모양새를 정의하는 함수이며 컴포넌트에서 가장 중요한 메소드이다. 특히, 라이프사이클 메소드 중 유일한 필수 메소드이다.이 메소드 안에서 this.props와 this.state에 접근할 수 있고 리액트 요소를 반환한다. 또한, 이벤트 설정이 아닌 곳에서 set

한 개의 페이지로 이루어진 애플리케이션과거의 웹사이트는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줬다.이렇게 화면 전환이 일어날 때마다 html을 계속 서버에 새로 요청하면

1️⃣ 리액트 라우터를 적용하려면 리액트 라우터 라이브러리를 설치해야 한다.$ yarn add react-router-dom2️⃣ 설치한 리액트 라우터를 적용할 때는 react-router-dom에 내장되어 있는 BrowerRouter라는 컴포넌트를 사용하여 감싸면 된

클릭을 하면 다른 주소로 이동시켜 주는 컴포넌트일반 웹 애플리케이션에서는 a 태그를 사용하여 페이지를 전환하지만 리액트 라우터에서는 Link 컴포넌트를 사용하여 페이지를 전환한다. a 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고

💭 useParams path parameter의 정보를 얻을 수 있는 hooks이다. useParams는 동적 라우팅(Route)를 설정해줘야 하며, 그 곳에서부터 parameter를 받아온다.

라우트 내부에 또 라우트를 정의하는 것라우트로 사용되고 있는 컴포넌트의 내부에 Route 컴포넌트를 또 사용하면 된다.Profiles.jsApp.js 컴포넌트를 렌더링하고, Profiles 주소로 들어오면 element안에 작성한 < div > 태그를 렌더링, 그

리액트 v16.8에 새로 도입된 기능함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.가장 기본적인 Hook, 함수

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방

배열의 각 요소에 대해 주어진 reducer 함수를 실행하고 하나의 결과값으로 반환const sum = numbers.reduce((a, b) => a + b);➡ numbers라는 배열의 각 요소에 reducer 함수인 ( a + b )를 실행인자로 주어진 배열이나

useMemo와 상당히 비슷한 함수, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용하고 만들어 놨던 함수를 재사용할 수 있음useCallback(생성하고 싶은 함수, 배열)특히, 배열은 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 명시해야함함수 내부에서 상태

가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다. 예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황에 리액트에서는 ref 라는 것을 사용 = 함수형

(1) 데이터 전체 읽어오기 collection() : 컬렉션 내에 있는 정보 가지고 올 때 getDoc : 하나 가지고 올 때 getDocs : 여러개 한번에 가지고 올 '나 데이터 줘'라는 요청은 promise로 구성된다. 던지면 즉각 날라오지 않고 서버에

자바스크립트 엔진은 call stack과 heap memory 2가지 메모리 공간을 가지고 있다.call stack실행 중인 함수를 추적해 계산을 수행하고 지역변수를 저장하는 공간원시 타입들이 저장heap memory참조 타입들이 할당 되는 곳원시타입변수 a에 값 10

만약 전체적인 컴포넌트가 바뀌는 것이 아니라상단에 Navbar는 계속 고정해서 보여주고, 특정 부분만 경로 이동하며 변경하고 싶은 경우에는React Router에서 제공하는 Outlet을 사용할 수 있다.createBrowserRouter 안에서 'App 안의 outl

React에서 비동기를 쉽게 다루게 해주는 라이브러리글로벌 상태관리 라이브러리(Redux, MobX 등) 없이 서버에서 데이터를 가져오고그 데이터를 모든 컴포넌트에서 사용 가능하게 캐싱하거나, 그 이외에도 주기적으로 데이터 패칭,Optimistic Updates(데이터

리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 한다.주로 프로젝트에서 전역 상태를 관리할 때 많이 사용 한다.기본 값을 설정하고 싶다면, createContext 함수에 인자로 기본 값을 넣어주시면 된다.

화면에 특정한 요소를 그려내는 것브라우저에서 렌더링이란 결국 DOM 요소를 계산하고 그려내는 것을 의미HTML과 CSS를 통해서 만들어지고 계산된 DOM과 CSSOM은 결합되고, 위치를 계산하고, 최종적으로 브라우저에 그려진다.우리는 브라우저에서 제공하는 DOM API

리액트에서 리렌더링 되는 시점 리액트에서 state를 사용하는 이유 UI와 상태(state)를 연동시키기 위해서 UI는 어떠한 데이터가 있고 그것을 보기 편한 형태로 표현한 것 그래서 UI와 연동되어야 하고, 변할 여지가 있는 데이터들을 state라는 형태로 사용할 수

리액트는 state가 변할 경우 해당 컴포넌트와 하위의 컴포넌트들을 모두 리렌더링 하는데,하위 컴포넌트 경우, props가 변화하지 않았다면 해당 컴포넌트 UI가 변화하지 않았을 수 있기 때문에 이런 경우 굳이 새롭게 컴포넌트 함수를 호출할 필요 없이 이전에 저장되어

Custom Hook

좋은 코드란 ? 보기 좋은 코드, 깔끔하게 잘 짜여진 코드좋은 코드를 쓰는 것은 중요! 하지만 나쁜 코드를 쓰지 않는 것이 더 중요나쁜 코드를 쓰지 않는 것이 중요한 이유?코드는 소프트웨어를 이루는 근본즉, 소프트 웨어는 곧 코드 덩어리소프트웨어가 나쁜 코드로 이루어져

useSearchParams

Design Pattern

이러한 상황속에서 당시의 페이스북팀 개발자들은 이 문제를 해결하기 위한 새로운 디자인 패턴이 필요하다고 생각하게 되었다. 그리고 시간이 흐른 뒤 새로운 디자인 패턴을 발표하면서 그 이름을 Flux라고 지었다.Flux의 핵심은 단방향이다.앞서 문제의 원인을 양방향으로 인

Flux가 컨퍼런스에서 처음 발표되고 난 후, 많은 개발자들이 Flux에 관심을 가지기 시작했습니다. 하지만 Flux는 라이브러리나, 프레임워크가 아닌 디자인 패턴입니다. 즉 Flux 아키텍쳐를 사용하기 위해서는 개발자들이 직접 이 아키텍쳐에 맞게 코드로 구현해야 한다

앞서, Redux는 “자바스크립트 앱을 위한 예측 가능한 상태 컨테이너"라고 했습니다. 이 말은 곧 Redux는 React 전용이 아닌 모든 자바스크립트 앱에 활용할 수 있다는 의미입니다.React 또한 자바스크립트이기에 Redux를 사용할 수 있습니다. React에서

“프레임워크의 요청과 응답 사이에 추가할 수 있는 코드”일반적으로 express, koa와 같은 서버 프레임워크단에서 미들웨어란 개념을 많이 사용하는데 서버 프레임워크에서는 흔히 미들웨어에서 CORS 관련 설정, 로깅 등의 목적으로 활용미들웨어의 가장 큰 특징은 “연결