Sparta x 이노베이션 캠프 (69) 썸네일형 리스트형 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 설치.. TIL) eventListener eventListener 클래스형 컴포넌트에서 eventListener 구독하기, mouseover 시에 색깔 바뀌게 하기 import logo from './logo.svg'; import './App.css'; import React from "react"; import Text from "./Text"; class App extends React.Component{ constructor(props){ super(props); this.state = {}; this.circle = React.createRef(null); } hoverEvent = (e) = > { console.log(e.target); // 이 이벤트가 발생한 요소가 뭔지 보여줌 console.log(this.circle.curr.. TIL) Ref Ref 은 이름표다! 클래스형 컴포넌트에서 만드는 방법 예) this.text = React.createRef(); (=텍스트에 Ref를 만들어 주자) 그러면 타겟인 "text" 가 있는 div옆에 (적용 끝) component DidMount() 로 ref 적용이 잘 되었는지 확인 해 줄 수 있다. ... this.state = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"] }; this.text = React.createRef(); } componentDidMount() { console.log(this.text); } return ( ...중략... ); } } ... 콘솔을 보면 {current: input} 이라고 뜸. console.log(this.text.current.. 이전 1 ··· 4 5 6 7 8 9 다음
