인라인 스타일링 시 리렌더링 문제(styled-components를 사용하는 이유)

 

출처 : https://www.inflearn.com/course/%EB%85%B8%EB%93%9C%EB%B2%84%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%A6%AC%EB%89%B4%EC%96%BC/dashboard

[리뉴얼] React로 NodeBird SNS 만들기 - 인프런 | 강의

 

 

* antd로 디자인 중, 일부 항목은 스타일을 변경해야 함

 

 

* (오류) 직접 인라인 스타일링 하는 경우

▶  문제점 : test 함수 내 return 부분 중 div 태그가 리렌더링 됨(변경된 부분이 계속 있다고 인식함)

→ div 태그가 계속 리렌더링됨

▶ 해결책 1 : styled-components 사용

▶ 해결책 2 : style 할 부분을 useMemo로 감싸기

(useMemo 설명 : https://ba-gotocode131.tistory.com/242)

[웹 게임을 만들며 배우는 React] - 로또추첨기, useEffect, useCallback

 

const test = () => {
	return (
    	<>
       	<div style={{marginTop: 10px}}> //계속 리렌더링됨
        <Button type="primary" htmlType="submit" loading={false}>
          로그인
        </Button>
        <Link href="/signup">
          <Button>회원가입</Button>
        </Link>
      </div>
        </>
    )
}

export default test

 

 

* 해결책 1 : styled-component 사용

▶ styled-components 설치

//설치
npm i styled-components
//불러오기
import styled from "styled-components";

▶ Button 부분에 styled-components 적용

import styled from "styled-components";

const ButtonTest = styled.div` //`` 사용
	margin-top: 10px;
`

const test = () => {
	return (
    	<>
       	<ButtonTest>
        <Button type="primary" htmlType="submit" loading={false}>
          로그인
        </Button>
        <Link href="/signup">
          <Button>회원가입</Button>
        </Link>
      </ButtonTest>
        </>
    )
}

export default test

 

 

* 해결책 2 : style 할 부분을 useMemo로 감싸기

▶ useMemo : 복잡한 함수 결과값을 리턴

▶ 두 번째 인자([ ])가 바뀌지 않는 한 다시 실행되지 않음

▶ 예시는 두 번째 인자를 비워놓은 상태이므로 한 번만 기억하고 다시 바뀌지 않음 

import React, { useMemo } from "react";

const style = useMemo(() => ({ marginTop: 10 }), [])

const test = () => {
	return (
    	<>
       	<div style={style}>
        <Button type="primary" htmlType="submit" loading={false}>
          로그인
        </Button>
        <Link href="/signup">
          <Button>회원가입</Button>
        </Link>
      </div>
        </>
    )
}

export default test