Sparta x 이노베이션 캠프/React (28) 썸네일형 리스트형 TIL) 리덕스에 저장된 데이터가 변경 되었을 때, 어떤 과정을 거쳐 리덕스 스토어를 구독중인 컴포넌트 A가 변경된 값을 가져올까? 리덕스 전체적인 흐름도 1. UI에서 컴포넌트 내에 존재하는 이벤트가 호출됩니다. 2. 이벤트와 연결된 액션생성자(Action Creator)가 호출됩니다. 3. 액션 생성자(Action Creator)에서 생성된 Action이 호출됩니다. 4. Action이 Reducer로 전달됩니다. 이 과정을 dispatch에서 담당합니다. 5. Reducer 에서 dispatch 된 액션에 따라 상태값을 변경합니다. 6. 변경사항이 Rendering 되어 UI에 나타납니다. WIL) React 라이프 사이클(함수형 vs 클래스형) , React hooks React 라이프 사이클 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다. 그런데 왜 우리는 클래스형 컴포넌트보다 함수형 컴포넌트를 많이쓸까? 리액트 공식 매뉴얼에서 함수형 컴포넌트를 더 권장하기 때문이다. (리액트 16.8버전부터 등장한 React Hooks으로 라이프 사이클 함수를 대체할 수 있음.) LifeCycle 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 라이프 사이클은 크게 세 단계로 나누어진다. 생성될 때Mount), 업데이트 할 때(Update), 제거할 때(Unmount)로 나누어진다. Mount: 처음 컴포넌트를 불러와 생성하는 단계 Update: 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계 1. p.. TIL) React 입문_Prop Drilling, object literal Prop Drilling ? Rrop Drilling은 props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정 예 ) 간단한 토글 컴퓨넌트 작성 function Toggle() { const [on, setOn] = React.useState(false) const toggle = () => setOn(o => !o) return ( The button is {on ? 'on' : 'off'} Toggle ) } 위 컴포넌트를 2개 컴포넌트로 리팩토링 한다. function Toggle() { const [on, setOn] = React.useState(false) const toggle .. TIL) React 리덕스 리덕스는 전역상태관리 저장소 전역상태 관리 저장소. 부모, 자식 컴포넌트와는 별도로 존재하는 데이터 베이스. propsdrilling : 부모에서 마지막 자식 컴포넌트에게 전달해주어야 하는 props 때문에 다른 자식 컴포넌트들까지 불필요한 데이터를 갖고있는 상태. 전역상태관리라이브러리 이용시 이 문제가 해결 됨. 전역상태관리 흐름 1. 전역으로 볼 수 있는 데이터가있다. 2. 데이터를 참조, 수정 하는 컴포넌트들이 있다. 3. 바뀐 값을 모두 보게 해줘야 한다. 스토어 : 데이터 저장 공간 리듀서 : 데이터 수정 공간 (1) 리덕스 Store를 Component에 연결한다. (2) Component 에 상태 변화가 필요할 때 Action을 부른다. (3) Reducer를 통해 새로운 상태 값을 만들고,.. TIL) 라우팅: useHistory 로 뒤로가기 버튼 만들기 1. NotFound.js에서 useHistory 먼저 가져오기 import { useHistory } from "react-router-dom"; 2. 버튼 만들어주기 import React from "react"; import { useHistory } from "react-router-dom"; const NotFound = (props) => { return ( 주소가 올바르지 않아요! 뒤로가기 ); }; export default NotFound; 3. useHistory로 뒤로가기 만들기! import React from "react"; import { useHistory } from "react-router-dom"; const NotFound = (props) => { let history.. TIL) (React) Router: Switch 사용자가 미리 정하지 않은 주소로 들어온 경우, Not Found 페이지로 보내주기 1. NotFound.js 파일 만들고 빈 컴포넌트 만들기 import React from "react"; const NotFound = (props) => { return 주소가 올바르지 않아요!; }; export default NotFound; 2. App.js 에서 import 해 줌 import NotFound from "./NotFound"; 3. Switch를 추가해주고, 4. NotFound컴포넌트를 Route에 주소 없이 연결하면 끝! ... import {Route, Switch} from "react-router-dom"; ... return ( ... < S.. TIL) 내 버킷리스트 만들기 - 라우팅, React 버킷리스트의 목록을 누르면, 상세페이지로 이동하게 만들기 힌트: 1. Detail.js라는 파일 하나를 만들고 컴포넌트를 만드세요! 2. 어떤 버킷 리스트 항목을 눌러도 그 페이지로 가게 해볼거예요! 3. history.{}를 써봐요! ({}엔 뭐가 들어갈까요?) 4. 꼭 코드스니펫을 복사해서 써주세요. 5. 버킷리스트 컴포넌트에서는 useRef를 쓰는 대신 element에 직접 onClick을 줘서 해봅시다! 순서: 1. index.js 에 import {BrowserRouter} , 2. Detail.js file 만들고 import React, function Detail() , return 안에 태그로 상세페이지 입니다! 출력되도록 export default Detail; 3. App.js에서 i.. TIL) 라우팅이란? 라우팅이란? SPA방식. 서버에서 주는 html이 1개 뿐인 어플리케이션. 전통적 웹사이트는 페이지 이동 때마다 서버에서 html, css, js (=정적자원들) 을 내려준다면, SPA는 딱 한번만 정적자원을 받아옴. 왜 html을 하나만 줄까? 사용성 때문에. 페이지를 이동시마다 서버에서 주는 html로 화면을 바꾸다보면 상태유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적. MPA (Multiple Page Application) 방식은 상태값 유지가 안됨. 유저가 불편함. SPA의 단점은 모든 정적자원을 다 가져오기 때문에 로딩속도가 느려질 수 있음. 그렇지만 이후 페이지를 왔다갔다 하는 속도는 빠름. 이미 자원을 다 가지고있기 때문에. react-router-dom package 설치.. 이전 1 2 3 4 다음
