TIL. 37 React - Styled Component를 사용한 버튼 색 바꾸기

💡 연습

import React, { useState } from "react";
import styled from "styled-components";

function App() {
  const [color, setColor] = useState("yellow");
  const onClick = () => {
    color === "yellow" ? setColor("red") : setColor("yellow");
  };

  const Button = styled.button`
    background-color: ${color};
    padding: 10px 30px;
  `;

  return (
    <>
      <Button onClick={onClick}>button</Button>
    </>
  );
}

export default App;

• 아직 익숙치는 않지만 이리저리 코드를 수정하며 사용법에 대한 아주 대략적인 감은 get했나..? hook과 styled component에 대한 내용을 공부하며 작성하는 게시글이 많아질 것 같다.

💡 수정사항 발생(수정 후 코드)

import React, { useState } from 'react';
import styled from 'styled-components';

const Main = () => {
  const [color, setColor] = useState('red');

  const onClick = () => {
    color === 'red' ? setColor('yellow') : setColor('red');
  };

  return (
    <Button color={color} onClick={onClick}>
      button
    </Button>
  );
};

export default Main;

const Button = styled.button`
  background-color: ${props => props.color};
`;

• 연습했던 코드에 대한 실행이 잘되서 문제가 없는 줄 알았는데, Button 스타일드 컴포넌트의 위치가 틀렸었다. 계속해서 렌더될 필요가 없는 부분이라 밖에서 선언해줘야 한다.

• 중요한 점은 그 수정사항으로 인해 값을 직접적으로 받지는 못하고, props로 내려 받아야 한다.