[React] 버튼에 따른 콘텐츠 변경(챌릭스)

목표

버튼에 따른 콘텐츠 변경

첫번째 버튼. 버튼에 따라 siteReferrer에 Technology,CONTACT,DESIGN,AI 상태로 변경되면서 콘텐츠도 변경

두번째 버튼. 현재 콘텐츠에서 refresh 버튼을 누르면 다음 인덱스에 있는 콘텐츠로 변경

구조

AppRouter -> MainContainer(메인페이지 통합 컴포넌트) -> VisionMainSection(메인비쥬얼 컴포넌트)

흐름

1. AppRouter에서 siteReferrer state를 관리하면서 MainContainer에 props로 데이터를 보내줌

2. MainContainer은 VisionMainSection에 siteReferrer를 props로 보내줌

3. VisionMainSection

첫번째 버튼

1. 콘텐츠에 담을 배열 선언

const CHALIXCONTENS = [
  {
    id: 1,
    tit: "TECHNOLOGY",
    vid1: "back2.mp4",
    vid2: "2.mp4",
    text: "압도적인 기술력으로 경쟁사와 격차를 벌리는 홈페이지",
  },
  {
    id: 2,
    tit: "CONTACT",
    vid1: "contact01.mp4",
    vid2: "contact0222.mp4",
    text: "당신의 브랜드를 고객에게 강력히 각인시킬 홈페이지",
  },
  {
    id: 3,
    tit: "DESIGN",
    vid1: "design.mp4",
    vid2: "design222.mp4",
    text: "당신의 비즈니스에 강력한 차별화가 될 홈페이지",
  },
  {
    id: 4,
    tit: "A.I & GPT",
    vid1: "ai.mp4",
    vid2: "ai22.mp4",
    text: "시장 판도를 뒤흔드는 A.I기술을 당신의 홈페이지에 적용하세요",
  },
];

2. chalixContents state 선언해서 초기객체 설정

const [chalixContents, setChalixContents] = useState({
    id: 1,
    tit: "Technology",
    vid1: "back2.mp4",
    vid2: "2.mp4",
    text: "압도적인 기술력으로 경쟁사와 격차를 벌리는 홈페이지",
  });

3. 버튼 onClick 하면 siteReferrer상태 변경 (changeRe함수에 인자로 넣어준걸로 setSiteReferrer값 업뎃)

onClick={() => {
  changeRe("AI");
  changeContents();
}}

4. onClick시 changeContents()도 함께 호출된다.

• siteReferrer값에 따라 setChalixContents 상태를 콘텐츠에 맞는 CHALIXCONTENS 인덱스를 return 한다.

  const changeContents = () => {
    setVisionActive(false);

    if (siteReferrer === "Technology") {
      setChalixContents(CHALIXCONTENS[0]);
    } else if (siteReferrer === "CONTACT") {
      setChalixContents(CHALIXCONTENS[1]);
    } else if (siteReferrer === "DESIGN") {
      setChalixContents(CHALIXCONTENS[2]);
    } else if (siteReferrer === "AI") {
      setChalixContents(CHALIXCONTENS[3]);
    } else {
      setChalixContents(CHALIXCONTENS[0]);
    }

    setTimeout(() => {
      setVisionActive(true);
    }, 500);
  };

  useEffect(() => {
    changeContents();
  }, [siteReferrer]);

두번째 버튼

1. refresh 버튼 onClick 시 함수 호출

<button
  className="vision-main-middle-btn"
  type={"button"}
  onClick={() => {
    changeContentsBtn();
  }}
>

• 현재 findIndex()메소드를 사용해서 chalixContents의 인덱스를 찾는다.
• 다음 인덱스를 계산해서 nextIndex에 할당 (배열의 끝에 도달했다면 다시 0으로 설정된다.)
• 결국 함수가 호출되면 setChalixContents 상태 CHALIXCONTENS[nextIndex] 넣어서 다음 콘텐츠로 상태가 변경된다.

const changeContentsBtn = () => {
    setVisionActive(false);

    const currentIndex = CHALIXCONTENS.findIndex(
      (content) => content.id === chalixContents.id
    );
    const nextIndex = (currentIndex + 1) % CHALIXCONTENS.length;

    setChalixContents(CHALIXCONTENS[nextIndex]);

    setTimeout(() => {
      setVisionActive(true);
    }, 500);
  };

문제였던 부분

• 첫번째 버튼 개발할 때 useEffect에 조건을 chalixContents로 줬었다.
  그래서 버튼을 누를 때 처음엔 siteReferrer값만 변경되고 콘텐츠가 변경되지 않았다.

• 다른분께 헬프쳐서 조건을 siteReferrer가 변경될때 리랜더링 되도록해서 문제가 해결됐다.

---

여러개 버튼 스테이트 한개로 관리

1. hoveredBtnIndex의 초기값을 null로 주고 handleHoverMouseEnter 함수가 호출되면 index값으로 상태 변경을 하게 선언

const [hoveredBtnIndex, setHoveredBtnIndex] = useState(null);

  const handleHoverMouseEnter = (index) => {
    setHoveredBtnIndex(index);
  };

  const handleHoverMouseLeave = () => {
    setHoveredBtnIndex(null);
  };

• 버튼에 onMouseEnter시 handleHoverMouseEnter 함수에 인덱스를 인자로 넘겨준다.
• handleHoverMouseEnter가 hoveredBtnIndex 상태를 변경해주면
• hoveredBtnIndex가 몇번인지에 따라 className에 active를 추가해서 버튼마다 애니매이션을 적용한다.

<button
  className={`vision-main-middle-hover-text-item ${
    hoveredBtnIndex === 0 ? "active" : ""
  }`}
  type={"button"}
  onClick={() => {
    changeRe("Technology");
    changeContents();
  }}
  onMouseEnter={() => handleHoverMouseEnter(0)}
  onMouseLeave={handleHoverMouseLeave}
>
  <p className="vision-main-middle-hover-text-item-text">
    TECHNOLOGY
  </p>
</button>