React 실습/관련 개념 정리 (8) 썸네일형 리스트형 [React] 자식이 부모에게 - 콜백 이용 - (2) # 블로그 좀 살피다가 자식 => 부모로 보내는 부분을 잘못 설명 한거 같아 추가 설명 하고자 함. # props를 함수로 이용한다고 보기보다 콜백을 이용하여 props를 전달 한다는게 더 맞는 표현 같음. 일반적으로 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해야 할 경우에는 콜백 함수 (Callback Function)을 사용하게 됩니다. 다음은 콜백 함수를 통해 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달하는 예시입니다 // 부모 컴포넌트 import React, { useState } from 'react'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const [messageFromChild.. 에디터 quill Events text-change Emitted when the contents of Quill have changed. Details of the change, representation of the editor contents before the change, along with the source of the change are provided. The source will be "user" if it originates from the users. For example: User types into the editor User formats text using the toolbar User uses a hotkey to undo User uses OS spelling correction Chang.. [React] 자식이 부모에게 - 콜백 이용 + 알아야 할 것 함수를 props로 사용하여 자식 컴포넌트가 부모와 통신이 가능하도록 하는 방법 + 실습 Player 컴포넌트를 삭제하는 것을 구현 자식이 부모와 통신 앞에서 부모가 자식에게 통신하기 위해서 props를 이용했고, props는 단방향 통신이고 위에서부터 아래로 흐리기 때문에 수정하면 안되는 read only 성격을 가진다고 하였다. 그러면, 반대로 자식이 부모에게 통신할려면 어떻게 해야 하나? 마찬가지로 props를 이용한다. 차이점은 props의 타입을 function 형태로 내려준다. 자식이 function 타입의 props를 받아서 호출하게 되면 부모의 function이 실행이 되므로 결국 자식이 부모와 통신하는 방법이 된다. 부모와 자식간의 통신, 자식이 부모와 통신하는 방법은 .. 리덕스 개념정리 - redux-actions 💥 redux-actions yarn add redux-actions 액션 생성 함수를 더 짧은 코드로 작성할 수 있게 해준다. 리듀서를 작성할 때 switch문이 아닌 handleActions라는 함수를 사용할 수 있게 해준다. 💥 createAction 액션 생성 함수를 만들어주는 함수이다. 직접 객체를 만들 필요 없어 훨씬 간단하다. createAction을 사용하지 않았을 때 const CHANGE_USER = 'user/CHANGE_USER'; // 액션 생성 함수 export const change_user = user => ({type: CHANGE_USER, user}); createAction을 사용했을 때 import { createAction } from 'redux-actions';.. 리덕스사가 - takeLatest, takeEvery, all takeLatest takeLatest는 특정 액션 타입에 대하여 디스패치된 가장 마지막 액션만을 처리하는 함수입니다. 예를 들어서 특정 액션을 처리하고 있는 동안 동일한 타입의 새로운 액션이 디스패치되면 기존에 하던 작업을 무시 처리하고 새로운 작업을 시작합니다. takeEvery takeEvery는 특정 액션 타입에 대하여 디스패치되는 모든 액션들을 처리하는 것 all all 은 배열 안의 여러 사가를 동시에 실행시켜줍니다. 리덕스사가 - Generator, redux-saga, combineReducers 리덕스사가 redux-saga의 경우엔, 액션을 모니터링하고 있다가, 특정 액션이 발생하면 이에 따라 특정 작업을 하는 방식으로 사용합니다. 여기서 특정 작업이란, 특장 자바스크립트를 실행하는 것 일수도 있고, 다른 액션을 디스패치 하는 것 일수도 있고, 현재 상태를 불러오는 것 일수도 있습니다. redux-saga는 redux-thunk로 못하는 다양한 작업들을 처리 할 수 있습니다. 예를 들자면.. 비동기 작업을 할 때 기존 요청을 취소 처리 할 수 있습니다 특정 액션이 발생했을 때 이에 따라 다른 액션이 디스패치되게끔 하거나, 자바스크립트 코드를 실행 할 수 있습니다. 웹소켓을 사용하는 경우 Channel 이라는 기능을 사용하여 더욱 효율적으로 코드를 관리 할 수 있습니다 API 요청이 실패했을 때.. useSelector란? useSelector는 리액트의 리덕스 스토어 관련 Hook중 하나이다. 이 Hook은 스토어의 상태값을 반환해주는 역할을 한다. useSelector를 사용한 함수에서 리덕스 스토어의 상태값이 바뀐 경우( 버튼 클릭 등의 이벤트를 통해 액션이 실행되어 상태값이 변경된 경우) 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링 시킨다. 1. useSelector 사용을 위한 react-redux 설치 npm install react-redux yarn add react-redux useSelector를 사용하기 위해서는 react-redux를 설치해야 한다. 2. useSelector 형식 import { useSelector } from 'react-redux'; const fruitList = us.. 리덕스 단어 개념 정리 1. 리덕스에서 사용되는 키워드 숙지하기 리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다. 액션 (Action) 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다. { type: "TOGGLE_VALUE" } 액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다. { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } { type: "CHANGE_INPUT", text: "안녕하세요" .. 이전 1 다음
