본문 바로가기

기록

 (53)
[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(콜백..
[TIL] State 끌어올리기 / useRef State 끌어올리기리액트에서는 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성하는데 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다. 형제 관계에 있는 컴포넌트들은 state를 전달할 방법이 없어 state를 계층 구조상 위로 끌어올려 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만들어야 한다. 이러한 방법을 State 끌어올리기라고 표현한다.  props기능을 이용해서 부모에서 자식 방향으로만 데이터를 전달할 수 있다. 그래서 데이터들은 항상 위에서 아래로 하나의 방향으로만 흐르게 된다. 이를 단방향 데이터 흐름이라고 부른다.  useRef useRef란?useRef 메서드는 레퍼런스를 사용하기 위한..
[TIL] React Hooks / useState / Custom Hook React HooksReact Hooks란?리액트 훅이란 클래스 컴포넌트에서만 이용할 수 있는 리액트의 특수한 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들이다. React Hooks 종류리액트 훅은 매개변수가 1개인 것과 2개인 것으로 나눌 수 있다.매개변수 개수훅 함수1개useState, useRef, useImperativeHandle, useContext2개useMemo, useCallback, useReducer, useEffect, useLayoutEffect 매개 변수가 1개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.훅_메서드(값) 매개 변수가 2개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.훅_메서드(콜백_함수, 의존성_목록) React H..

티스토리툴바