2024.03.01 TIL - useRef(모달창 배경 클릭시 닫힘), axios instance, axios

useRef - React Hook

1. useRef란?

• 리액트에서 특정 DOM요소를 지정하고 싶을 때 유용하게 사용됨
  • ex 1) 화면 렌더링 시 input태그에 커서를 focusing 시키고 싶을 때
  • ex 2) 모달창 배경 클릭 시에도 모달창 닫고 싶을 때

• DOM 요소 접근방법으로서의 useRef : 특정 DOM요소 지정할 수 있음
• 저장공간으로서의 useRef : state와 달리, 리렌더링시 변수에 변화 없음

2. useState와의 차이점

• state는 변화가 일어나면 리렌더링이 일어남
  -> 내부 변수들은 초기화됨
  (보여지는 부분에서 변화가 필요할 때 사용)

• ref에 저장된 값들은 렌더링을 일으키지 않음
  -> 리렌더링이 되더라도 ref에 저장된 변수는 초기화되지 않음
  (보여지는 부분에서 굳이 변화 필요없을 때 사용)

3. 사용 방법

const ref = useRef('초기값');
console.log(ref)

// 결과
// { current: '초기값'}
// ⭐️ ref.current로 DOM요소 지정할 수 있는 것!

4. 실 사용 예시 (모달창 배경 클릭 시 닫힘)

const [isLoginOpen, setIsLoginOpen] = useState(false);
// ⭐️ background에 ref 생성하기
const backgroundRef = useRef('');   
// ⭐️ 클릭한 요소가 backgroundRef.current가 맞으면 모달 닫기!
const onBackgroundClick = (e) => {
    e.target === backgroundRef.current && setIsLoginOpen((prev) => !prev);
  };

{
  isLoginOpen &&
  // ⭐️ ModalBg 태그를 ref로 선택해줌!
  <ModalBg ref={backgroundRef} onClick={onBackgroundClick}>  
    <Modal>
      <p>모달창입니다.</p>
      <button>취소</button>
    </Modal>
  </ModalBg>
}

참고 : https://velog.io/@zeroto99/React-%EB%AA%A8%EB%8B%AC-%EB%A7%8C%EB%93%A4%EA%B8%B0

---

axios instance

• axios instance 만들기 키워드 : axios.creat()
• instance 사용하기 : axios 대신 await instance.get("") 이런식으로 사용

// axios instance 만들기
const todoClient = axios.create({
  baseURL: "http://localhost:3001/todos",
  headers: {
    "Content-Type": "application/json",
  },
});

// api에서 활용하기
export const getTodos = async () => {
  const todos = await todoClient.get("/");
  return todos.data;
};

---

axios

✏️ firebase는 addDoc이었는데 axios에서는 post니까 헷갈리더라

1. get - 조회
2. post - 삽입 (firebase는 addDoc)
3. patch - 수정 (firebase는 updateDoc)
   (put도 수정인데, put은 전체를 덮어씌우는거고, patch는 지정된 애만 바꿔주기)
4. delete - 삭제