[TIL] 20230621 - styled components / 아토믹 디자인

styled components

css에서 자바스크립트를 사용할 수 있는 styled components

react 패키지 설치 후 사용 가능하다.

yarn add styled-components

사용방법

// App.jsx

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

// styled 키워드를 사용해서 styled-components 방식대로 컴포넌트 생성 
const Box = styled.div`  // styled.뒤에는 html의 태그를 넣는다
          // 빽틱안에 css코드를 넣는다. jsx 안에 바로 사용하던 객체스타일 말고. 원래 css코드와 동일
           width: 100px;
           height: 100px;
           margin: 20px;
`;

const App = () => {
          // JSX에서 html 태그를 사용하듯이 사용
          return <Box>박스</Box>;
};

export default App;

앞서 말했듯이 styled components는 js 변수와 함수 사용이 가능하다

CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점 이다

(if문, switch문 , 삼항연산자 등등 )

이를 사용해서 조건부 스타일링을 해줬다.

 

작은 프로젝트라 반복되는 컴포넌트가 버튼밖에 없는듯?했다 

const TodoBtn = styled.button`
    width: 48%;
    color: ${(props) => props.color};   // 부모컴포넌트에서 props 받아서 폰트컬러 적용
    margin-right: 2%;
    margin-top: 18px;
    height: 35px;
    border-radius: 5px;
    border: solid 1px #ddd;
    background-color: #fff;
    align-items: flex-end;
    transition: all 0.3s;
    &:last-child {
        margin-right: 0;
    }
    &:hover {
        background-color: ${(props) => props.color};
        color: #fff;
    }
`;

function App() {
    .
    .
    .
    return (
    	<Todo key={todo.id} id={todo.id}>
            {todo.id},{todo.isDone.toString()}
            <TodoTit>{todo.title}</TodoTit>
            <TodoPtag>{todo.contents}</TodoPtag>
            <TodoBtn color="red" onClick={() => delTodo(todo.id)}>
                삭제
            </TodoBtn>
            <TodoBtn color="rgb(13, 173, 198)" onClick={() => changeDone(todo.id)}>
                {todo.isDone ? '취소' : '완료'}
            </TodoBtn>
        </Todo>
		.
        .
        .
        <Todo key={todo.id} id={todo.id}>
            {todo.id},{todo.isDone.toString()}
            <TodoTit>{todo.title}</TodoTit>
            <TodoP>{todo.contents}</TodoP>
            <TodoBtn color="red" onClick={() => delTodo(todo.id)}>
                삭제
            </TodoBtn>
            <TodoBtn color="rgb(162, 162, 162)" onClick={() => changeDone(todo.id)}>
                {todo.isDone ? '취소' : '완료'}
            </TodoBtn>
        </Todo>
    );
}

todo list에서 

해야할일 목록에는 삭제/완료 버튼이 뜨고

완료할일 목록에는 삭제/취소 버튼이 뜬다

버튼의 기본 스타일링은 하나의 컴포넌트로 주고

App.jsx에 TodoBtn(부모) 컴포넌트에서 컬러값을 알려준다!

그럼 각각 부모 컴포넌트의 컬러를 받아 잘 적용된다~ ㅎㅎㅎ

 

그렇게 계속 컴포넌트를 만들다가....

스타일 컴포넌트는 어디까지?해야하고 어디까지 나눠야 하나 해서

동료분들과 튜터님께 방문 ㅎㅎㅎㅎ

아토믹 디자인에 관해서 말씀해 주셨다

 

일단... 하하 ...첨엔 머리가 새하얘지고 ㅎㅎㅎㅎㅎ

차차 설명을 들어보니 나중에 큰프로젝트에선 정말 이렇게 사용해야 효율적이구나 싶었다!

 

Atomic Design

출처 https://atomicdesign.bradfrost.com/chapter-2/#the-part-and-the-whole

Atom

• atom은 더 이상 분해할 수 없는 기본 컴포넌트

Molecule

• molecule은 여러 개의 atom을 결합하여 자신의 고유한 특성을 가진다.

Organism

• organism은 앞 단계보다 좀 더 복잡하고 서비스에서 표현될 수 있는 명확한 영역과 특정 컨텍스트를 가진다

Template

• 템플릿은 page를 만들 수 있도록 여러 개의 organism, molecule로 구성할 수 있다

Page

• page는 유저가 볼 수 있는 실제 콘텐츠

 

출처 https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/

꼼꼼히 더 보기 :)

 

---

 

오전에는 문제풀다가 디버깅이안되서.. 갑자기 거기에 꽃혀가지고 계속 시간 까먹다가ㅠㅠ

튜터님께 가니 바로 해결 ... ㅎㅎㅎㅎㅎㅎ

혼자 뻘짓하지말고 모르면 튜터님에게 가기!

 

오후에는 개인 과제를 진행.

다시 처음부터 만들어보는데 왜 분명 되었던것이 안되는것인가? 

결국 돌아가기는 하지만 ㅎㅎ 역시 아직 연습이 많이 필요하당