useScroll (Framer Motion)

• 해당 윈도우(window) 안에서의 높이를 progress (0 - 1) or scroll (px단위) 로 나타내줍니다.

• 숫자 단위의 정보를 얻기 위해 scrollY.get() 형식으로 .get() 메서드 사용해줍니다.

• 값이 바뀌어도 state 가 바뀌는 것이 아니라 리렌더링 ❌

• 코드 예시

  
  const navAnimation = useAnimation();
  const { scrollY } = useScroll();
  
  useEffect(() => {
    scrollY.onChange(() => {
      if (scrollY.get() > 80) {
        navAnimation.start({
          backgroundColor: "rgba(0,0,0,1)",
        });
      } else {
        navAnimation.start({
          backgroundColor: "rgba(0,0,0,0)",
        });
      };
    });
  }, [scrollY]);

useAnimation 을 쓰는 두가지 방법

• 조건에 따라 분기되는 if ... else ... 에서 <useAnimation> 변수.start(내부코드); 내부코드에 1) 직접 코드 작성, 2) variants 를 이용해서 문자열만 작성
• 코드 예시
  1) 코드 내부에 직접 애니메이션 스타일 지정

  
  const toggleSearch = () => {
    if (searchOpen) {
      inputAnimation.start({
        scaleX: 0,
      });
    } else {
      inputAnimation.start({ scaleX: 1 });
    }
    setSearchOpen((prev) => !prev);
  };

  2) variants 활용해 코드 내부에 스트링 작성

  
  useEffect(() => {
    scrollY.onChange(() => {
      if (scrollY.get() > 80) {
        navAnimation.start("scroll");
      } else {
        navAnimation.start("top");
      }
    });
  }, [scrollY, navAnimation]);

Fetcher 기본 코드 조각

• 데이터를 받아오고 JSON 을 리턴하는 함수에 불과합니다.

const API_KEY = "b9a221486250d0601edc38**********";
const BASE_PATH = "https://api.themoviedb.org/3";

export function getMovies() {
  return fetch(`${BASE_PATH}/movie/now_playing?api_key=${API_KEY}`)
  .then((response) => response.json());
}

React-Query 를 사용하는 기본 코드 조각

• useQuery Hook 은 fetcher(getMovies) 를 사용해서 data 랑 isLoading 을 알려줍니다.
• ["movies","nowPlaying"] 은 단순 식별자입니다.

function Home() {
  const { data, isLoading } = useQuery(["movies", "nowPlaying"], getMovies);
  console.log(data, isLoading);
  return <div style={{ backgroundColor: "whitesmoke", height: "200vh" }}></div>;
}

Fallback (JS)

• API 등 비동기로 데이터를 처리할때 해당 데이터는 동기가 아닌 비동기 이기때문에 데이터가 비어 있을수 있기 때문에 관련된 처리를 해주는 테크닉입니다.

• 코드 예시

  
  <Banner bgPhoto={maekImagePath(data?.results[0].backdrop_path || "")}>

background-image (CSS)

• CSS 로 <img> 태그 없이 배경 사진을 넣을 수 있습니다.

• url() 과 Styled-Components 의 Props 를 사용합니다.

• 코드 예시

  
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(${(props) => props.bgPhoto});

gradient (CSS)

• 섹시한 CSS 스타일링

• 코드 예시

  
  const Wrapper = styled(motion.div)`
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(135deg, rgb(0, 238, 154), rgb(238, 178, 0));
  `;