Front-End/React15 [React] 리덕스 모듈 만들기 리액트 프로젝트에 리덕스를 적용하기 위해서 리덕스 모듈을 만들어보도록 하겠습니다. 리덕스 모듈이란 다음 항목들이 모두 들어있는 자바스크립트 파일을 의미합니다. 액션 타입 액션 생성함수 리듀서 리덕스를 사용하기 위해 필요한 위 항목들은 각각 다른 파일에 저장 할 수도 있습니다. 리덕스 GitHub 레포에 등록되어있는 예제 프로젝트를 보면 다음과 같이 코드가 분리되어 있습니다. actions index.js reducers todos.js visibilityFilter.js index.js 위 예제 프로젝트에서는 액션과 리듀서가 서로 다른 파일에 정의되어있습니다. 하지만, 이 코드들이 꼭 분리되어있을 필요는 없습니다. 이 코드들이 서로 다른 디렉터리에, 그리고 서로 다른 파일에 분리가 되어있으면 개발을 하는.. 2021. 6. 4. [React] Redux 사용하기 키워드 (Keyword) 액션 (Action) 상태에 변화가 필요하게 될 때 액션을 발생시킵니다. 하나의 객체로 표현이 됩니다. { type: "TOGGLE_VALUE" } 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다. { type: "ADD_TODO", data: { id: 0, text: "프론트엔드 개발자 되기" } } 액션 생성함수 (Action Creator) 액션 객체를 만들어 주는 함수입니다. export function addTodo(data){ return { type: "ADD_TODO", data } } // 화살표 함수도 가능합니다 export const addTodo = data => { return { type: ".. 2021. 6. 4. [React] Redux란 ? 리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트 상태관리 로직을 다른 파일들로 분리시켜 더욱 효율적으로 관리할 수 있으며, 글로벌 상태관리도 손쉽게 할 수 있습니다. 허나 요즘은 Context API + useReducer를 사용해서도 상태 관리를 할 수 있습니다. ❓ Context를 쓰는 거랑 어떤 차이점이 있을까? 1.미들웨어 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행.. 2021. 6. 4. [React] react-router-dom switch, NavLink Switch는 여러 라우트 중 가장 먼저 매칭된 라우터 하나만을 보여줍니다. Switch는 어떨 때 유용하냐면, 페이지를 못찾았을 때(404 Not Found) 즉, 페이지가 아무것도 일치하지 않았을 때 보여줄 페이지로 사용하면 유용합니다. App.js import React from 'react'; import { Switch, Route, Link } from 'react-router-dom'; import About from './About'; import Home from './Home'; import Profiles from './Profiles'; import HistorySample from './HistorySample'; const App = () => { return ( 홈 소개 프로필.. 2021. 6. 4. [React] react-route-dom withRouter withRouter는 라우터 컴포넌트가 아닌 곳에서 match, location, history를 props로 받아와서 사용하게 해줍니다. src/WithRouterSample.js import React from 'react'; import { withRouter } from 'react-router-dom'; const WithRouterSample = ({ location, match, history }) => { return ( location match history.push('/')}>홈으로 ); }; export default withRouter(WithRouterSample); Profiles.js 에서 렌더링하기 src/Profiles.js import React from "react";.. 2021. 6. 4. [React] react-route-dom history history 객체 history 객체는 라우트로 사용된 컴포넌트에게 match, location 과 함께 전달되는 props 중 하나입니다. 이 객체를 통하여, 우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근을 할 수 있습니다 - 뒤로가기, 특정 경로로 이동, 이탈 방지 등.. src/HistorySample.js import React, { useEffect } from "react"; function HistorySample({ history }) { const goBack = () => { history.goBack(); }; const goHome = () => { history.push("/"); }; const replaceToHome = () => { history.replac.. 2021. 6. 3. [React] 서브라우트 서브 라우트는, 라우트 내부의 라우트를 만드는것을 의미합니다. 컴포넌트를 만들어서 그 안에 또 Route 컴포넌트를 렌더링하시면 됩니다. 서브 라우트 만들어보기 한번 Profiles 라는 컴포넌트를 만들어서, 그 안에 각 유저들의 프로필 링크들과 프로필 라우트를 함께 렌더링해보겠습니다. src/Profiles.js import React from "react"; import Profile from "./Profile"; import { Link, Route } from "react-router-dom"; function Profiles() { return ( 사용자 목록 meanbymin homer 사용자를 선택해주세요} /> ); } export default Profiles; 위 코드에서 첫번째 Ro.. 2021. 6. 3. [React] Router에서 파라미터와 쿼리 페이지 주소를 정의할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉠 수 있습니다. 파라미터: /profiles/meanbymin 쿼리: /about?detail=true 이것을 사용하는것에 대하여 무조건 따라야 하는 규칙은 없지만, 일반적으로는 파라미터는 특정 id 나 이름을 가지고 조회를 할 때 사용하고, 쿼리의 경우엔 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용됩니다. URL Params Profile 페이지에서 파라미터를 사용해보겠습니다. /profile/meanbymin 이런식으로 뒷부분에 username을 넣어줄 때 해당 값을 파라미터로 받을 수 있습니다. Profile이라는 컴포넌트를 만들어서 파라미터를 받아오는 예제 코드를 작성.. 2021. 6. 3. [React] Route 라우터 SPA란 Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. 요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문입니다.. 2021. 6. 3. 이전 1 2 다음
