분류 전체보기 (121) 썸네일형 리스트형 TIL) useState의 두가지 업데이트 방식, 비동기적 동작과 batch처리 1. 함수형 업데이트 setState 사용 방식에는 일반적 사용법, 함수형 업데이트 방식이 있다. // 기존에 우리가 사용하던 방식 setState(number + 1); // 함수형 업데이트 setState(() => {}); 위 함수형 업데이트의 ()안에는 수정할 값이 아닌 함수를 넣을 수 있다. 그 함수의 인자에서는 현재의 state를 가져올 수 있고, {}안에는 이 값을 변경하는 코드를 작성할 수 있다. // 현재 number의 값을 가져와서 그 값에 +1을 더하여 반환한 것 입니다. setState((currentNumber)=>{ return currentNumber + 1 }); 2. 두 방식의 차이점 일반 업데이트 방식은 onClick안에서 setNumber(number+1)를 3번 호출했.. 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 : 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.. 이전 1 ··· 9 10 11 12 13 14 15 16 다음
