Fe-Dev/React.js

저번 글에 이어서 React Router 의 응용방법에 대해 간략히 정리하는 글이다. React Router 를 이용해 페이지 이동을 할 때 파라미터를 보내는 방법과 강제로 페이지를 이동하는 방법에 대해 정리하려 한다. ✔︎ Path Variable 첫번째로 path Variable 이다. 사용방법은 아래와 같다. Route에서 path에 ":" 을 붙이고 이어서 파라미터명을 넣어주면 된다. import "./App.css"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Ed..

React Router를 사용하여 page를 이동하는 방법에 대해 간략히 정리하는 글이다. React는 SPA방식으로 구성되어 있는데 Router 사용방법전에 MPA 와 SPA에 대해 짚고 넘어갈 필요가 있다. ✔︎ MPA(Multiple Page Application) 와 SPA(Single Page Application) MPA란 여러개의 페이지로 구성되어 있는 어플리케이션을 말한다. 클라이언트(브라우저)가 서버로 URL을 통해 페이지 요청을 보내면 서버는 클라이언트에게 요청 url에 맞는 페이지를 반환하여 표출한다. 페이지 이동을 할 때 화면이 깜빡이면서 페이지가 이동되는 것이 MPA의 특징이다. 반면 SPA의 경우 단일 페이지로 구성되어 있기 때문에 클라이언트가 서버로 URL을 통해 페이지 요청을..

Props Drilling 을 개선하기 위한 Context 사용법에 대해 간략히 정리한 글이다. ✔︎ Props Drilling 이란 ? PropsDrilling이란 하위 컴포넌트가 상위 컴포넌트로부터 받은 props를 따로 사용하는게 아니라 자신의 다른 하위 컴포넌트에게 오로지 넘겨주기만 하는 데이터 전달 과정을 말한다. 위 화면은 React를 공부하면서 인프런 강의를 듣고 만들고 있는 간단한 react app 이다. App 컴포넌트에 하위 컴포넌트로 DiaryEditor 와 DiaryList 가 있고 DiaryList는 게시글 list를 props로 받아 하위컴포넌트인 DiaryItem으로 구성되어 있다. 위 구조를 도식화 해보면 아래와 같다. 위 그림에서 App 컴포넌트가 게시글 list(diary..

useReducer 를 공부하면서 간략히 정리하는 글이다. ✓ useReducer 언제 사용할까 컴포넌트 내에서 하나의 state를 여기저기서 setState를 호출하여 다른 값으로 상태를 바꿔주고 있다면 추후 state를 업데이트중 장애/오류가 있을 시 유지/보수 및 관리하기에 어려움이 있다. 이런 경우에는 컴포넌트 밖으로 따로 빼서 한 곳에서 관리하는 것이 가독성도 좋고 유지/보수 측면에서도 용이할 것이다. useReducer 는 위와 같은 상황에서 state별로 관리할 때 유용하게 사용할 수 있는 React Hook이다. ✓ useReducer 사용방법 useReducer를 적용하기 전 아래의 예시코드를 확인해보자. import "./App.css"; import DiaryEdtior from "...

지난 글에서 React.memo를 사용하여 최척화하는 방법에 이어서 React Hooks의 useCallback을 사용하여 최적화하는 방법에 대해 간략히 정리하는 글이다. React.memo는 동일한 props가 동일한 결과를 렌더링 할때 하위 컴포넌트의 리렌더링을 하지 않고 마지막 렌더링 결과를 재사용한다고 정리를 했었다. 하지만 이전props와 다음 props의 비교 방식이 얕은 비교 방식이기에 Object(객체) 비교에서 문제가 됐었고 이를 두번째 인자에서 areEqual 함수를 넘겨주어 props로 넘어온 객체의 프로퍼티를 비교하여 true/false를 반환하여 해결했다. 넘어오는 props가 객체 리터럴이라면 위의 방식으로 해결이 가능하겠지만 함수가 넘어온다면 위 방식으로는 조금 곤란할 수 있다..

저번글에서 React Hooks 중 useMemo를 사용하여 최적화하는 방법에 이어 React.memo를 사용하여 최적화를 하는 방법에 대해 간략히 정리하는 글이다. useMemo는 컴포넌트 내 특정 state나 props의 값이 바뀔 때만 콜백 함수를 수행하여 return 값을 업데이트하는 방식으로 최적화를 했다. React.memo는 이와는 다른 방식으로 컴포넌트가 동일한 props로 동일한 결과를 렌더링 한다면 컴포넌트를 리렌더링하지 않고 마지막으로 렌더링한 결과를 재사용한다. 한가지 주의점은 React.memo는 props로 전달받은 값의 변화에만 영향을 주고 React.memo로 감싸진 함수형 컴포넌트 내 state의 변화는 React.memo와 상관없이 다시 렌더링 된다. 1. React.me..

React Hooks중 useMemo를 사용하여 react 최적화를 하는 방법에 대해 간략히 정리하는 글이다. 컴포넌트에서 state나 props의 값이 바뀌면 해당 컴포넌트는 리렌더링이 되면서 컴포넌트 내 실행되는 함수들도 재호출 된다. 재호출 되는 함수들중에 특정 state나 props가 바뀌어야만 return되는 값에 영향이 있는 함수라면 굳이 매번 재호출할 필요없이 해당 state나 props가 바뀔때 만 호출되면 된다. useMemo는 이런 기능을 제공함으로써 불필요한 연산을 줄여 최적화에 도움을 준다. useMemo의 사용방법은 아래와 같다. import { useMemo } from "react"; 우선 useMemo를 사용하기 위해 위와 같이 import한다. const result = u..

react.js 를 공부하면서 useEffect의 사용법에 대해 간략히 정리하는 글이다. useEffect 에 대해 정리하기 이전에 react 컴포넌트의 Lifecycle(생명주기) 부터 짚고 넘어가야할 필요가 있다. React Component Lifecycle(생명주기) react 컴포넌트의 생명주기는 위와 같이 크게 Mount, Update, Unmount 3가지로 나눌 수 있다. 1. Mount 컴포넌트가 최초로 렌더링되어 화면에 나타나는 것을 말하는데 이때 초기화 작업등의 특정 작업을 수행하고 싶다면 ComponetDidMount 메소드를 사용하면 mount 되는 시점에 작업을 수행할 수 있다. 2. Update 컴포넌트내에서 관리하는 state 나 props가 바뀌어 리렌더링 되는 것을 말하는..