Engineering_S/W & H/W

기존의 React를 이용하여 props를 전달할때 시작지점에서 끝나는 지점까지 전달을 해야하는 문제가 있었습니다. 전달해야 할 단계가 적으면 상관없지만 단계가 많으면 코드가 그만큼 복잡해 집니다.  그림1) React만 사용할시 Redux를 사용하지 않을시 각 단계별로 Props을 전달해야 합니다. 그림2) Redux 사용시 하지만 Redux을 사용하면 Stor을 통해서 State의 접근(파란 화살표)이 가능하다.   그림3) Redux 개념  React를 사용하다 보면 data를 전달히가 위해서 여러 단계를 거쳐야 하는것을 알수 있습니다. 문제는 그 단계가 지나치게 많거나 복잡해 졌을때 코드를 유지 관리하기 어려운 점이 있습니다. 이를 해결하기 위해 Reducx가 탄생했고 그림3와 같은 단계로 Redux가 동작이 됩니다. 코드를 작성시 글이 길어지므로 다음 작성때 그림3과 코드를 비교하도록 하겠습니다. Redux : "Redux is a predictable state container for JavaScript apps" 다음글 : Redux - 개념정리(비유 및 코드)

 이번에는 버튼을 만들어서 버튼을 누르면 state의 상태에서 입력된 id가 삭제되도록 하겠다. import React , { Component } from 'react' import Newcompoment from './compoments/New_compoment' ; export class App extends Component { constructor ( props ){ // constructor를 만들어 props를 전달 super ( props ); // 기존의 props 유지 this . state = { // class이기 때문에 this를 사용 fruit : [ // 실제 상태를 바꿀 state.fruit { id : 0 , post : 'apple' }, { id : 1 , post : 'banana' } ] }; // del_state가 제대로 전달되도록 bind한다. this . del_state = this . del_state . bind ( this ); } // del_state는 state.fruit에서 선택된 id를 제거한다. del_state = ( id ) => { this . setState ({ fruit : this . state . fruit . filter (( ele ) => ele . id !== id ) }) } render () { return ( < div > < Newcompoment fruit = {this . state . fruit } del_state = {this . del_state } /> </ div > // New_compoment에 props로 state.fru...

  import React , { Component } from 'react' import New_compoment from './compoments/New_compoment' ; export class App extends Component { constructor ( props ){ // constructor를 만들어 props를 전달 super ( props ); // 기존의 props 유지 this . state = { // class이기 때문에 this를 사용 fruit : [ // 실제 상태를 바꿀 state.fruit { id : 0 , post : 'apple' }, { id : 1 , post : 'banana' } ] }; } render () { return ( < div > < New_compoment fruit = {this . state . fruit } /> </ div > // New_compoment에 fruit state 전달 ) } } export default App 위의 코드에서 state를 추가하며 New_compoment에 fruit라는 props를 전달한다. import React , { Component } from 'react' export class New_compoment extends Component { render ( props ) { return ( < div > { console . log ( this . props . fruit ) /*props 확인*/ } </ div > ...