[TIL] 20230622 - React Styled Components로 React 스타일 컴포넌트 만들기(가변스타일링) / 데이터 비교(일치 연산자)

 React Styled Components  

CSS-in-JS 라이브러리 Styled Components를 사용해서 컴포넌트 만들기

CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법

기본사용 방법을 다룬글도 있긴한데

https://newheee.tistory.com/41

오늘은 props에 따라 다른 스타일 적용이 가능한 가변 스타일링에 대해 공부한 내용을 기록하려한다

 

const StButton = styled.button`
    align-items: center;
    background-color: ${(props) => props.bgColor || '#fff'};
    border: ${(props) => props.stBorder || 'none'};
    color: ${(props) => props.fontColor || 'black'};
    border-radius: 8px;
    padding: 12px 0;
`;

위 코드 처럼 버튼의 글자색과 배경색을 props따라 바뀌도록 위에서 작성이 가능하다.

자바스크립트의 || 연산자를 사용하여 props이 넘어오지 않은 경우, 값이 존재하지 않거나 falsy한 값일 경우는 기존에 정의한 기본 색상이 그대로 유지되고 색상을 넘겨주면 각각 다른 색상을 가질 수 있다

 

 

뿐만 아니라 switch 문으로 어떠한 케이스에 해당할 경우를 각각 지정해 줄 수도 있다!

이렇게 사용하면 컴포넌트 파일에 버튼스타일, 메뉴스타일 등등 모아두고 재활용하기 매우 좋겠다! 

const StButton = styled.button`
    align-items: center;
    background-color: ${(props) => props.bgColor || '#fff'};
    border: ${(props) => props.stBorder || 'none'};
    color: ${(props) => props.fontColor || 'black'};
    border-radius: 8px;
    padding: 12px 0;

    ${({ btnSize }) => {
        let btnHeight;
        let btnWidth;
        switch (btnSize) {
            case 'large':
                btnWidth = '200px';
                btnHeight = '50px';
                break;

            case 'small':
                btnWidth = '100px';
                btnHeight = '40px';
                break;

            default:
                btnWidth = '130px';
                btnHeight = '45px';
                break;
        }
        return `width : ${btnWidth};
                height : ${btnHeight}`;
    }};
`;

 

참고 https://www.daleseo.com/react-styled-components/

---

그리고 오늘 시간을 잡아먹었던 어이없눈 에러 ㅎㅎㅎㅎ

늘 그렇긴 하지만 ... ^^

 

 

 

새로 생성해서 등록한 Todo list는 상세페이지가 잘뜨는데

기존 state로 등록해둔 더미데이터는 params를 잘 가져와서 아이디도 잘뜨는데

상세페이지가 아무것도 안뜨는것!

 

function Detail() {
    const todos = useSelector((state) => state.todos.todolists);
    const params = useParams();
    console.log('todos=>', todos);
    console.log('params=>', params);
    return (
        <div>
            {todos
                .filter((item) => {
                    return item.id === params.id;
                })
                .map((item) => {
                    return (
                        <DetailWrap key={item.id}>
                            <div>ID {item.id}</div>
                            <TodoTit>제목 {item.title}</TodoTit>
                            <p>내용 {item.contents}</p>
                            <div>진행상태 {item.isDone ? '완료' : '미완료'}</div>

                            <Link to="/" style={linkStyle}>
                                이전
                            </Link>
                        </DetailWrap>
                    );
                })}
        </div>
    );
}

이는 아이디 값을 비교했을때 일치(===)연산자를 사용해서...!!!!!!!

기존 등록해둔 더미데이터 아이디는 숫자, params로 가져오는 타입은 문자형!

그래서 일치하는 데이터가 없었던 것 ㅎㅎㅎㅎ

강의내용에도 똑같이 있는내용이었는데.... 실수 ^^

 

이럴땐 숫자 형태 아이디일 경우는 params를 숫자형으로 (+prams.id) 또는 parseInte(params.id)이런식으로 숫자로 바꿔줘도 된다.

그러나 나는 아이디 생성을 REACT UUID를 사용했기때문에 문자열로 생성되니까

더미데이터 자체 아이디들은 전부 UUID로 변경해 주었당

 

{
    id: 1,
    title: '제목입니다1',
    contents: '내용을 입력해 주세요1',
    isDone: false
},
{
    id: 2,
    title: '제목입니다2',
    contents: '내용을 입력해 주세요2',
    isDone: true
},


===========>


{
    id: uuid(),
    title: '제목입니다1',
    contents: '내용을 입력해 주세요1',
    isDone: false
},
{
    id: uuid(),
    title: '제목입니다2',
    contents: '내용을 입력해 주세요2',
    isDone: true
},

문제없이 잘 나옴 ㅎㅎㅎㅎㅎ