TIL | 비구조화 할당, axios.create ...

23.07.18

1. 비구조화 할당

const {
	target: { name },
 } = e;
 
 
 <button name="value" onClick={clickHandler}>클릭<button>

• e.target은 이벤트가 발생한 DOM 요소를 가리킴. 이벤트를 발생시킨 요소에 접근하는데 사용.
  (ex. 버튼을 클릭했을 때, e.target은 해당 버튼 요소(= <button name="value" onClick={clickHandler}>클릭<button>)를 가리킴)
• { target: { name } }은 구조 분해 할당의 형태
  => e 객체의 target 속성의 값을 추출하고, 그 중에서도 name 속성의 값을 추출하여 name 변수에 할당하는 것 !

2. axios.create 인스턴스 생성

axios.create를 사용하여 axios 인스턴스를 만듦

// api.jsx
import axios from "axios";

const instance = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL });

export default instance;

• 이렇게 되면 axios를 이용해 get, post, delete, patch를 할 때 process.env.REACT_APP_SERVER_URL를 써줄 필요없이 api.jsx를 import 해오고 api.get하고 변수명이나 파라미터 값 ?만 써주면 됨 !