[TIL] 원티드 프리온보딩_10일차_220512

오늘도 기업과제를 했다. 너무 급하게 한 나머지 조금은 지저분한 거 같아서 😭 다시 처음부터 레이아웃을 잡고 코딩을 했당. 일단 route가 즐겨찾기인지 메인인지 구분해서
모달을 나타내야 했기에 useParams을 이용해서 구현했다!

useParams()사용

1. 먼저 라우터를 변경한다.
   파라미터값을 얻기 위해 path에 : 과 함께 입력한다.

<Routes >
	<Route path='/' element={<Test1/>}  />
    <Route path=':test2' element={ <Test2 /> } />
</Routes >

2. 해당 Test2 컴포넌트에 useParams 적용

const params = useParams() //이렇게

console.log(params)

콘솔로 params가 나타나는 것을 알 수 있다! 😎

IntersectionObserver API?!

IntersectionObserver api를 이용해서 리스트 최하단으로 내렸을 시 다음 페이지를 불러오는 것을 하려고 했다. 하지만 계속 오류가 나기 시작했고 다른 방법을 찾아보다가 react에서 제공해주는 라이브러리를 적용시켜보았다. 바로 수정되다니.. 🥶
1. 라이브러리 설치
npm i react-intersection-observer
2. import 해주기

import { useInView } from 'react-intersection-observer'

const App = () => {
	const [ ref, inView ] = useInView()
    
    return(
    	<div ref={ref}>
        	타겟입니다용 { inView.toString() }
        </div>
    )

}

• ref로 는 타겟이 되는 요소에 걸어주면 된다.
• 해당 ref가 보이면 true로 안보이면 false로 나타난다.

마무리..

오늘은 기존 작업하던 것을 멈추고 다시 새로운 파일에서 코딩을 시작했다. 다시 처음부터하면서 더 깔끔해지고 간결해진 것도 있었고 왜 이렇게 작성했었더라..? 했던 것도 있었다. 한번 더 보니 좀 더 명확해졌고 recoil에 대해서 좀 더 익숙해졌다 ㅎㅎ 그리고 너무 모든것을 어렵게만 생각하지 않고 해야겠다고 생각을 했다. 너무 복잡하게 생각하다가 많은 것을 놓치고 만다 😂 그럴때는 머리도 좀 식히고,, 다시 refresh한 마음으로 해보자!!!! 할 수 있다🙂