[React] 리액트 장고 연동#2, 리액트 한 파일에서 두개 컴포넌트 만들기, 구조분해를 사용하여 props쉽게 받기

[React] 리액트 장고 연동#1 , input태그 여러개한번에 관리하기, React에서 form사용하기

 

---

리액트장고 연동#1 에서는 Post를 입력하는 Form태그를 만들었다. 추가 버튼을 누르면 아이템들이 촤르륵~ 떠야한다. 그러기 위해서 ItemList와 그속에 존재하는 Item을 만들어보자!

//Post.js

const result = [
	{ 
    	id : 1,
        name : "감자",
        price : 3000,
    },
	{ 
    	id : 2,
        name : "피자",
        price : 10000,
    },
    


]




return (
    <>
      <h1>포스트입니다</h1>
      <form onSubmit={onSubmitItem}>
        <input placeholder="제품명" type="text" name="name" onChange={onInputChange} value={name}/>
        <input placeholder="가격" type="number" name="price" onChange={onInputChange} value={price}/>
        <button type="submit">추가</button>
      </form>

      <h2>등록제품</h2>
      <div>
        <ItemList users={result}/>
      </div>
    </>
  )

ItemList에 props로 result를 넘겨준다. 지금은 더미데이터를 사용하겠지만, 최종적으로 원하는 목표는 Post.js에서 서버로 데이터를 fecth하여 그려주는 것이 목적이다. 내가 구상한 users에 담길 데이터는 id,name,price이다. DB에서의 고유 값인데 삭제를 구현하기 위해서 필요하다. 지금은 그냥 수동으로 상수하나를 만들어서 최상단에 적어주자!

ItemList가 담당할 역할이다.

 

 

# 하나의 js파일에서 두개의 컴포넌트(?)만들기

이렇게 코드를 짜도 되는지는 모르겠는데, 예전에 비슷하게 구조를 설계할때는 ItemList.js Item.js를 각각 만들어서 관리를 했다. 일단 함수형으로 코딩을 하니까 그러면 한파일에 두개를 적으면 안될까? 하고 적어 봤는데 됐다..

//ItemList.js

import React from 'react'

const Item = () => {

	return (
    	<>
        
        </>
    
    )

}


const ItemList = () => {

	return (
    	<>
        	<Item/>
        </>
    
    )


}

export default ItemList;

이렇게 작성하면 최대장점은, Item과 ItemList 컴포넌트는 서로 종속성이 심해서 왔다갔다 같이 코딩해야하는데 한파일안에서 볼 수 있고 바로 따로 추가같은거 안하고 바로 사용할 수 있다. export는 ItemList만 했는데 Post.js에서 Item은 따로 사용할 일이 없어서 그랬다. 만약 Item컴포넌트까지 같이 export하면 어떻게 사용해야 할까 궁금증이 생겼다.

###두개 또는 이상 Export하고 import하여 사용하기

//ItemList.js
export {ItemList, Item};


//Post.js
import {ItemList, Item} from "./ItemList";

export할때는 default를 뺀다. default는 한개만 export할 수 있다고 해서, 여러개를 export할 경우 먹지를 않았다!

import는 저렇게 구조분해 하듯이 사용하면 된다! 

# 구조분해하여 props받기

구조분해를 사용하면 귀찮게 props.****을 치지 않고 그냥 ****으로 사용할 수 있다. 아마 JS최신 문법일 것이다. props도 똑같이 사용할 수 있다.

//Post.js
<ItemList users={result}/>

//ItemList.js

const ItemList = ({users}) => {
  return(
    <>
      <table>
        <thead>
          <tr>
            <th>번호</th>
            <th>제품명</th>
            <th>제품가격</th>
            <th>ID</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user,index)=>(
            <tr>
              <Item index={index+1} key={index} my_id={user.id} name={user.name} price={user.price}/>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  )
}

저런식으로

const ItemList = ({users}) => {} 여기에 {users}로 담아오면 그 뒤로부터 props.users 사용하지 않고 users라고 사용하면 된다!

---

다음에는 두근두근 세근세근 axios를 이용하여 연동해보자!