과거 프로그래밍 자료들/React

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

평부 2022. 10. 4. 14:54

 

출처 : 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 만들기 - 인프런 | 강의

리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다., - 강의 소개 | 인프런...

www.inflearn.com

 

 

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

 

 

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

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

div 태그가 계속 리렌더링됨

▶ 해결책 1 : styled-components 사용

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

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

 

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

출처: https://www.inflearn.com/course/web-game-react/dashboard [무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의 웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 Reac..

ba-gotocode131.tistory.com

 

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