TodoList 만들기

react를 사용해서 개인적으로 하는 첫 프로젝트입니다.

react 공문서를 학습하고, 이해하기 힘들거나 정보가 마음에 안 들 때는 ChatGPT를 활용해서 학습했습니다.

그리고 글이 맥락이 없을 것입니다. 개발하면서 생각나는 대로 끄적이는 낙서장이니 가볍게 구경하고 가시면 될 것 같습니다. 감사합니다.

1. flexbox 같은 css 기능이 왜 적용이 안 되지?

react로 개발을 하면서 javascript를 사용하듯이 개발하면 여러 문제를 만나는 것 같습니다.

• css에서 직접 사용

/* YourComponent.css */
.flex-container {
  display: flex;
  /* 다양한 Flexbox 속성을 여기에 추가하세요 */
}

/* 각각의 Flex Item에 대한 스타일 */
.flex-item {
  flex: 1; /* 또는 다른 Flex 속성을 적용하세요 */
}

최신 브라우저에서 기본적으로 기능을 제공하기에 가능한 방법입니다.

• 라이브러리 사용 (styled-components)

// YourComponent.jsx
import React from 'react';
import styled from 'styled-components';

const FlexContainer = styled.div`
  display: flex;
  /* 다양한 Flexbox 속성을 여기에 추가하세요 */
`;

const FlexItem = styled.div`
  flex: 1; /* 또는 다른 Flex 속성을 적용하세요 */
`;

const YourComponent = () => {
  return (
    <FlexContainer>
      <FlexItem>내용 1</FlexItem>
      <FlexItem>내용 2</FlexItem>
    </FlexContainer>
  );
};

export default YourComponent;

저는 라이브러리를 사용하는 걸 선택했습니다. styled-components 라이브러리가 react 개발을 하면서 간단한 컴포넌트에 css를 적용할 때에도 많은 도움이 되기 때문에 프로젝트의 일관성을 위해서 css에 관한 문법을 통일했습니다.

* styled-components가 앞으로도 많이 사용될 것이라고 생각합니다.

 

문제 상황

컴포넌트의 텍스트가 여러 상태일 때 반응을 각각 다르게 적용시키려고 했을 때 만난 문제입니다.

const TodoText = styled.span`
  padding: 12px;
  text-decoration: ${(props) => (props.completed ? "line-through" : "none")};
  color: ${(props) => (props.isDarkMode ? "#333" : "#fff")};
  color: ${(props) => (props.completed ? "gray" : "black")};
`;
//isDarkMode의 값에 따른 color값의 변화와 Completed 값에 따른 color값의 변화
//두가지 상태에 따라 정상 작동해야하는 상황

 

여러 스타일 속성을 설정할 때는 styled-components에서 제공하는 css 헬퍼 함수를 사용하면 된다.

* css 헬퍼란?

styled-components 라이브러리에서 제공하는 css 헬퍼 함수는 동적인 스타일을 만들 때 사용됩니다. 이 헬퍼 함수를 사용하면 자바스크립트 표현식을 이용하여 스타일을 동적으로 변경할 수 있습니다. 여러 스타일 속성을 결합하거나, 조건에 따라 스타일을 동적으로 조절하는 데에 유용합니다.

즉, JS 탬플릿 리터럴을 사용해 해결하라는 것입니다.

 

해결 완료

const TodoText = styled.span`
  padding: 12px;
  text-decoration: ${(props) => (props.completed ? "line-through" : "none")};
  color: ${(props) => (props) =>
    props.isDarkMode ? "#fff" : props.completed ? "gray" : "#333"};
`;

<TodoText
	isDarkMode={isDarkMode}
	completed={completed}
>
	{textTodo}
</TodoText>

 

발생한 문제

styled-components에서 styled component에 전달된 props 중에서 HTML 요소에 해당하지 않는 (props로 전달되지 않는 isDarkMode와 같은 속성이 감지됐다.)는 경고 메시지를 만나서 해결하려고 합니다.

즉, 해당 속성은 브라우저에 직접 적용되지 않는데도 전달되고 있다는 뜻입니다.

 

Transient props

styled-components에서 styled component에만 전달되고 HTML에는 전달되지 않는 props를 생성할 수 있습니다. 이를 위해서는 '$' 접두사를 사용하면 됩니다.

결론은 프롭이 스타일시트에만 필요하고 DOM으로 프롭을 전달할 필요가 없다면 '$'명시적으로 붙여서 사용할 필요가 있다는 것입니다.

 

해결한 코드

const TodoText = styled.span`
...
`;

const Todo = ({ $completed, $isDarkMode, ... }) => {
  return (
    <TodoItem>
      <TodoText
        $isDarkMode={$isDarkMode}
        $completed={$completed}
      >
        {textTodo}
      </TodoText>
    </TodoItem>
  );
};

export default Todo;

 

Transient props 사용 시 주의사항

• 다른 곳에선 사용되지 않고 스타일드 컴포넌트에서만 사용합니다.라는 뜻
• 우리가 사용하는 스타일 태그 <MyStyledInput />을 구조적으로 보면 <input class="MyStyledInput" />과 같다.
• 동적으로 값을 전달하는 프롭에는 사용하면 문제가 발생할 수 있습니다.
• '$변수값'을 지정했기 때문에 프롭으로 받아오고 사용할 때에도 '$변수값'을 정확히 명시해야 한다.

To Be Continue......