[react] 데이터 바인딩

January 6, 2022

이런 상품들을 직접 입력하는 대신 state 변수 데이터로 입력하려면 어떻게 해야 할까요?

먼저 데이터의 양이 많은 경우 js 파일을 따로 만들어줍니다.

파일 상단에 export default 라고 적어준 뒤 원하는 형태로 데이터를 입력해주세요. 제 경우 object로 각각의 물건 값을 넣고, object들을 배열에 넣어줬습니다.

보통 변수나 함수를 만들고, export default 변수명 또는 함수명 쓰는데, 저처럼 아예 export default 뒤에 데이터를 입력해도 됩니다.

단 함수명, 변수명을 쓰지 않아도 Export default는 파일 하나당 한 번만 선언 가능합니다.

그리고 나서 import해줄 파일에서 export default 뒤에 쓴 변수명, 함수명 또는 새로운 이름으로 가져올 수 있습니다.(export default 뒤에 데이터를 바로 입력한 경우)

import data from './data.js';

function App() {

    let [shoes,setShoes] = useState(data);

전 후자의 경우라 아래처럼 새로운 변수명으로 import 했습니다.

그다음

useState를 import한 뒤 상단에 아래처럼 코딩해줍니다. Import data from ‘./data.js’(Import 변수명 from 경로)

이제 shoes에 useState로 data를 넣어주면 직접 입력하지 않고 아래처럼 변수로 접근할 수 있습니다.

변수가 여러개일 때

만약 변수가 여러개라면 export default는 쓸 수 없습니다. 그럴땐 ,

Data.js 에

Var name1 = “홍길동” Var name2 = “김영희”

두개의 변수가 선언 됐을 시

Export {name1, name2}

이런식으로 내보내면 됩니다.

변수들을 {} 에 넣어서 내보내기!

import 할 때는 변수를 각각 중괄호에 넣어서

import {name1,name2} from ‘./data.js’

이런식으로 쓰면됩니다.