공부

useActionState useActionState는 useState처럼 state를 업데이트할 수 있도록 제공하는 React Hook이다. useState와 다른 점은 폼 액션의 결과를 기반으로 한다는 점이다. 매개변수 : 폼이 제출되거나 버튼을 눌렀을 대

useCallback과 useMemo는 둘 다 React에서 성능 최적화를 위해 사용하는 Hook이다. 이 두 Hook은 모두 메모이제이션 기법을 이용한다.메모이제이션(memoization)이란, 동일한 계산을 반복해야 할 경우 계산한 결과를 메모리에 저장해 두었다가

useReducer는 useState와 마찬가지로 state를 관리하는 Hook이다.useState는 기본적인 상태 관리 Hook이며, 주로 간단한 상태를 관리할 때 사용한다.그 반면 useReducer는 useState보다 더 복잡한 로직을 처리할 때 유리하다.con

원시값 : String, Number, Boolean, null, undefined, Symbol 등참조값 : Array, Object, Function 등원시값은 변수에 저장된 실제 값에 직접 접근할 수 있는 단순한 데이터. 하나의 값에 대한 정의가 절대 변하지 않는

useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 Hook이다.Ref란 reference, 즉 참조를 뜻한다.저장공간 또는 DOM 요소에 접근하기 위해 사용되는데, Vanilla JS를 사용할 때는 특정 DOM을 선택하기 위해 querySelector, get

useLayoutEffect는 useEffect와 유사한 Hook으로 React 공식 문서에는 이렇게 설명하고 있다.useLayoutEffect는 브라우저가 화면을 다시 그리기 전에 실행되는 useEffect입니다.useEffect는 컴포넌트들이 render와 pain

TypeScript에서 Interface와 Type는 모두 타입 정의에 사용되며, 코드의 가독성을 높이고 타입을 명확히 지정할 수 있도록 도와준다. 두 개념은 유사한 역할을 하지만, 미묘한 차이와 사용 목적이 다르다.Interface와 Type 모두 객체, 함수, 배열

useId는 React 18에서 추가된 Hook으로 고유 ID를 생성하는 Hook이다.useId()없음고유 ID 문자열을 반환한다.React에서 ID를 직접 코드에 입력하는 것은 좋은 사례가 아니다. 페이지에서 컴포넌트는 몇 번이고 렌더링 될 수 있지만 ID는 고유해야

<Suspense> 컴포넌트는 자식 요소가 로드되기 전까지 화면에 대체 UI를 보여주는 역할을 하는 컴포넌트이다.React 16.6부터 도입된 기능으로, 주로 비동기 렌더링을 지원하기 위해 사용된다.children : 궁극적으로 렌더링하려는 실제 UI이다. chi

보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달한다.하지만 부모 -> 중간 1 -> 중간 2 -> 중간 3 -> 목적지처럼 거쳐야 하는 컴포넌트가 많으면 어떨까이런 경우 props를 전달하는 것이 번거롭고 불편할 수 있다.Context는 부

hoisting명사1\. 끌어 올리기; 들어올려 나르기.호이스팅(Hoisting)은 JavaScript에서 변수, 함수, 클래스의 선언이 해당 코드의 최상단으로 끌어올려지는 것처럼 동작하는 특성을 말한다.하지만 실제로 코드를 실행할 때 선언이 물리적으로 코드 상단으로

React.memo는 React에서 제공하는 고차원 컴포넌트(Higher Order Component)로, 컴포넌트의 불필요한 리렌더링을 방지하기 위해 사용된다.React.memo를 사용하면, 부모 컴포넌트가 리렌더링되더라도 props가 변경되지 않았다면 자식 컴포넌트

콜백 함수(Callback Function)은 다른 함수의 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수이다.매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.greet() 함수를 호출할 때 입력 매개변수로 name과 far

Promise와 async/await은 JavaScript에서 비동기 작업을 처리하는 방식이다.Promise는 비동기 작업이 완료되었을 때, 그 결과를 처리할 수 있는 객체이다.비동기 작업이 성공적으로 완료되면 resolve()가 호출되고, 실패하면 reject()가

Reflow와 Repaint는 브라우저가 웹 페이지를 렌더링하는 과정에서 발생하는 개념이다.브라우저 렌더링은 렌더 트리의 생성 이후 다음 두 단계를 거친다.Layout 단계 : 렌더 트리의 각 노드를 화면에 배치Paint 단계 : 배치된 노드들을 화면에 그려냄Reflo

this는 JavaScript에서 현재 실행 중인 컨텍스트(Context)를 참조하는 키워드로, 함수가 호출되는 방식에 따라 값이 달라진다.전역 스코프에서 this는 전역 객체를 참조한다.브라우저 환경: windowNode.js 환경: global객체의 메서드 내부에서

스코프(Scope)는 변수나 함수에 접근할 수 있는 유효 범위(영역)을 의미한다.Scope 명사 (주제·조직·활동 등이 다루는) 범위코드 전체에서 접근할 수 있는 변수나 함수가 속하는 범위특정 코드 블록(함수, 블록 등) 내부에서만 접근할 수 있는 범위함수 내부에서만

MDN에서는 클로저(Closure)를 이렇게 정의하고 있다.클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생성 시 함

리액트 서버 컴포넌트는 리액트 18에서 공개된 기능이다.간단하게 말하면 서버 컴포넌트란 서버에서 렌더링되는 컴포넌트이다.서버에서 렌더링 된 컴포넌트는 렌더링이 된 후에 클라이언트로 전달이 되고 사용자에게 보여지는 것이다.리렌더링 되지 않는다. -> 서버에서 렌더링이 되

ref는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있다.ref는 .value property를 붙여 접근할 수 있다.reactive는 Object, Array, Map, Set과 같은 타입에서만 사용할 수 있다.reactive는 .val

v-if와 v-show는 Vue.JS에서 조건부 렌더링을 위해 사용된다.v-if 는 조건에 해당하지 않다면 렌더링을 하지 않는다.위의 코드에서는 False는 렌더링 되지 않는다.v-else는 v-if와 함께 사용될 수 있다.앞의 조건이 성립되지 않는다면 else 조건이