createElement 스타일 변경

createElement 스타일 변경

목차

오랜만에 포트폴리오를 만지니깐

포스팅할 아이템도 더 눈에 띈다.

잠시 거리를 두고 보는 것은 이러한 장점이 있다.

createElement 태그 스타일 변경

일단 createElement 함수에 대해 모르는 사람은 알아보고 오자!

글이 80개 정도 쌓이니깐 슬슬 기초적인 건 다 적어놨다고 생각하는 게 편하다.

인용할 때도 그렇고, 포스팅 주제 찾을 때도 그렇고.

함수로 element를 만들었을때 해당 태그 스타일을 변경하는 것은 살짝 까다롭다.

태그 스타일을 정의할수도 없어서 동적 스타일을 할 수도 없다.

그래서 가장 편한건 className을 추가하는 것이다.

코드

//App.js import React from "react"; import styled from 'styled-components'; function App() { return ( <> { React.createElement( "div",{ id: "id", className: "class", onMouseEnter: (() =>{ document.getElementById(`id`).classList.add('mouseEnter'); }), onMouseLeave: (() =>{ document.getElementById(`id`).classList.remove('mouseEnter'); }), } ) } ); } const D_styled = styled.div` .class{ width: 100px; height: 100px; background:orange; } .mouseEnter{ background: red; } `; export default App;

해석

일단 기본적인 코드를 알고 가자

//App.js import React from "react"; import styled from 'styled-components'; function App() { return ( <> { React.createElement( "div",{ id: "id", className: "class", } ) } ); } const D_styled = styled.div` `; export default App;

으음 대충 이 정도 일려나

D_styled라는 스타일 정의 태그를 styled-components로 만들어내서 추가하였고,

그 안에 함수로 태그를 생성하였다.

자 이제 내가 어떠한 상황일 때 태그 스타일을 변경하고 싶다.

//App.js import React from "react"; import styled from 'styled-components'; function App() { return ( <> { React.createElement( "div",{ id: "id", className: "class", onMouseEnter: (() =>{ // 마우스가 해당 태그 영역안에 들어갔을때 document.getElementById(`id`).classList.add('mouseEnter'); // 태그중 'id'라는 id를 가진 태그를 찾아 // mouseEnter이라는 className을 추가한다. }), onMouseLeave: (() =>{ // 마우스가 해당 태그 영역밖으로 나갔을때 document.getElementById(`id`).classList.remove('mouseEnter'); // 태그중 'id'라는 id를 가진 태그를 찾아 // mouseEnter이라는 className을 제거한다. }), } ) } ); } const D_styled = styled.div` .class{ // class라는 className을 가진 태그에 스타일 추가 width: 100px; height: 100px; background:orange; } .mouseEnter{ // mouseEnter라는 className을 가진 태그에 스타일 추가 background: red; } `; export default App;

onMouseEnter라는 속성 안에

document.getElementById(`id`).classList.add('mouseEnter');

를 추가하였다.

마우스가 해당 태그 영역 안에 들어갔을 때,

`id`라는 id를 가진 태그를 찾아,

'mouseEnter'이라는 className을 추가한다.

그러면 부모 태그 D_styled 스타일에서

자식중 .mouseEnter 라는 className을 가진 태그는

background를 red로 바꾸라고 설정해놨기 때문에,

배경색이 바뀐다.

끝

from http://sirong.tistory.com/99 by ccl(A) rewrite - 2021-04-18 23:00:45