React? CSS-in-JS

CSS-in-JS? CSS ???? JavaScript ?? ?? ???? ?????. ?? ?? ???? JavaScript ??? ???? CSS ??? ??? ? ??? React ?????? ??? ??? ?? ?? ???? ???? ?? ??? ?????. ? ??? ???? ?? ?????? ?? ?? ????? ??? ???? ???? ?? ????? ???? ??? ?????.

React?? CSS-in-JS? ???? ???? ?? ?? ??? ???? ???? ???? ?? ?? ???? ??? ? ????. Styled Components, Emotion, JSS

? ? ??? ???? ?? ?? ?????? ????.

---

CSS-in-JS? ?? ??

1. ??? ??? ???

   : CSS-in-JS? ???? ??? ?? ?? ??? ???? ?? CSS ?? ???? ?????. ??? ?? ???? ?? ?? ?? ??? ????? ??????? ? ?? ?? ??? ? ????.

2. ?? ????

   : CSS-in-JS? ???? JavaScript ??, ?? ? ??? ???? ?? ?? ??? ?? ???? ???? ?? ??? ? ????. ?? ?? ??? ?? ?? ??? ??? ? ????.

3. ?? ?? ?? ????

   : ???? ?? ?? ??? ?? ????? ?? ??? ???????? ????? ? ????. ?? ?? ?? ????? ?? ??? ??? ?????? ???????.

4. ?? ???? ???

   : Styled Components ? Emotion? ?? ?? CSS-in-JS ?????? ???? ???? ???? ???? ???? ? ???? ?????.

5. ??

   : CSS-in-JS? ???? ?? ??? ? ?? ?? ? ????. ??? ???? ? ???, ?????? ? ?? ?? ???? ???? ?? ?? ??? ???? ??? ? ????.

---

?? CSS-in-JS ?????

1. ???? ??? ?? ??

??? ?? ??

? CSS-in-JS?? ?? ?? ?? ????? ? ?????. ?? ?? JavaScript ?? ?? ?? CSS ??? ??? ? ??? ??? ?? ?? ??? ?????.

?: ???? ??? ?? ?? ??

npm install styled-components

import React from 'react';
import styled from 'styled-components';

// Create a styled component
const Button = styled.button`
  background-color: ${(props) => (props.primary ? 'blue' : 'gray')};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

??:

• styled.button? ?? ?? ??? ???? ??? ? ??? Styled ?? ???? ???? ?????.
• ???? ??? ?? ????? ?????. ?, ???? ?? ???? ??? ?? ????.
• ?? ??? ??? ???? ???? ???? ? ?????.

---

2. ??

Emotion? ??? ???? ???? ???? ? ?? ?? ?? CSS-in-JS ????????. ??? ?? ??? ????? ?? ??? ? ?? ? ???? ?? ? ?? ??? ?? ? ?? ?? ??? ????.

?: ?? ??

npm install @emotion/react @emotion/styled

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const buttonStyle = (primary) => css`
  background-color: ${primary ? 'blue' : 'gray'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

const Button = styled.button`
  ${props => buttonStyle(props.primary)}
`;

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

??:

• Emotion? CSS ??? ??? ??? ???? ? ????, ??? ??? ??? API? ?? ?? ??? ??? ? ????.
• Emotion? ???? ??? ???? JavaScript ??? ?? ???? ???? ??? ? ????.

---

3. JSS(?????? ??? ??)

JSS? JavaScript? ???? CSS? ??? ? ??? ?? ? ?? CSS-in-JS ????????. ??? ?? ?? ? ?? ??? ??? ?? ??? ?? ???? ?? ???? ??? ? ????.

?: JSS ??

npm install jss react-jss

import React from 'react';
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  button: {
    backgroundColor: (props) => (props.primary ? 'blue' : 'gray'),
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    '&:hover': {
      opacity: 0.8,
    },
  },
});

const Button = (props) => {
  const classes = useStyles(props);

  return <button className={classes.button}>{props.children}</button>;
};

const App = () => {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Secondary Button</Button>
    </div>
  );
};

export default App;

??:

• createUseStyles? ???? ???? React-jss?? ???? ?????.
• useStyles ??? props? ???? ??? ??? ??? ?????.
• ? ??? ?? ??? ??? ??? ???? ?? ???? ?????.

---

CSS-in-JS? ??

CSS-in-JS?? ?? ??? ??? ??? ??? ????.

1. ?? ????: CSS-in-JS ?????? ?? ?? ???? ?? ??? ??????? ?? ?? ????? ??? ? ????.
2. ?? ?? ??: ???? JavaScript ??? ?? ??? ????? JavaScript ??? ??? ?? ? ????.
3. ?? ??: ?? CSS ?? ???? ?? ????(?: Sass)? ??? ???? ?? CSS-in-JS? ????? ?? ??? ??? ? ????.
4. ????? ??: ?? ???? ??? ??? ???? ??? ???? ?? ????? ?? ??? ????? ?????.

---

CSS-in-JS ?? ??

1. ?? ??: CSS-in-JS ??????? ???? ?? ??? ???? ?? ?? ???(?: ??, ??)? ?????.
2. ??? ?? ??: ??? ?? ?? ?? JSS? ???? ??? ??? ??? ?? ?? ??? ???? ?? ???? ?? ???? ?? ?????.
3. ?? ??? ??: ??? ?? ???? ??? ???? ??? ?? ? ???? ?? ???? ???? ?????.
4. ??? ?? ??: Babel? ?? ??? ??? CSS? ????? ? CSS-in-JS ?????? ??? ????? ? ??? ? ? ????.

---

??

CSS-in-JS? JavaScript? CSS? ??? ??? ???? React ?????? ???? ???? ???? ?? ?????. ??? ?? ??, Emotion ?? JSS? ?? ?????? ???? JavaScript ?? ?? ???? ???? ?????? ???, ?? ? ?? ???? ???? ? ????. ??? ?? ??? ????????? CSS-in-JS ??? ???? ?? ?? ??? ??? ??? ?? ?????.

---

? ??? CSS-in-JS: React ??????? ?? ???? ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!