styled-components attrs()에 대하여

프로젝트에서 .attrs()을 사용하는 것을 보았는데 이름에서 대충 attributes를 받아다 쓰는 건가보다 싶었다

그래서 좀 더 구체적인 사용법을 알아보기로 하였다

⚠ 회사에서 모르는 내용이나 미흡한 부분을 보완하기 위해 시작한 블로그이므로 styled-components 자체에 대한 설명은 생략합니다

1. attrs()

말 그대로 attributes를 삽입하기 위한 메서드이며 1개의 객체타입의 arg를 받는다

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",

  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;

  /* here we use the dynamically computed prop */
  margin: ${props => props.size};
  padding: ${props => props.size};
`;

render(
  <div>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </div>
);

2. passing props와의 차이점

styled-components를 사용한적이 있다면 passing props에 대해 알고 있을 거다
attrs()패턴과 굉장히 유사하기 때문에 나도 처음 코드를 봤을 때 두 개의 차이를 느끼지 못했다

그래서 뭐가 다른건지 확인을 해봤다

import styled from "styled-components";

const PassingPropsButton = styled.button`
  all: unset;
  padding: 1rem;
  background-color: ${(props) => props.bg};
  color: white;
  margin-right: 1rem;
`;

const UseAttrsButton = styled(PassingPropsButton).attrs((props) => ({
  bg: "red",
  color: "blue",
}))`
  background-color: ${({ bg }) => bg};
  color: ${({ color }) => color};
`;

function App() {
  return (
    <div>
      <PassingPropsButton bg="green">BTN</PassingPropsButton>
      <UseAttrsButton>BTN</UseAttrsButton>
    </div>
  );
}

export default App;

외관상으로는 전혀 다른점을 느낄 수 없었다

하지만 inspector를 보니 변경점을 찾을 수 있었는데
attrs()를 사용하면 in-line style이 적용된다는 점이다

stack overlfow를 검색해보니 다른 차이점도 발견할 수 있었다

TL; DR

• Use styled components for static styles and dynamic styles that don't change very often;
• Use inline styles (through .attrs) for styles that change frequently, like for animations.

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

attrs()를 사용하면 위와 같이 <CheckboxInput />을 사용할 때마다 type="checkbox"를 넣어줄 필요가 없다

즉, html tag가 갖고있는 고유의 attribute를 넣어 재사용하기 위한 컴포넌트를 만들 때 attrs()를 사용하면 유용하다는 것이다

3. TL; DR

attrs()를 사용하면 in-line style로 적용되며,
attrs()의 본래의 목적은 html tag가 갖고있는 고유의 attribute를 반복적으로 사용하지 않기 위해 만들어졌다
ex. <input type="checkbox" />를 만들 때 attrs({ type: checkbox })를 사용

attrs()이 상대적으로 generates a CSS class방식보다 가벼우므로 애니메이션 등의 자주 스타일이 변경되는 작업에 사용하면 효율적인 메모리 사용이 가능하다

+ attrs()를 사용 할 때 attrs((props) => ({...}))과 같이 함수를 arg로 받아 객체를 return해줘야 된다고 알고있었는데 그냥 객체자체(`attrs({...}))를 넣어줘도 정상적으로 작동한다

*Reference

• styled-components documentation : .attrs
• styled-components documentation : Attaching additional props
• When do I use attrs vs passing props directly with styled-components?
• [Styling] Styled Components 이해하고 사용하기! (with React) 💅