0622-TIL-React styled components

React styled components

const StButton = styled.button`
  cursor: pointer;
  padding: 10px 49px;
  margin: 0px 10px 0px 10px;
  background-color: white;
  border-radius: 10px;
`;

styled components를 사용하기 위해서는 먼저 yarn add 로 설치를 해주어야 한다.

그리고 import한 후에 사용할 수 있다.

 

위의 코드처럼 변수에 원하는 요소이름 앞에 styled를 붙이고 사용하면 된다.

백틱 안에 css요소를 작성하면, <StButton><StButton/>은 이제 해당 스타일이 적용된 버튼으로 보인다.

 

<StButton
onClick={() => {
  const deletedtodos = todosStore.filter((item) => item.id !== todo.id);
  dispatch(deleteTodo(deletedtodos));
}}
style={{
  border: "2px solid red",
}}>
삭제
</StButton>

이렇게 그냥 버튼 태그처럼 사용할 수 있다.

 

그리고 컴포넌트이기 때문에 props와 children도 내려줄 수 있다.

const StButton = styled.button`
  cursor: pointer;
  padding: 10px 49px;
  margin: 0px 10px 0px 10px;
  background-color: ${(props) => props.backgroundColor}};
  border-radius: 10px;
`;

<StButton
onClick={() => {
  const deletedtodos = todosStore.filter((item) => item.id !== todo.id);
  dispatch(deleteTodo(deletedtodos));
}}
style={{
  border: "2px solid red",
}}
backgroundColor={backgroundColor}
>
삭제
</StButton>

이런 방식으로 전달 받은 props로 배경색을 설정해 줄 수 있다.

같은 모양의 버튼을 만들지만, 색상은 다를 때 이런 방식으로 색상이 다른 버튼을 만들 수 있다.

 

Modal창만들기

const [modal, setModal] = useState(false);

<button onClick={() => setModal(!modal)}>
open modal
</button>
{modal ? <Modal modal={modal} setModal={setModal} /> : null}

modal이라는 state를 만들어서 불리언 타입을 지정해준다.

그리고 버튼을 누를 때 modal의 상태가 true로 바뀌도록 함수를 작성해주고,

modal의 값에 따라 <Modal/>컴포넌트가 화면에 보이도록 js를 작성한다.