분류 전체보기 (66) 썸네일형 리스트형 [JS] 클로저 렉시컬 스코프란?JS 엔진은 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프라 한다. 함수의 상위 스코프는 함수를 어디서 정의했느냐에 따라 결정되므로 함수를 어디서 호출하는지는 함수의 상위 스코프 결정에 어떠한 영향을 주지 못한다. 즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다. 함수 객체의 내부 슬롯렉시컬 스코프가 가능하려면 함수는 자신의 상위 스코프를 기억해야 한다. 이를 위해 함수는 자신의 내부 슬롯에 상위 스코프의 참조를 저장한다. 이때 자신의 내부 슬롯에 저장된 상위 스코프의 참조는 현재 실행 중인 실행 컨텍스트의 렉시컬 환경을 가리키는데 함수 객체를 생성하는 시점은 상위 함수가 실행되고 있는 .. [TIL] forwardRef / useImperativeHandle forwardRef자식 컴포넌트에 ref 전달ref를 이용해서 DOM 객체에 접근할 수 있지만 부모 컴포넌트에서 자식 컴포넌트의 DOM 객체에 접근하는 것은 허용하지 않는다. 이때 forwardRef 함수를 사용하면 부모 컴포넌트에서 생성된 ref를 자식 컴포넌트에게 전달할 수 있다. 이를 통해 부모 컴포넌트가 자식 컴포넌트의 인스턴스에 접근할 수 있도록 한다. forwardRef 사용법 import { useEffect, useRef, forwardRef } from "react";function ChildComponent(props, ref) { return ;}const ForwardedChild = forwardRef(ChildComponent);export default function Par.. [TIL] React Router(2) React Router페이지 이동HTML에서 다른 페이지로 이동하려면 a 태그를 사용한다. 다만 a 태그는 CSR을 위한 용도로는 바로 사용할 수 없어서 리액트 라우터는 a 태그를 감싼 Link 컴포넌트를 제공한다. Link 컴포넌트는 a 태그의 href 속성 대신 to 속성을 제공한다. to 속성에 이동시키고 싶은 경로를 문자열로 작성하면 요소를 클릭했을 때 해당 경로로 이동한다. 또 다른 페이지를 이동시키는 방법은 useNavigate 훅을 사용하는 것이다. useNavigate 훅을 호출하면 navigate 함수를 얻을 수 있는데 인수로 이동하고 싶은 경로를 넣으면 된다. import { Link, useNavigate } from "react-router-dom";function App() { .. [TIL] MPA와 SPA / React Router(1) MPA와 SPA MPA란? MPA(Multi Page Application)는 웹 서버와 브라우저가 여러 HTML 파일을 주고받는 방식이다. 웹 서버가 사용자들에게 제공해줘야 되는 모든 페이지들에 해당하는 HTML 파일을 가지고 있다. 브라우저에서 특정 주소를 갖는 페이지를 요청하게 되면 서버는 요청에 맞는 페이지를 찾아서 해당 페이지를 반환해주게 되고 브라우저는 서버로부터 받은 HTML 페이지를 그대로 화면에 렌더링하게 된다. MPA 방식은 동작 방식이 매우 직관적이기 때문에 현재까지도 많은 서비스들이 이용하고 있는 전통적인 방식이다.MPA의 단점MPA 방식으로 개발된 웹 서비스들은 페이지 이동 시 이전 페이지와 이후 페이지에 공통으로 사용되는 요소가 있다고 하더라도 페이지 이동 시 원본을 전부 제거하.. [TIL] Context ContextContext란?컴포넌트의 계층 구조가 두 단계 이상으로 깊어지게 된다면 다이렉트로 전달할 수가 없고 중간 컴포넌트를 거쳐서 전달해야 한다. 이러한 과정을 Props Drilling이라고 한다. Props Drilling을 해결하기 위해 리액트에서는 컨텍스트를 제공한다. 컨텍스트는 리액트 컴포넌트간에 어떠한 값을 공유할 수 있게 해주는 기능이다. 데이터를 보관하는 일종의 데이터 보관소 역할을 한다. 컨텍스트를 생성한 다음에 전달할 데이터를 Context에 보관해놓으면 props를 이용하지 않고 다이렉트로 필요한 데이터를 전달해 줄 수 있다. context 사용법 const 컨텍스트 = createContext(); react 패키지가 제공하는 createContext 메서드로 컴포넌트 바.. [TIL] useMemo / React.memo / useCallback useMemo useMemo란?useMemo 훅은 메모이제이션 방식을 기반으로 불필요한 연산을 다시 수행하지 않도록 리액트 앱을 최적화하는 메서드다. 메모이제이션은 과거에 계산한 값을 반복해서 사용할 때 과거에 계산한 값을 캐시해 두는 방법으로 전체 계산 속도를 높이는 코드 최적화 기법이다. useMemo 사용법 const 캐시된_데이터 = useMemo(콜백_함수, [의존성1, 의존성2, ...]); useMemo 훅을 호출하고 첫 번째 인수로 메모이제이션 하고 싶은 값을 반환하는 콜백 함수와 두 번째 인수로 의존성 배열을 넣으면 된다. useEffect와 동일하게 의존성 배열에 들어가는 값이 바뀌면 콜백 함수를 다시 실행한다. 콜백 함수가 반환하는 값을 useMemo는 그대로 다시 반환한다. Re.. [TIL] useReducer useReduceruseReducer란?useReducer훅은 useState 훅과 동일하게 컴포넌트 내부에 새로운 state를 생성하는 메서드다. 모든 useState는 useReducer로 대체 가능하지만 useReducer는 useState와 달리 상태를 관리하는 코드를 컴포넌트 외부로 분리할 수 있다는 차이점이 있다.useReducer 사용법import { useReducer } from 'react';function reducer(state, action) { ...}function App() { const [state, dispatch] = useReducer(reducer, initialArg); return( ... )} useReducer 호출하면 현재 state와 상태 변.. [TIL] 생명주기 / useEffect 생명주기 리액트는 컴포넌트를 생성하고 렌더링하다가 어떤 시점이 되면 소멸한다. 이러한 과정을 컴포넌트의 생명주기(lifecycle)라고 표현한다. 모든 리액트 컴포넌트는 Mount, Update, Unmount 세 가지의 단계로 구분되는 생명주기를 갖는다.Mount컴포넌트가 생성되는 순간, 즉 컴포넌트가 화면에 처음 렌더링되는 시점이다.Update마운트 이후에 컴포넌트가 다시 렌더링되는 시점이다.Unmount렌더링에서 제외되는 순간, 즉 컴포넌트가 화면에서 사라지는 시점이다. useEffectuseEffect란?useEffect는 컴포넌트의 사이드 이펙트를 제어하는 훅이다. 리액트에서의 사이드 이펙트란 어떤 동작에 따른 부수적인 효과 또는 파생되는 효과다.useEffect 사용법useEffect(콜백.. 이전 1 2 3 4 5 ··· 9 다음