동적 아이템 선택: React Hooks로 제작

TLTR

15초간 설명을 보려면 아래의 빠른 설명으로 이동하십시오.

실제 작동을 보고 싶으십니까? deployed demo 을 사용해 보십시오. 심층 다이빙을 원하십니까? the repo에서 살펴보세요.

요구 사항

이 기사에서 설명할 내용을 이해하려면 아래 내용을 알아야 합니다.

반응 후크

React 기능 구성 요소

스타일 구성 요소

위의 내용을 이해합니까? 좋아요, 계속 읽으세요! 그렇지 않다면 나는 그들에 대해 배우거나 재교육을 위해 빠른 인터넷 검색을 할 것입니다.

빠른 설명

이 후크를 통해 사용자는 호버링된 목록 항목을 강조하고 다른 모든 요소를 ​​흐리게 하는 'n'개의 목록 항목을 만들 수 있습니다.

사용자가 더 이상 목록 항목 위로 마우스를 가져가지 않으면 모든 요소가 기본 정렬로 돌아갑니다.

이 후크는 또한 스타일이 지정된 구성 요소와 쌍을 이룹니다. 이 경우 내 스타일 요구 사항에 맞게 하드 코딩된 TextAnimateLi라고 하지만 스타일 및 요소 기본 설정으로 변경할 수 있습니다.

useTextAnimate

const useTextAnimate = (data) => {
  const [content, setContent] = useState(data);

  const setOneActive = (name) => {
    let contentCopy = [...content];

    contentCopy.forEach((item, index, arr) => {
      if (arr[index].name !== name) {
        arr[index].isActive = false;
      }
    });

    setContent(contentCopy);
  };

  const setAllActive = () => {
    let contentCopy = [...content];

    contentCopy.forEach((item, index, arr) => {
      arr[index].isActive = true;
    });

    setContent(contentCopy);
  };

  return { setOneActive, setAllActive, content };
};

이 후크를 사용하면 개체 배열을 인수로 사용합니다.

const data = useTextAnimate([
    { name: 'work', isActive: true },
    { name: 'about', isActive: true },
]);

여기에서 객체 배열data을 상태의 content에 할당합니다. 이를 통해 동적 스타일 변경에 필요한 상태 저장 논리를 사용할 수 있습니다.

그런 다음 이름이 일치하는 요소를 제외한 모든 요소를 ​​false로 설정하는 첫 번째 함수setOneActive로 이동합니다. 하나의 요소를 강조하여 볼 수 있게 해주는 논리입니다.

다음 함수setAllActive()는 기본 논리인 모든 항목을 강조하도록 설정합니다.

반환되는 내용은 다음과 같습니다.

content - 사용자가 제공한 개체의 배열입니다.

setOneActive - 기능

setAllActive - 기능

실생활 사용

후크를 사용할 때 개체 배열을 인수로 사용합니다.

각 개체는 다음 속성을 포함해야 합니다.

이름(목록 항목에서 원하는 텍스트로 초기화)

isActive(항상 기본적으로 true로 설정)

const data = useTextAnimate([
    { name: 'work', isActive: true },
    { name: 'about', isActive: true },
    { name: 'contact', isActive: true },
    { name: 'cv', isActive: true },
  ]);

참고: useTextAnimate에서 검색된 값은 변수에 할당되어야 합니다.

useTextContent는 3가지를 반환합니다.

콘텐츠(이전 객체의 배열)

setOneActive(위의 useTextAnimate에서 설명)

setAllActive(위의 useTextAnimate에서 설명)

후크는 필요한 논리를 제공했습니다. 이제 해당 논리를 사용할 목록 항목으로 정렬되지 않은 목록을 채울 것입니다.

논리를 사용하기 전에 스타일 구성 요소 TextAnimateLi가 필요합니다.

const TextAnimateLi = styled.li`
  color: white;
  transition: color 0.2s;
  cursor: pointer;
  ${({ content, index }) => {
    if (content[index].isActive === false) {
      return `
      color: rgba(255, 255, 255, 0.5);  
    `;
    }
  }}
`;

짧고 달콤하게 유지합니다. useTextAnimate에서 제공하는 데이터를 사용하여 각 목록 항목의 스타일을 동적으로 지정합니다.

이제 이것을 함께 넣기 위해 예제에서 생성한 배열을 매핑해야 합니다. data.content를 사용하여 이 작업을 수행할 수 있습니다. 이전에 변수를 생성할 때 변수 이름data을 사용하는 것은 개인적인 선택이었습니다. 당신이 원하는 무엇이든 될 수 있습니다!)

<ul className={className}>
      {data.content.map((item, index) => {
        return (
          <TextAnimateLi
            key={index}
            onMouseEnter={() => data.setOneActive(item.name)}
            onMouseLeave={() => data.setAllActive()}
            content={data.content}
            index={index}
          >
            {item.name}
          </TextAnimateLi>
        );
      })}
    </ul>

무슨 일이야? 화살표 함수의 매개변수item는 배열 내용 내의 현재 객체입니다.

각 구성 요소 TextAnimateLi에 대해 속성 집합을 추가합니다.

key인덱스를 값으로 취해야 하며 uniqid())와 같은 것을 사용하지 마십시오.

onMouseEnter함수 호출 setOneActive()

onMouseLeave함수 호출 setAllActive()

content개체 배열을 가져옵니다

.

index현재 인덱스를 가져옵니다

.

스타일 지정 논리를 이해하기 위해 TextAnimateLi를 다시 살펴보겠습니다.

/* It doesn't have to be a li. But for this case it's the best option. */
const TextAnimateLi = styled.li`
  /* This is the default color */
  /* You can set a new color here */
  color: white;
  transition: color 0.2s;
  cursor: pointer;
  ${({ content, index }) => {
    if (content[index].isActive === false) {
      return `
      /* This is the dimming color */
      /* You can set a new color here */
      color: rgba(255, 255, 255, 0.5);  
    `;
    }
  }}
`;

매우 간단합니다. 현재 항목이 활성화되어 있지 않으면 색상을 반환하고 그렇지 않으면 흐리게 표시되며 기본 색상으로 돌아갑니다.

적절하다고 생각되는 대로 변경하려면 코드에서 내 의견을 살펴보세요. 다양한 룩을 연출할 수 있는 스타일링을 자유롭게 해보세요!

즐기다!