본문 바로가기
반응형

전체 글266

리액트 리덕스 모듈 생성 (덕스 구조) 덕스(Ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. 예를 들어 액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다. 하지만, 덕스 구조는 모양새로 묶는 대신 기능으로 묶어서 작성한다. 예를 들어 같은 기능을 가진 action, actionCreator, reducer을 한 파일에 넣는 것이다. 덕스 구조의 예시는 아래와 같다 // widgets.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widgets/CREATE'; const UPDATE = 'my-app/widgets/UPDATE'; const REMO.. 2021. 9. 3.
리덕스를 통한 리액트 상태관리 흐름도 리덕스를 통한 리액트 상태관리 흐름도 GitHub - SangHun-OH/Sparta-React Contribute to SangHun-OH/Sparta-React development by creating an account on GitHub. github.com - 위의 BucketList Projects 에서 여지껏 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있다. 또한 추가하기 버튼도 App.js에 있다. - 컴포넌트를 만들어 분리하면, 자식 컴포넌트는 부모 컴포넌트의 state를 맘대로 조작할 수 없기 때문에 컴포넌트화 시키기 어렵다. - 이와 같은 경우에는, App 컴포넌트와 AddListItem 컴포넌트가 같은 데이터 저장소를 사용하면 된.다 - 리덕스는 여러 컴포넌.. 2021. 9. 3.
리액트 리덕스란? (React Redux) 리액트 리덕스란? - 상태관리 라이브러리 - 전역 상태 관리를 도와주는 라이브러리 리액트 리덕스 설치 yarn add redux react-redux 리덕스 공식 홈페이지 Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 리덕스의 개념과 용어 리덕스 데이터를 한 곳에 넣고, 여기저기에서 꺼내볼 수 있게 해주는 것. 리액트와 별도로 사용할 수 있다. 상태관리를 위해 다른 프론트엔드 프레임워크/라이브러리와 함께 쓸 수 있다. State - 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. - 딕셔너리 형태({[key]: value})형태로 보관합니다. Action - 상태에 변화가 필요할 때(=.. 2021. 9. 3.
리액트에서 라우팅 처리 - 잘못된 주소 처리 잘못된 주소 처리 - 웹페이지 개발자가 미리 정하지 않은 주소로 들어온 경우를 다루는법 1. NotFound.js 파일을 만들고 빈 컴포넌트를 생성 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js에서 불러옵니다. import NotFound from "./NotFound"; 3. Switch로 Route를 감싸준다. 4. NotFound컴포넌트를 Route에 주소 없이 연결 5. 편의성을 위한 NotFound에 뒤로가기 버튼 생성 - NotFound 에서는 이미 history가 자동으로 넘어와진다. - 하지만 일부러 넘기려면 아래처럼 코딩한다. .. 2021. 9. 3.
리액트에서 라우팅 처리 리액트 라우터 설치 & 적용 - 리액트에서 라우팅을 처리하기 위해 라우터를 설치해주자 리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript develop.. 5sangs.tistory.com 리액트 페이지 전환 기능 만들기 1. index.js에 Browser Router 적용하기 import {BrowserRouter} from "react-router-dom" ReactDOM.render( , documen.. 2021. 9. 2.
리액트 라우터 설치 & 적용 0. 필요한 패키지 찾는법 npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www.npmjs.com - 위 사이트에서 필요한 패키지를 검색해보자 - 보통 상위에 노출되는 것을 사용하면 된다. - npm을 이용하여 설치하는 방법이 나와있다. - 자신이 yarn을 이용한다면 패키지 이름만 가져오면.. 2021. 9. 2.
SPA & 라우팅 기본개념 Single Page Application 이란? - 서버에서 주는 html이 1개 뿐인 어플리케이션. - 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다. - 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. - 사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있다. - 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다. → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문. 단점 - 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. - 한 .. 2021. 9. 2.
React Event Listener React Event Listener - 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것. - 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰인다. - 리액트는 컴포넌트가 실행되고 제거되기 때문에 리스너 또한 제거되기 전 반드시 해제해 주어야 한다. - 아래의 페이지에서 이벤트 리스너의 종류를 참고하자. 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 예시 - 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있다. - 이곳에서는.. 2021. 9. 2.
State 관리 - 함수형 컴포턴트 (useState, React Hooks) React Hooks - 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있다. 1. Nemo.js 생성 import React from "react"; const Nemo = (props) => { // 반환할 리액트 요소가 없을 때는 null을 넘겨준다. // 처음 껍데기 잡으실때도 null을 사용 return null; } export default Nemo; 2. App에서 Nemo.js 불러오기 import React from "react"; import Nemo from "./Nemo.js" class App extends React.Component { constructor(props) { super(props); }; componentDidMoun.. 2021. 9. 1.
반응형

티스토리툴바