State is immutable, that's the rule of redux. Mutaion in state is not recommended. Instead mutating the state, just return another object. for example using filter method in array state is a. good method to delete some elements in array. Because filter() method just return a new state(array) instead mutate a state. Redux is just a function. Dispatching actions, and modifying the data(states) thr..

아래 코드를 보고 두가지 의문점이 생겼습니다. data = [{ 'name': '', 'money': '' }] function doubleMoney() { data = data.map((user) => { return { ...user, money: user.money * 2 } }) } 의문점 1. . . . 이라는 spread연산자는 단순 복사개념이라 생각했지만, 위 코드는 user라는 데이터를 어디에서 가져오는지 모호했으며 2. 위 함수에서 return 된 값은 어떤 형태인지 궁금하다. 해답 2. return된 형태 => { name: 'xxx', money: 1000} user는 map()메서드를 사용하면서 갖게 된 임의의 변수명입니다. user대신 person이란 변수명을 사용해도 전혀 문제없..

리액트 - 중첩된 객체 state 변경하기 일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => ..

리액트는 state가 변화할 때마다 매번 render가 작동됩니다. setState함수는 state의 상태를 변화시키기 때문에 component를 re-render하게 되는데, 종종 setState를 했음에도 값이 변하지 않는 상황을 마주하곤 합니다. 문제 setState를 사용하면 state의 상태변화가 한템포씩 늦는 경우를 종종 보게된다. 먼저 흔히 겪는 setState의 문제점을 코드로 보겠습니다. this.state.value = 1; this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value ..

사용 이유 기존 function 표현에 비해 구문이 짧다(and 자신의 this, arguments, super또는 new.target을 바인딩 하지 않는다). 특징 항상 익명함수로 사용되며, 생성자로 사용될 수 없다. const Family = [ 'dad', 'mom', 'brother', 'sister' ] console.log(Family.map(member => member)); 위의 화살표 함수의 코드를 해설하자면 🔽 Family.map(member => { return member }); // 아래 코드는, // 1. member에 괄호를 쓰지 않았다 => parameter가 하나 뿐이기에 괄호 사용은 선택사항 // 2. return과 그것을 감싸는 중괄호{}를 없앴다 => 화살표함수의 유일..

리액트를 사용하여, 아래와 같은 배열 객체를 브라우저에 렌더링 하는 법을 배워보자. // Friends 배열 const Friends = [ { key: 1, name: 'Lim', hobby: 'crossfit', info: 'busan', brand: 'nike' }, { key: 2, name: 'Kim', hobby: 'soccer', info: 'ulsan', brand: 'UA' }, { key: 3, name: 'Him', hobby: 'basketball', info: 'tokyo', brand: 'adidas' } ]; class App 한줄 한줄 다 뜯어보자 import Reat, {Component, Fragment } from 'react'; // Component, Fragment..

*foodILike array는 맨 밑에 첨부 함수형 컴포넌트와 클래스형 컴포넌트 구분 : return과 render array를 iter할 때 map()메서드를 사용 props의 타입 체크는 propTypes 메서드 사용 state를 직접 변경하면 render 호출에 문제 생기기 때문에, setState()를 사용하여 state를(데이터를) 변경해준다 class App extends Component { render() { return ( {/* map함수가 없었다면, 일일이 foodILike의 원소들을 기입해야한다.*/} {foodILike.map(dish => ( ))} ); } } 여기서, dish는 임의로 지은 이름으로, foodILike 배열의 각 element를 한 번씩 방문하는 object..

보호되어 있는 글입니다.

아래 코드의 function declaration은 자바스크립트의 호이스팅에 해당된다. 함수가 먼저 호출된 후 선언되어도, 호이스팅 동작으로 무리없이 함수가 작동된다. // functions declaration calculateAge(1965); function calculateAge(year) { console.log(2022 - year); // } // this is hoisting // function expression retirement(1956); var retirement = function (year) { console.log(65 - (2016 - year)); } // Error occured: Type Error, 끌올이 안된다. // hoisting only works for f..