프로그래밍 공부 노트

자식 컴포넌트 state 값 부모컴포넌트로 전달하기 방법을 간단히 보면 부모 컴포넌트에 함수를 정의하고 해당 함수를 자식 컴포넌트의 props로 전달한다. props로 전달된 함수를 호출해서 자식컴포넌트의 값을 부모 컴포넌트로 전달하도록 한다. App.js (부모 컴포넌트) import React , { Component , Fragment } from "react" ; import Child from "./components/Child" ; class App extends Component { handleData = ( data ) => { console . log ( data ); }; render () { return ( < > < Child sendProps = {this . handleData } /> </ > ); } } export default App ; Child.js (자식 컴포넌트) import React , { Component } from "react" ; export default class Child extends Component { state = { name : "" , age : "" , }; handleChange = ( e ) => { this . setState ({ [ e . target . name ]: e . target . value , }); }; handleSubmit = ( e ) => { e . preventDefault (); { this . props . sendProps ( this . state ); } }; render () { retu

불변성 유지 이전까지 몰랐는데 리액트를 공부하면서 불변성에 대해서 알게되었다. 리액트에서 배열에 값을 추가할 때 배열의 불변성은 유지하면서 값을 추가해야한다.  일반적으로 push, splice, unshift, pop 메서드들은 배열을 직접 수정하기 때문에 불변성을 유지하기 위해서는 사용하면 안된다. 그러므로 기존의 배열은 그대로 유지하지하면서 기존의 배열을 기반으로 데이터를 추가한 새로운 배열을 만들어서 값을 수정할 수 있는 메서드인 concat, slice, map, filter 와 같은 메서드들 또는 전개 연산자(spread operator) 사용하여 불변성을 유지하면서 값을 추가해야한다. 불변성을 유지해야지 리액트의 특성을 이용하여 모든 데이터들을 필요한 상황에 리렌더링 되도록 설계할 수 있고 나중에 성능 최적화도 할 수 있다. push와 concat의 차이 ex1) push 보통 push는 배열에 새로운값을 추가할때 사용한다. 위 예제를 보면 arr배열에 숫자6을 추가해서 원본 데이터가 변경되어 반환되는것을 확인할 수 있다. ex2) concat concat 또한 push와 같이 배열에 값을 추가할 수 있다. 하지만 위 예제를 보면 원본데이터 arr의 출력값은 그대로이고 concat을 사용해 숫자6을 추가했을때 원본데이터의 수정이 아닌 새로운 배열객체를 만들어 값을 추가한다는 차이점을 확인할 수 있다. react에서 push를 사용해서 값을 추가할수도있지만 추후에 성능개선을 하기 어렵게되고 수정하기 어려운 문제를 발생시킬 수 있으므로 concat을 통해 원본데이터 객체는 유지하면서 새로운 객체 값을 가지고 문제를 풀어 나가는것이 좋다. 요즘 많이 사용되는 전개 연산자 (spread operator) 를 보면 전개 연산자 (spread operator) 위 예제처럼  arr 원본 배열은 그대로 유지하면서 값을 복제하고 새롭게 데이터를 추가하여 반환하는 arr3 배열을 확인할 수 있다. 이처럼 전개 연산자를 사용하여

원시 타입(primitive type) 1. Boolean 2. null 3. undefined 4. Number 5. String 6. Symbol (ECMAScript 6) 7. bigint 위 7가지는 Javascript에서의 원시 값이다. Javascript에서 원시 값은 변경 불가능한 값(immutable value)이다. 변수에 새로운 값을 다시 할당할 수 있지만, 이미 생성한 원시 값은 객체, 배열, 함수와 달리 변형할 수 없다. 즉, 새로운 메모리 값을 새롭게 할당할 수 있지만 기존 메모리 값을 수정할 수 없다는 의미이다. 원시 타입 이외의 모든 값은 객체(Object) 타입이며 객체 타입은 변경 가능한 값(mutable value)이다.  변경 가능하다는것은 참조하고있는 메모리의 값을 변경 할 수 있다는 의미이다. 위 내용을 이해하려면 복제와 참조에대한 이해가 필요하다. 복제 는 원본데이터를 복제해서 복제된 데이터를 수정하는것이기때문에 원본데이터는 변경되지 않으며 참조 는 원본데이터를 공유해서 그러니까 저장된 메모리 공간을 공유해서 서로 원본데이터를 수정할 수 있기 때문에 수정시 참조하는 모든 데이터들에서 수정이 발생된다. 즉 수정이 발생하면 원본데이터의 값이 변경된다. 가져오는 값이 원시타입이면 복제하여 사용하기때문에 원본데이터를 변경하지않고 가져오는 값이 원시타입이 아닌 객체인경우 참조를 하기때문에 원본데이터도 변경된다. 하지만 객체에 새로운 객체를 할당하면 더 이상 참조하지않고 새롭게 할당된 객체 데이터가 그 변수의 값이 된다.

객체의 경우 값의 메모리 주소를 참조하기 때문에 객체에 특정한 값을 추가하거나 삭제 할 경우 원본 데이터가 변경되는 일이 발생한다. 객체를 변경하지 않고 원본 상태를 유지하면서 기존의 데이터를 그대로 갖고있으면서 새로운 값을 추가한 새로운 객체를 생성할 수 있다. list 배열 객체 원본 데이터는 변경하지 않으면서 mango를 추가한 새로은 list2 배열을 만들었다. list 배열과 list2 배열을 비교연산자로 비교해보면 false값을 반환한다. 즉, 기존의 list 배열을 참조하지않고 복제한것이다. concat 메서드를 이용해서도 가능하고 Array.from() aptjemfheh immutable array를 생성할 수 있다. 객체의 경우 Object.assign()을 사용하여 불변 객체를 생성할 수 있다. 이외에도 전개연산자를 사용하거나 immer 라는 라이브러리를 사용하여 불변 객체를 생성할 수 있다. 리액트를 공부하면서 불변성에 대해서 공부해 보았다.