23.07.03 ~ 23.07.07 WIL

WIL and a week diary

스타일 컴포넌트의 위치는?

스타일 컴포넌트 똑똑하게 잘 사용하기_학습자료

너무 오랜만에 사용해봤던 스타일 컴포넌트.
프로젝트 때 여러번 잠깐 써보고 나머지는 css module로 사용했었는데,
최근 입사한 회사에서 스타일 컴포넌트를 채택하여 사용하는 것을 보고 다시 사용해본 한 주였다.

처음엔 조금 헷갈리다가 금방 적응하고 맡은바 UI를 Styled-Component로 구현할 수 있었다.

사수님과의 간단한 프로젝트 코드 리뷰 시간이 있었는데,
이 때 부끄럽게도 컴포넌트 함수 내부에 스타일 컴포넌트를 선언하여 사용한 것을 알았다..

꼭 컴포넌트 함수 밖에 선언하고 안에서 사용하기 ⭕️

import React, { FC, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
이하 생략..

//---------------------------Styled-Components Area

const styledComponent1 = styled.div`
  margin-bottom: 16px;
`;

const styledComponent2 = styled.h2`
  font-size: 20px;
  font-weight: 500;
  color: red;
  margin: 0;
`;


//----------------------------컴포넌트 함수 시작
const Something = (props) => {

  return (
	...생략
  );
};

export default Something;

스타일컴포넌트 선택자 &

this 선택자의 느낌. 현재 스타일 컴포넌트를 지칭한다.

const styledComponent1 = styled.div`
  margin-bottom: 16px;

	& h1 {
		color : black;
		font-size : 32px;
	} 

// <styledComponent1></styledComponent1> 안에 있는 모든 h1 요소에 css 속성을 적용.
`;

const styledComponent2 = styled.h2`
  font-size: 20px;
  font-weight: 500;
  color: red;
  margin: 0;
`;

Next.js 현재 url 찾기

참고 블로그

Next.js로 진행되는 프로젝트에서 현재 url 경로를 알고싶을 때는
useRouter를 사용해야한다.

console로 log를 찍어보면 asPath, pathname, query, route 등의 속성에 접근가능함을 알 수 있다.

컴포넌트를 분리하지 않아 렌더링이 두 번 일어난 건에 대하여

🔥 배경 : Toggle Drop Box를 만들었는데, 어느순간부터 토글링이 되지 않았음. 로그를 찍어보니 state가 재빠르개 false ➡️ true ➡️ false로 제자리로 돌아오고 있었음.

❓ 원인 : 컴포넌트 내에 useRef로 인하여 한 번의 클릭으로 렌더링이 두 번 일어남.

✅ 해결 : 컴포넌트를 세세하게 분리하지 않은 것에서 비롯된 문제였음.

1. 버튼을 클릭함으로써 State가 변경되어 컴포넌트가 다시 렌더링
   (false ➡️ true)

2. 토글 버튼이 변경됨.
   (문제는 토글 버튼을 따로 독립적인 요소로 빼놓지 않았음.)
   a. 토글 버튼을 클릭함으로써 상태가 변경되고,
   b. 토글 버튼의 상위 컴포넌트의 상태가 변하게 되어 다시 리렌더링.

3. 결과적으로 토글 버튼을 포함하고 있는 상위 Component UI 전체가 다시 렌더링됨. 총 2번의 렌더링으로 false - true - false로 재빠르게 상태변화가 진행되었던 문제.

   토글 버튼을 독립적인 요소로 빼내어 상위 컴포넌트들의 리렌더링을 방지함으로써 해결.