Web Front-End (41) 썸네일형 리스트형 React 리덕스 리덕스는 리액트에서 가장 많이 사용하는 상태관리 라이브러리이다. 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 따라서, 전역 상태를 관리할때 굉장히 유용하다곤... 하지만 전역상태기 때문에 남발하면 혼란을 가중 시킬 수도 있다고 생각한다.!! 여튼 단순 전역 상태 관리면 Context API만으로도 충분하고 프로젝트 규모가 커지면 리덕스를 사용하는게 좋다고한다. 또한 개발자 도구도 지원하며 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수있게 해준다고 한다. ## 설치방법 $ yarn create react-app $ cd $ yarn add redux react-redux 리덕스를 주로 사용하는 패턴으로는 프리젠테이셔널 컴포넌트, 컨테.. React Function as a child or Render Props 아래 코드의 Cumsumer 사이에 중괄호를 넣어 함수를 넣어준 것 처럼 컴포넌트의 자식에 있어야할 자리에 JSX나 문자열이 아닌 함수를 전달하는 패턴을 "Function as a child" 또는 "Render Props" 라고 불린다. const ColorBox = () => { return ( {(value) => ( )} ); }; React Context API 1. Context API Context API는 리액트 프로젝트에서 전역으로 사용할 데이터가 있을 때 유용한 기능 Vue에 Vuex가 존재하는 것처럼 리액트에서는 Redux, MobX 같은 상태 관리 라이브러리를 사용하여 전역 상태 관리 작업을 처리한다. v16.3 업데이트 이후 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 사용하지 않아도 전역 상태를 손쉽게 관리할 수 있다. 음.. Vue의 EventBus 같은 기능인가?? 새로운 Context를 만드려면 react의 createContext 함수를 사용해야하고 파라미터로는 해당 Context의 기본 상태를 지정한다. 2. Customer Customer를 통해 props 같은 상태 값을 가져온다. const ColorBox = .. 일반 함수와 화살표 함수 1. 화살표 함수는 ES6 문법에서 새로 등장한 방식이다. 2. 화살표 함수는 주로 함수를 파라미터로 보낼때 사용한다. 3. 일반 함수는 자신이 종속된 객체를 this를 가리킨다. 4. 반면 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 5. 화살표 함수에 {} 를 열어 주지 않으면 연산한 값 그대로 리턴한다. React Router 적용 1. 프로젝트 생성(미 생성시) $ yarn create react-app $cd $yarn add react-router-dom 리액트 라우터를 설치할 때는 yarn을 이용하여 react-router-dom을 설치해야한다. 2. Router 적용 src/index.js 파일에 react-router-dom에 내장 되어 있는 BrowserRouter라는 컴포넌트로 감싸야한다. BrowserRouter는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줌 import React from "react"; import ReactDOM from "react-dom"; impor.. React SPA(Single Page Application) 1. SPA란? SPA가 아닌 기존 웹은 페이지 이동이 일어날때 마다 서버단으로부터 새로운 HTML을 받아 오고, 받아온 리소스를 해석한 후 브라우저에 보여줬다.(서버에서 렌더링해줌) 새로운 화면을 보여줘야할 때마다 서버로 요청을 한다면 성능상에 문제가 발생할 수 있으므로 Front/Back을 분리하여 React같은 프레임워크를 사용하여 뷰 렌더링을 전담으로 하도록 하고, 인터랙션이 발생하면 필요한 부분만 자바스크립트를 통하여 업데이트 해준다. SPA에서 다른 화면을 보여주는 것을 "라우팅"이라고 불린다. 리액트에서 라우팅 라이브러리는 react-router, reach-router, Next.js 등 여러 가지가 존재한다. (Vue-Router랑 비슷할듯) 2. SPA의 단점 장점이 있으면 단점도 있는.. React immer 1. immer immer 라이브러리를 통해 불변성을 유지하는 작업을 쉽게 처리할 수 있다. 첫 번째 파리미터는 수정하고 싶은 파라미터이고 두 번째 파리미터는 상태를 어떻게 업데이트할지 정의 state의 불변성을 유지하면서, 새로운 상태를 생성해준다. import produce from 'immer'; const nextState = produce(originalState, draft => { // 바꾸고 싶은 값만 바꾸기 draft... = ; }); React 컴포넌트가 리렌더링이 발생하는 상황 1. 컴포넌트가 리렌더링이 발생하는 상황 자신이 전달 받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 이전 1 2 3 4 5 6 다음
