[22.04.11] Today I Learned 💻

오늘 공부한 내용📄

Ajax

Ajax 요청이란 서버에게 요청하는데 새로고침 없이 할 수 있게 도와주는 일종의 코드이다.

• 일반 개발환경에선 jQuery 설치 후 ajax 함수 사용
• 리액트 개발환경에서는 axios 라이브러리를 설치하거나, fetch 함수 사용

axios.get('GET요청할URL')
.then(()=>{ 요청 성공 시 실행할 코드 })
.catch(()=>{ 요청 실패 시 실행할 코드 })

 

 

리액트에서 DOM접근

리액트에서 라이브러리를 쓰지 않고 이미지슬라이드를 만들기 위해 DOM접근 메소드를 사용했더니

잘 작동하지 않아 무슨 문제지? 하고 찾아보았고,

리액트에서 직접 DOM을 선택해 접근하는 것은 옳은 방향성은 아니라는 것을 알게 되었다.

(처음에는 쓰면 아예 작동 자체가 안 되는 줄 알았는데 그건 아니라고 한다. = 직접 DOM 접근은 가능하다.)

 

이유는 리액트가 Virtual DOM을 쓰는 대표적인 자바스크립트 라이브러리이기 때문이다.

그렇기 때문에 만약 DOM에 접근하고 싶다면 리액트 문법에 맞게 useRef를 사용해준다.

 

//1. useRef를 사용해 slideRef라는 객체를 DOM에 접근할 수 있게끔 한다.
let slideRef = useRef(null);

//2. 해당 태그에 ref를 설정하면 접근이 가능케 된다.
<ul ref={slideRef}>

//3. slideRef로 DOM에 직접 접근하고 스타일 변경도 가능케 된다.
slideRef.current.style.transform = `translateX(-${currentView}00vw)`

useRef를 쓰면 .current 라는 객체에 ref로 지정한 엘리먼트의 DOM값을 확인할 수 있고 조종할 수 있다.

 

또한 useRef의 두 번째 사용법은 특정 변수를 담는 그릇으로 활용하는 것이다.

useRef로 변수를 관리하게 되면 해당 변수가 업데이트 된다고 해서 컴포넌트가 리렌더링 되지 않는다.

이를 활용해서 굳이 리렌더링할 필요가 없는 변수는 useRef로 관리해주는 것이 효율적이다.

보통 useRef를 변수로 활용하는 경우
- setTimeout, setInterval을 통해 만들어진 id
- scroll 위치
- 배열에 새 항목을 추가할 때 필요한 고유값 key

 

 

styled-components에서 hover로 다른 요소 스타일링

처음엔 해당 요소에 이걸 hover 하면 특정 요소에 스타일링으로 코드를 짰는데 작동하지 않았다.

그래서

const NextBtn = styled.div`
  opacity: 0;
  ${ListDiv}:hover & {
  opacity: 1;
  }
`

특정 요소를 hover하면 지금 해당 요소에 스타일링으로 바꿨더니 작동됐다!.!