현재 버전

킁킁탐정 // 제가 작성중인 코드는 테슬라 홈페이지 메인페이지(첫 화면)입니다.

스크롤을 내리면 해당 화면 중앙으로 이동하고, css가 뜨는 걸 구현하려고 하는데

스크롤이벤트부터 구현이 안됩니다...

https://www.tesla.com/ko_kr

말씀하신대로 조언에 따라서 map이 돌아가는 부분 하위에 컴포넌트를 새로 팠습니다.

문제는 처음 딱 한번만 작동하고 useEffect가 해당 값의 변화를 감지하지 못합니다.

이를 해결하려면 어떻게 해야하나요???

import React, { useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

function ScrollBox ({el, i}) {
  const scroll = useRef(null);
  useEffect(() => {
    let point = scroll.current.scrollTop
    console.log('위치 ' + point);
  }, [scroll]);

  return (
    <picture className="images" key={i} ref={scroll}>
      <MiddleBox>
        <ModelTitle>{el.name}</ModelTitle>
        <SubTitle>
          <Link className='subLink' to="">{el.riding}</Link>
        </SubTitle>
      </MiddleBox>
      <UnderBox>
        <OrderLink>{el.order}</OrderLink>
        <DetailLink>{el.detail}</DetailLink>
      </UnderBox>
      <Imgtag src={el.img_src} alt={el.img_alt} />
    </picture>
  );
};

function Image1 ({el, i}) {
  return(
    <ScrollBox el={el} i={i} />
  );
};

export default Image1;

const Imgtag = styled.img`
  display: block;
  width: 1fr;
  height: 1fr;
  max-width: 2048px;
  position: relative;
  justify-content: center;
`;

const MiddleBox = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  flex-direction: flex-end;
  align-items: center;
  z-index: 1;
  position: absolute;
  left: 50%;
  margin-top: calc(16vh + 20px);
`;

const ModelTitle = styled.h1`
  display: inline-block;
`;
const SubTitle = styled.h2`
  .subLink {
    
  }
`;

const UnderBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: flex-end;
  flex-flow: 1;
`;

const OrderLink = styled(Link)``;
const DetailLink = styled(Link)``;



수정 이력

2021-02-01 20:49:30 에 아래 내용에서 변경 됨 #2

킁킁탐정 // 제가 작성중인 코드는 테슬라 홈페이지 메인페이지(첫 화면)입니다.

스크롤을 내리면 해당 화면 중앙으로 이동하고, css가 뜨는 걸 구현하려고 하는데

스크롤이벤트부터 구현이 안됩니다...

https://www.tesla.com/ko_kr

말씀하신대로 조언에 따라서 새로 하위에 컴포넌트를 새로 팠습니다.

문제는 처음 딱 한번만 작동하고 useEffect가 해당 값의 변화를 감지하지 못합니다.

이를 해결하려면 어떻게 해야하나요???

import React, { useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

function ScrollBox ({el, i}) {
  const scroll = useRef(null);
  useEffect(() => {
    let point = scroll.current.scrollTop
    console.log('위치 ' + point);
  }, [scroll]);

  return (
    <picture className="images" key={i} ref={scroll}>
      <MiddleBox>
        <ModelTitle>{el.name}</ModelTitle>
        <SubTitle>
          <Link className='subLink' to="">{el.riding}</Link>
        </SubTitle>
      </MiddleBox>
      <UnderBox>
        <OrderLink>{el.order}</OrderLink>
        <DetailLink>{el.detail}</DetailLink>
      </UnderBox>
      <Imgtag src={el.img_src} alt={el.img_alt} />
    </picture>
  );
};

function Image1 ({el, i}) {
  return(
    <ScrollBox el={el} i={i} />
  );
};

export default Image1;

const Imgtag = styled.img`
  display: block;
  width: 1fr;
  height: 1fr;
  max-width: 2048px;
  position: relative;
  justify-content: center;
`;

const MiddleBox = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  flex-direction: flex-end;
  align-items: center;
  z-index: 1;
  position: absolute;
  left: 50%;
  margin-top: calc(16vh + 20px);
`;

const ModelTitle = styled.h1`
  display: inline-block;
`;
const SubTitle = styled.h2`
  .subLink {
    
  }
`;

const UnderBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: flex-end;
  flex-flow: 1;
`;

const OrderLink = styled(Link)``;
const DetailLink = styled(Link)``;


2021-02-01 20:22:15 에 아래 내용에서 변경 됨 #1

킁킁탐정 // 말씀하신대로 조언에 따라서 새로 하위에 컴포넌트를 새로 팠습니다.

문제는 처음 딱 한번만 작동하고 useEffect가 해당 값의 변화를 감지하지 못합니다.

이를 해결하려면 어떻게 해야하나요???

import React, { useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';

function ScrollBox ({el, i}) {
  const scroll = useRef(null);
  useEffect(() => {
    let point = scroll.current.scrollTop
    console.log('위치 ' + point);
  }, [scroll]);

  return (
    <picture className="images" key={i} ref={scroll}>
      <MiddleBox>
        <ModelTitle>{el.name}</ModelTitle>
        <SubTitle>
          <Link className='subLink' to="">{el.riding}</Link>
        </SubTitle>
      </MiddleBox>
      <UnderBox>
        <OrderLink>{el.order}</OrderLink>
        <DetailLink>{el.detail}</DetailLink>
      </UnderBox>
      <Imgtag src={el.img_src} alt={el.img_alt} />
    </picture>
  );
};

function Image1 ({el, i}) {
  return(
    <ScrollBox el={el} i={i} />
  );
};

export default Image1;

const Imgtag = styled.img`
  display: block;
  width: 1fr;
  height: 1fr;
  max-width: 2048px;
  position: relative;
  justify-content: center;
`;

const MiddleBox = styled.div`
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  flex-direction: flex-end;
  align-items: center;
  z-index: 1;
  position: absolute;
  left: 50%;
  margin-top: calc(16vh + 20px);
`;

const ModelTitle = styled.h1`
  display: inline-block;
`;
const SubTitle = styled.h2`
  .subLink {
    
  }
`;

const UnderBox = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: flex-end;
  flex-flow: 1;
`;

const OrderLink = styled(Link)``;
const DetailLink = styled(Link)``;