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

React는 여러 compoments들이 모여서 만들어진다. 이때 각각의 compoment들에 정보 또는 메소드가 제공되고 거기에 따라 동작하게 해야한다. 일단 React를 설치하고 진행하도록 하겠습니다. 위 사진처럼 'Happy hacking!'이 나오면 제대로 설치가 된 것입니다. import React , { Component } from 'react' export class App extends Component { render () { return ( < div > </ div > ) } } export default App src폴더에 있는 App.js를 위와 같이 변경합니다. src폴더에 compoments폴더를 생성합니다. 그리고 그안에 New_compoment.js을 생성합니다. (아래코드 참고) import React , { Component } from 'react' export class New_compoment extends Component { render () { return ( < div > < h1 > Hello World! </ h1 > </ div > ) } } export default New_compoment 위 코드에서 div 태그 안에 h1테그가 있는것을 알수 있습니다. 이안에 "Hello World!"를 입력해 줍니다. import React , { Component } from 'react' import New_compoment from './compoments/New_compoment' ; export class App extends Co...