전체 글

[JavaScript][clean-code] Rest Parameters

* Rest Parameters [참조 내용] https://latte1114.tistory.com/297 * 예시 코드 function sumTotal() { return Array.from(arguments).reduce( (acc, curr) => acc + curr, ); } sumTotal(1, 2, 3, 4, 5, 6, 6); arguments를 활용하여 가변인자를 취한다. * 만약 추가적인 인자를 받고 싶은 경우에는?? - Rest parameters를 이용한다. function sumTotal(...args) { return args.reduce ( (acc, curr) => acc + curr, ); } sumTotal(1, 2, 3, 4, 5, 6, 6); [참고] rest parame..

[React_study] Redux store의 state 변경

* Redux의 state를 변경하는 단계 store.js에 state변경해주는 함수를 만든다. export 해준다. 필요할 때 import해주고 dispatch()를 이용해 사용한다. * store의 state 변경하는 법 1. store.js안에 state수정해주는 함수 만들기 slice안에 reducers안에 함수를 만들면된다. (함수 작명은 마음대로 해도 된다.) 첫번째 파라미터안에 기존의 state가 담겨져 있다. (parameter name은 state로 사용한다.) return 우측에 새로운 state 입력하면 그 값으로 기존 state를 변경해준다. let user = createSlice({ name : 'user', initialState : 'kim', reducers : { chan..

[React_study] Redux store에 state 보관 & 호출

* Redux store에 state 보관하는 법 configureStore, createSlice를 import한다. createSlice()를 이용해 state를 만든다. { name : 'state이름', initialState : 'state값' } configureStore()안에 등록 reducer : { 작명: createSlice에서 만든 name.reducer } import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initialState : 'kim' }) export default configureStore({ reducer: { user : user.re..

[React_study] Redux & Redux Toolkit 셋팅 및 사용

* Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리 js파일 하나에 state들을 보관할 수 있다. 모든 컴포넌트가 직접 꺼내어 사용할 수 있다. props전송을 안해도 된다. * Redux 설치 npm install @reduxjs/toolkit react-redux redux toolkit이라는 라이브러리를 설치 redux의 개선버전이다. "react", "react-dom"의 버전이 18.1.x 이상이면 사용 가능하다. * Redux 셋팅 src폴더안에 store폴더를 만들고 store.js파일을 만들어준다. 아래의 코드를 작성 import { configureStore } from '@reduxjs/toolkit' export default configure..

[React_study] Context API

* SPA의 단점 컴포넌트간 state 공유가 어렵다. 부모 컴포넌트 => 자식 컴포넌트 props전송은 가능 props가 10개 ~ 20개 중첩이 되어 있으면 너무 헷갈리고 파악하기 어렵다. (Prop Drilling) * 해결방법 Redux와 같은 외부 라이브러리 사용 Context API를 사용 (오늘 알아볼 내용) * Context API를 이용해 props없이 state를 공유하는 방법 - setting createContext() 함수를 가져와서 context를 만들어준다. (context를 쉽게 비유해서 설명하자면 state 보관함이다) Context로 원하는 곳을 감싸고 공유를 원하는 state를 value안에 적으면 된다. Context로 감싼 모든 컴포넌트와 자식컴포넌트는 state를 ..

[JavaScript][clean-code] default Value / default parameter

* Default Value / Default parameter - 기본값 설정 * 기본값 예시 코드 function createCarousel(options) { options = options || {}; const margin = options.margin || 0; const center = options.center || false; const navElement = options.navElement || 'div'; // ...some code return { margin, center, navElement, }; } createCarousel(); 기본값 설정이 되어 있어서 인자가 들어오지 않을경우 기본값으로 할당이 된다. * 기본값 다른 예시 function createCarousel({ ..