반응형
반응형
1. Context API 란? 전역적으로 사용해야되는 데이터를 관리하는 기능 context API 는 context 에서 무언가 변경이 일어날때 context 를 사용하는 컴포넌트가 어떤것이있는지 관련이있는지를 알아내서 바꾸는게 아닌 useContext 를 사용하는 모든 컴포넌트가 재 랜더링되게된다. 그렇기 때문에 최적화 측면에서 많은 반복이 있는 state 들을 관리하기 적합하지않다. 그런경우는 보통 전역적인 state 를 관리하고 최적화까지 이뤄지는 redux 를 사용하는것이 낫다. 그래서 주로 인증상태나 테마 같은 경우 사용된다. ( 고반복적인 관리가 필요없는것들 ) 2. 사용방법 root/index.js import React from "react"; import ReactDOM from "re..
리액트의 상태 관리 useState, useReducer 등으로 상태를 관리하게된다. 여기서 이 상태관리와 리액트간에 state를 처리하는 과정을 이해해보자 state 상태 업데이트 상태를 업데이트 하기위해서 useState 를 사용한다면 set~ 이름의 useState 를 사용해서 업데이트 할것이다. 그런데 업데이트 바로 직후에 state 값이 반영될것같지만 그렇지않다. 즉각적으로 바뀌지않고 상태 업데이트 예약을 하게된다. 이같은 이유는 리액트는 잠재적으로 우선순위에 따라 처리를 하기때문이다. 사용자가 입력할수있는 공간이 있다면 사용자 입력을 응답하는것이 화면에 문자를 변경하는것보다 더 우선이되야되겠죠 이러한 이유 때문에 상태 변경에대한 업데이트를 지연시키게된다. ( 하지만 너무빨라서 거의 사람에 눈으..
React.memo ? 컴포넌트는 기본적으로 props, state, comtext 이 변경되면 리렌더링이된다. 다만 부모 컴포넌트에서 변경되면 자식컴포넌트또한 리렌더링되게되는데 만약에 자식컴포넌트는 변함이없는데 부모컴포넌트 때문에 자식까지 불필요하게 리렌더링된다면? 이것은 자원낭비이다. 이를 막아주는 훅으로 React.memo 의 인자로 들어가는 컴포넌트들의 props 들을 확인한다. 입력되는 모든 props 의 신규값을 확인한뒤 기존의 props 값과 비교하여 리액트에 전달한다. 값이 바뀐경우만 컴포넌트를 재실행 한다. 이렇게 성능 최적화를 하게된다. 이때드는 의문점, 그럼 모든 컴포넌트에 다 적용하면 최적화가 되지않을까? 이말은 틀렸다. 결국에 해당 컴폰너트 들의 props들을 비교하기위해서 드는 ..
1. 라우팅이란 ? 웹앱에서의 라우팅은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는것을 의미한다. 여기서 여러페이지로 구성된 웹페이지에서 페이지별로 컴포넌트를 분리해가며 프로젝트를 관리하기위해 필요한것이 라우팅 시스템이다. 우리는 React-Router 를 사용해서 예제를 해보자 2. 싱글 페이지 어플리케이션이란? 말그대로 한개의 페이지로 이루어진 어플리케이션 이다. 기술적으로는 한페이지만 존재하는것이지만, 사용자는 여러 페이지가 존재하는것처럼 느낀다. React-Router 는 링크를눌르면 브라우저에 History API 를 사용해 주소창 값만 변경하고 기존 페이지의 웹 어플리케이션은 유지 하면서 라우팅설정에따른 다른 페이지를 보여주는 방식이다. 3. 리액트 라우터 적용 및 사용법 3.1 프..
현재 진행하고있는 프로젝트 에 라우트 적용해보기 현재 redux 를 사용하고있는 todo 프로젝트에 라우터를 적용하여 todo를 클릭했을때 ? 상세 페이지를 띄우게 만들어보자. 이과정을 하게되면서 문제를 해결하는 과정도 기록해보자. 1. 프로젝트에 라우터 라이브러리 설치 $ npm install react-router-dom2. 프로젝트 라우터 적용 루트 디렉토리에 index.js 파일에 react-router-dom 내장 컴포넌트 BrowerRouter 컴포넌트를 사용하여 감싸준다. 이 컴포넌트는 간단하게 HTML5 의 History API 를 사용해 주소경로에 관련된 정보를 리액트 컴포넌트에서 사용할수있도록 해준게하는 컴포넌트 이다. 사용해보면서 이해해보자 index.js import React fr..
리덕스 ? 리액트에서 사용률이 높은 상태관리 라이브러리이다. 상태관련 로직들을 다른파일로 분리하여 효율적으로 관리 할수있으며 글로벌 상태 관리도 쉽게 할수있다. Context API 와 useReducer Hook 을 사용해서 개발하는 흐름과 리덕스는 굉장히 유사 하다. Context API 와 차이점 ? 1. 미들웨어 리덕스에는 미들웨어라는 개념이 있다. 미들웨어를 통해서 액션 객체가 리듀서에서 처리되기 전에 원하는 작업을 수행할수있도록 만들수있다. 특정 조건에따라 액션이 무시됨 액션을 콘솔에 출력하거나 , 서버에 로깅할수있음 액션이 디스패치됐을대 이를 수정해서 리듀서에 전달할수있음 특정 액션이 발생했을때 다른액션을 발생하게할수있음 특정 액션이 발생했을때 특정자바스크립트 함수를 실행시킬수있다. 주로 비..