Context API로 state 수정 시 여러개 state 전달

[진형래]

안녕하세요 선생님 언제나 강의 재미있게 잘 듣고 있습니다.

다름이 아니라 Context API 수업을 듣고 추가적으로 이전 시간에 주문하기 버튼을 누르면 props로 가져온

state변경 함수로 state를 수정하는 것도 다시 바꿔보았는데요.

 

App.js에서

 

...

export let stockContext = React.createContext();
export let stockChangeContext = React.createContext();

function App() {

...

let [stock, stockChange] = useState([10, 11, 12]);

...

<stockContext.Provider value={stock}>
      <stockChangeContext.Provider value={stockChange}>

          <Route path='/detail/:id'>
              <Detail product={product_data}></Detail>
            </Route>
          </stockChangeContext.Provider>
        </stockContext.Provider>

...

 

한 뒤,

Detail.js에서

 

...

import { stockContext, stockChangeContext } from './App.js';

...

function Detail(props) {

let stock = useContext(stockContext);
let stockChange = useContext(stockChangeContext);

<Button variant="danger" onClick={() => {
                        let temp = [...stock];
                        temp[index]--;
                        stockChange(temp);
                    }}>Shipping</Button> &nbsp;

...

 

시행착오 끝에 이렇게 처리를 하게 되었는데

이런 식으로 context를 사용해도 state를 직접 수정하지 못 하는건 그렇다치고,

value 지정할  데이터가 여러개라고 하면

<stockContext.Provider value={stock}>
      <stockChangeContext.Provider value={stockChange}> 이런 식으로 Context를 여러개 사용해야 하나요??

 

 

p.s. 그리고 예전 class문법의 props는 어떻게 하는지 궁금하여 찾아보았습니다만,

생성자(constructor(props))로 받아와 this.props.~로 사용한 것까지는 확인이 되었는데,

혹시 상위컴포넌트의 state를 하위컴포넌트에서 수정하는건 뭔가 딱히 같이 설명들이 잘 안되어 있어서...

어떻게 해야하는지 여쭙고 싶습니다.

혹시 마찬가지로 props로 this.setState()를 보내서 처리하나요?? 

 

읽어봐주셔서 감사합니다.

[codingapple]

<Provider value={}> 여기 value 안에는 하나만 집어넣을 수 있는게 아니라 

object자료 이런 것도 넣을 수 있습니다 

value={{ stock: stock, stockChange: stockChange }}

이렇게 넣어도될걸요 

 

class component 에서 자식이 부모 state 수정하려면

1. 부모 컴포넌트에 state수정하는 함수를 만들어줍니다

class 부모컴포넌트 extends React.Component {

  state 수정함수 () {
    this.setState() 어쩌구~~
  }

}

2. props로 state수정함수를 자식에게 전해줍니다. 

3. 자식은 this.props.state수정함수() 를 사용합니다 

 

[진형래]

아... 그냥 value 안에 여러개 넣으면 그럴리가 없는데 알아서 키 값으로 변수명 해서 object로 들어간다고 너무 생각이 막나갔네요.

object 데이터 자체로 넣으니 말씀해주신대로 잘 됩니다. 

class문법에서의 상위 state 변경도 쉽게 이해가 되었습니다. 

언제나 감사합니다^^ (꾸벅) 

 

[글쓴이]

글