props : 부모 -> 자식 state 전송

1. props로 부모 -> 자식 state 전송하는 법 

1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} /> 
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

 

 

참고. 

1) props는 <Modal 이런거={이런거}  저런거={저런거}> 이렇게 10개 100개 1000개 무한히 전송이 가능하다.

2) 꼭 state만 전송할 수 있는건 아니다.

<Modal 글제목={변수명}> 일반 변수, 함수 전송도 가능하고 

<Modal 글제목="강남우동맛집"> 일반 문자전송은 중괄호 없이 이렇게 해도 된다.

3) 부모 -> 자식 외 다른 관계에서는 state 전송이 불가능하다!

 

 

ex. 부모 컴포넌트의 state(글제목)를 자식 컴포넌트 <Modal>에 전송

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>
      <Modal 글제목={글제목}></Modal>
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

 

2. Context API

Context API를 쓰면 props 전송없이 state 공유가 가능하다. 하지만 다음 단점들 때문에 많이 쓰진 않고, redux 같은 외부라이브러리를 많이 사용한다.

1. state 변경시 쓸데없는 컴포넌트까지 전부 재렌더링이 되고
2. useContext() 를 쓰고 있는 컴포넌트는 나중에 다른 파일에서 재사용할 때 Context를 import 하는게 귀찮아질 수 있다.

 

Context API 사용법

(App.js)

export let Context1 = React.createContext();  

function App(){
  let [재고, 재고변경] = useState([10,11,12]);

  return (
    <Context1.Provider value={ {재고, shoes} }>
      <Detail shoes={shoes}/>
    </Context1.Provider>
    
  )
}

(Detail.js)

import {useState, useEffect, useContext} from 'react';
import {Context1} from './../App.js';

function Detail(){
  let {재고} = useContext(Context1)

  return (
    <div>{재고}</div>
  )
}