Engineering_S/W & H/W

  버전정보 react : ^18.2.0 이전글 : React - Context 1. react 설치 - terminal을 이용하여 react를 설치합니다. (node v20.10.0) $ npx create-react-app [project name] copy 사진1) Reducer 개념도 이전 글에서 context만으로 state를 변경 했습니다. 하지만 이때 다른 컴포넌트에서 잘못된 값을 업데이트 하게 된다면 모든 components가 영향을 받게 됩니다. 사진1의 번호순으로 설명을 하도록 하겠습니다. 1번 : component가 state의 value를 변경하기 위해서 Dispatch에 요청을 합니다. 이때 action을 인자로 주는데 type와 payload(선택적)를 입력합니다. 2번 : dispatch에서 component에서 받은 action을 Reducer에 전달을 합니다. 3번 : Reducer에서 dispatch에 받은 action의 type을 확인합니다. 해당 type과 일치하면 지정된 state 변경을 진행합니다. 이때 payload를 받으면 해당 payload를 이용하여 state를 변경합니다. 4번 : state가 변경되었다. 해당 state를 사용하는 모든 component를 re-randering한다. 기존 Context와 다른점은 이제 Component에서 state 값의 변경을 할려면 Dispatch을 통해서 간접적으로 변경이 가능하다는 것입니다. GitHub Link :  https://github.com/Alex-Choi0/react_context_reducer_sample1.git

  버전정보 react : ^18.2.0 1. react 설치 - terminal을 이용하여 react를 설치합니다. (node v20.10.0) $ npx create-react-app [project name] copy 사진1) react를 npx으로 셋팅 사진2) context 추상도 context가 커버하는 범위에 따라 그에 영향받는 components들이 있습니다. 사진2에서 Context가 App전체에 영향을 준다면 components가 App의 하위에 존재하는한 어디든지 state값을 사용할수 있습니다. 사진3) context value 업데이트 예로 들어 A component에서 method를 이용해서 Context의 value값을 변경했습니다. 이때 state는 변경과 동시에 적용이 됩니다. 사진4) context 업데이트시 다른곳도 적용 적용된 value를 사용하는 다른 component(A, B)에 변화에 따른 re-randering이 들어갑니다.  // src/context/count.context.jsx import { createContext , useState } from "react" // 실제 컴포넌트에서 Access할 데이터 export const CountContext = createContext ({ currentNum : null , // 실제 컴포넌트에서 읽을 카운트값 setCurrentNum : () => null , // 카운트 값을 변경하기 위한 메소드 }) export const CountProvider = ({ children }) => { // useState를 이용하여 currentNum, setCurrentNum을 설정하고 currentNum의 초기값을 0으로 한다 const [ currentNum , setCurrentNum ] = useState ( 0 ) // Provider를 이용하여 해당...

 이번에는 버튼을 만들어서 버튼을 누르면 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 > ...