Study

[JavaScript][clean-code] 화살표 함수 (Arrow function)

* 화살표 함수 (Arrow function) [참조 내용] https://latte1114.tistory.com/367 * 예시 코드 // arrow function const user = { name : 'Hyeonwoo', getName : () => { return this.name; }, }; user.getName(); // undefined // 일반 method const user = { name : 'Hyeonwoo', getName() { return this.name; }, }; user.getName(); // Hyeonwoo 화살표 함수로 this.name에 접근시 undefined가 반환된다. 일반 메서드로 this.name에 접근시 정상적으로 this.name의 값이 반환된다...

[JavaScript][clean-code] void & return

* void & return void : 함수의 반환이 없다. return : 함수가 무언가를 반환한다. * 예시로 보는 void와 return function handleClick() { return setState(false); } function showAlert(message) { return alert(message); } setState함수와 alert함수를 void함수이다. 따라서 함수의 반환이 존재하지않는다. 따라서 return을 넣어주지 않아도 된다. 굳이 반환이 없는데 return을 사용할 필요가 없다. undefined가 return된다. * JavaScript는 기본적으로 아무런 return이 없을때는 undefined를 return한다. function test(sum1, sum2..

[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..