본문 바로가기
728x90

개발일지64

javaScript 배열 다뤄보기 1 1. 배열 수정 // 배열 변경하기 let Arr = [1,2,3,4,5] // Arr배열의 0번째를 123으로 수정 Arr[0] = 123 // Arr = [123,2,3,4,5] // 오브젝트 변경하기 obj = [{id:1,name:'냠냠'},{id:1,name:'뇸뇸'}] // obj 배열의 0번째 name을 얍얍얍으로 수정 obj[0].name = '얍얍얍' // obj = [{id:1,name:'얍얍얍'},{id:1,name:'뇨뇨뇽'}] 2. 배열 정렬 // 문자열 배열 // arr.sort() - 문자열 배열의 경우 알파벳 순서로 정렬(오름차순) // 파라미터(compareFunction)-매개변수 가 입력되지 않으면 유니코드 순서에 따라 정렬됨 // 숫자열 배열 // 오름차순 arr.so.. 2022. 8. 23.
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.
728x90