[React][NHN] 어떤 요소에 mouseover시, 다른 내용으로 바뀌는 기능 만들기
안녕하세요? 지금은 NHN 웹사이트를 열심히 다시 만드는 중이랍니다? 정보 사이트라 수월하게 만들어질 것 같았지만... 생각보다 막히는 기능들이 생기네요
이번에는 회사의 기본윤리를 소개하는 페이지에서, 다음과 같은 기능을 만드는 데에 조금 애를 먹었습니다..
원에 mouseover가 되었을 때 원의 컨텐츠가 다른 컨텐츠로 바뀌는 기능입니다. 여러가지 방법을 생각해봤습니다 겁도 났습니다 내가 과연 이 기능을 만들 수 있을까?? 아직 많이 부족한가봅니다... 이렇게 해보면 안 될까? 하고 생각이 뿅 하고 나는데, 그럼 그걸 어떻게 구현해야 되지? 뭐부터 만들어봐야 하지? 라는 생각부터 드네요 ~!
그치만 해야 됩니다
차근차근히 해보겠어요 난 찐따 개발자니까...
👉원리
[원 제작] 원 안에 들어갈 내용들을 구조체로 제작한다. -> map으로 원들을 제작한다. -> 스타일 컴포넌트에 hover 됐을 때의 스타일을 제작해놓는다.
[mouseover 동작] state제작 -> mouseover, mouseleave를 이용해 state 변경 -> 삼항연산자를 이용해 state에 따라 내용을 띄워줌
(원리만 봤을 땐 이해 안 됐을 수도 있습니다. 저도 정리하고 보니 너무 간추려놔서 뭔말인지 모르겠군요)
👉Code
- Ethics.jsx (메인)
- menus.js (원 내용에 들어갈 구조체 파일)
먼저 원을 생성할 겁니다.
원에 들어갈 내용을 쉽게 넣기 위해 menus.js 파일에 원에 들어갈 내용들을 모두 오브젝트로 만들어 줍니다.
// menus.js
export const CircleData = [
{
title: "고객",
content: (
<span>
경영활동에서 최우선의
<br />
판단기준
</span>
),
},
{
title: "주주",
content: (
<span>
기업활동을 위한
<br />
투자의 주체
</span>
),
},
{
title: "협력업체",
content: "서로의 성장을 돕는 파트너",
},
{
title: "사회",
content: (
<span>
함께 사는 사회의
<br />
기업시민 정신
</span>
),
},
{
title: "임직원",
content: "최고의 서비스 창출의 주체",
},
];두 줄로 만들기 위해 span과 br 태그를 이용했습니다.
다시 Ethics.jsx 파일로 돌아와서 map 함수를 이용해 내용들을 띄워줄 겁니다.
먼저 CircleData를 import 해오시구요 map으로 큰틀을 만들어줍니다.
// Ethics.jsx
{
CircleData.map((value)=>{
return(
<CircleList key={value.title}></CircleList>
)
})
}
이제 state를 만들고 본격적으로 동작을 만들어 봅시다
let [circle, setCircle] = useState("");" " 으로 state를 만들어 놓은 이유는 보다보면 아십니다
원리는 이렇습니다
mouseover가 되면 circle state에 value.title을 넣어줍니다. 그런 다음 삼항연산자로 state에 value.title이 들어오면 value.content를 띄워주는 원리입니다. 여기서의 value는 map에서 나온 것으로 오브젝트가 들어가 있겠죠?
이제 만들어 봅시다요
// Ethics.jsx
{
CircleData.map((value)=>{
return(
<CircleList
key={value.title}
id={circle === value.title ? "hoverCircle" : undefined}
onMouseOver={() => setCircle(value.title)}
onMouseLeave={() => setCircle("")}
>
{ circle === value.title ? value.content : value.title }
</CircleList>
)
})
}
const CircleList = styled.li`
...
&#hoverCircle { // mouseover됐을 때의 style
background: #e72f2c;
color: #fff;
}먼저 id값을 주는 이유는, mouseover됐을 때의 원의 스타일 값을 다르게 줘야 하기 때문이다. id값이 value.title일 때 즉 mouseover가 됐을 때 hoverCircle이라는 스타일을 준다.
mouseover가 되면 circle state에 value.title을 집어 넣어준다. 그러면 삼항연산자를 이용해 circle state값이 무엇인지를 판단해서 그에 맞는 content를 띄워주는 것이다.
-
여기까지 이해되셨나요? 저는 완벽히 이해가 됐습니다
그럼 안녕히!