본문 바로가기
728x90

전체 글66

React에서 redux 사용해보기 toolkit x 0. 리덕스 설치 // npm npm install react-redux // yarn yarn add redux react-redux - src - redux 폴더 생성 - `redux` 폴더 안에 `config`, `modules` 폴더를 생성 - 생성할 state들의 그룹 - `config` 폴더 안에 `configStore.js`파일을 생성 - 중앙 관리소인 Store를 만드는 설정 코드들이 있는 파일 - modules 폴더 안 store.js(store는 사이트 목적에 맞게) 1. 스토어 생성 // src/configStore.js import {createStore, combineReducers} from "redux"; import todo from "./modules/to.. 2022. 8. 22.
리액트 렌더링 조건 리액트를 사용하는 이유 중 하나인 SPA(single page application)를 구현하기 위해서는 렌더링 조건을 알아야 원활하게 사용할 수 있는 것 같다. 쉽게 이용할 수 있는 조건은 아래와 같다. 1. state(상태) 변경이 있을 때 react 에서는 유동적인 데이터를 저장하기 위해 state를 사용한다. react를 시작하면서 접하게 되는 useState 등이 이러한 상태라고 볼 수 있다. useState를 통한 state 값을 변경하기 위해서는 setState()를 이용해야 react가 state의 변경을 감지할 수 있다. - redux 등 전역 상태관리 라이브러리 또한 state 업데이트에 사용되기 때문에, 전역 상태가 변경되어도 리렌더링이 이뤄진다. 2. props값이 변경될 때 통상적.. 2022. 8. 20.
React 함수형 컴포넌트간 데이터 전송 https://hanbbistory.tistory.com/38 JS 유사배열과 배열의 차이 / 부모자식 컴포넌트의 관계 javaScript에서 유사배열과 배열의 차이 유사배열이란, Key 값이 숫자이고, length 값을 가지고 있는 객체로, 배열처럼 보이지만 배열이 아닌 object인 것을 말한다. 유사배열과 배열의 가장 큰 차이점 hanbbistory.tistory.com 부모 컴포넌트가 자식 컴포넌트에게 props를 통해 데이터를 전송해줄 수 있지만, 형제 컴포넌트끼리는 데이터 전송이 되지 않고, 자식 컴포넌트에서 부모 컴포넌트에게 데이터를 보내야 할 상황도 있다. 그렇다면 자식에서 부모, 또는 형제 컴포넌트간 데이터 전송은 어떻게 이뤄지는지 확인해보자 자식 => 부모 => 형제 useState를 .. 2022. 8. 17.
시간상 사각지대 TDZ TDZ란 일시적/시간적 사각지대로, 스코프의 시작-(TDZ)-초기화 시작 사이의 구간을 의미한다. 스코프의 시작- (TDZ) -초기화 시작 즉, 변수가 선언되고 변수의 초기화가 이뤄지기 전까지의 구간이다. 이 구간의 변수를 TDZ에 들어간 변수라고 표현한다. function do_something() { console.log(bar); // undefined console.log(foo); // ReferenceError var bar = 1; let foo = 2; } 시간상 사각지대인 이유는, 사각지대가 코드의 작성 순서(위치)가 아닌, 코드의 실행 순서(시간)에 의해 형성되기 때문에다. ex) let 변수 선언이 변수에 접근하는 함수보다 아래여도 함수의 호출 시점이 사각지대 밖인 경우 { // TD.. 2022. 8. 16.
js 반복문 다뤄보기 우리는 코딩을 하면서 다양한 상황을 마주하게 된다. 여러 상황 중, 배열과 관련된 처리같이 많고 반복적인 데이터를 편리하게 처리해줄 반복문들을 다뤄보자 Array.forEach() forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행한다. const arr = [1,2,3,4,5,6,7,8,9,10]; arr.forEach((element)=>console.log(element)); // console.log 1 2 3 4 5 6 7 8 9 10 // 간단 예제 arr.forEach((element)=>console.log(element*10)); // 10 20 30 40 --- 80 90 100 // for문처럼 화살표 함수 오른쪽 부분에 push 등과 같은 메서드를 통해 새 배열을 만들.. 2022. 8. 9.
728x90