createElement 스타일 변경

목차

 

 

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

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

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

createElement 태그 스타일 변경

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

 

JS로 태그 추가하기

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

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

 

 

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

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

styled components 심화편

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

코드

//App.js
import React from "react";
import styled from 'styled-components';

function App() {
  return (
    <>
      <D_styled>
        {
          React.createElement(
            "div",{
              id: "id",
              className: "class",
              onMouseEnter: (() =>{
                  document.getElementById(`id`).classList.add('mouseEnter');
              }),
              onMouseLeave: (() =>{
                document.getElementById(`id`).classList.remove('mouseEnter');
              }),
            }
          )
        }
      </D_styled>
    </>
  );
}

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 (
    <>
      <D_styled>
        {
          React.createElement(
            "div",{
              id: "id",
              className: "class",
            }
          )
        }
      </D_styled>
    </>
  );
}

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 (
    <>
      <D_styled>
        {
          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을 제거한다.
              }),
            }
          )
        }
      </D_styled>
    </>
  );
}

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로 바꾸라고 설정해놨기 때문에,

배경색이 바뀐다.

끝