전체 글 (118) 썸네일형 리스트형 TIL : JavaScript filter() 구문 arr.filter(callback(element[, index[, array]])[, thisArg]) 매개변수: 함수를 정의할 때 사용되는 변수 (인수는 함수가 호출될 때 매개변수에 담기는 실제 값) 매개변수 = 인자 = parameter 인수 = arguement callback 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버린다. 다음 세가지 매개변수를 받는다. element : 처리할 현재 요소 index: 처리할 현재 요소의 인덱스 array: filter를 호출한 배열 thisArg: callback 실행시 this로 사용하는 값 반환 값 테스트를 통과한 요소로 이루어진 새로운 배열. 어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환. 설명 .. TIL: JavaScript 구조분해할당 구조분해할당 객체와 배열는 자바스크립트에서 가장 많이 쓰이는 자료구조이다. 키를 가진 데이터 여러 개를 하나의 엔티티에 저장할 땐 객체를, 컬렉션에 데이터를 순서대로 저장할 땐 배열을 사용한다. 개발을 하다 보면 함수에 객체 또는 배열을 전달해야 하는 경우가 생기는데 그 중 데이터 전체가 아닌 일부만 필요한 경우가 생기기도 한다. 이럴 때 객체나 배열을 변수로 '분해'할 수 있게 해주는 특별한 문법 구조인 구조 분해 할당(destructuring assignment)을 사용할 수 있다. 이 외에도 함수의 매개변수가 많거나 매개변수 기본값이 필요한 경우 등에서 구조분해는 그 진가를 발휘한다. 분해는 파괴를 의미하지 않는다. 어떤 것을 복사한 이후 변수로 분해하여 코드의 양이 줄어든다. 배열이 어떻게 변수로.. 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 ··· 9 10 11 12 13 14 15 다음
