[코드숨 리액트 13기] 8주차 과제 피드백

박세진·2023년 6월 23일

8주차에는 스타일 라이브러리인 Emotion과 Redux Toolkit을 적용하는 것을 배웠다. 그리고 8주차 과제에는 배운 것을 적용하여 홈페이지를 예쁘게 스타일링하는 것이었다.

CSS-in-JS

Emotion

Emotion은 Javascript로 css 스타일을 작성하기 위한 라이브러리이다. Emotion을 사용하는 두가지 주된 방법이 있다. 첫번째는 프레임워크에 구애받지 않고 사용하는 것이고, 두번째는 리액트에 사용하는 것이다. (두가지 설치 방법이 다르다)

import styled from '@emotion/styled';

const MenuList = styled.ul({
  display: 'flex',
  margin: 0,
  padding: '.4em 0',
  listStyle: 'none',
});

// props를 받아서 사용할 수 있음
const MenuItem = styled.li(({ active }) => ({
  marginRight: '1em',
  '& button': {
    color: '#333',
    padding: '.4em 1em',
    border: '1px solid #ccc',
    backgroundColor: active ? '#eee' : 'transparent',
    textDecoration: 'none',
    cursor: 'pointer',
    '&:hover': {
      fontWeight: 'bold',
      color: '#000',
    },
  },
}));

export default function RegionsContainer() {
  const dispatch = useDispatch();

  const regions = useSelector(get('regions'));
  const selectedRegion = useSelector(get('selectedRegion'));

  function handleClick(regionId) {
    dispatch(selectRegion(regionId));
    dispatch(loadRestaurants());
  }

  return (
    <MenuList>
      {regions.map((region) => (
        <MenuItem
          key={region.id}
          active={selectedRegion && region.id === selectedRegion.id}
        >
          <button type="button" onClick={() => handleClick(region.id)}>
            {region.name}
            {selectedRegion
              ? region.id === selectedRegion.id
                ? '(V)'
                : null
              : null}
          </button>
        </MenuItem>
      ))}
    </MenuList>
  );
}

Redux Toolkit

ducks pattern : redux를 사용할 때, action과 reducer를 하나의 파일에서 사용하는 패턴이다. redux-toolkit은 slice.js 파일에 이것들을 모아둔다.

import { configureStore } from '@reduxjs/toolkit';

import reducer from './slice';

const store = configureStore({ reducer });

export default store;

import { configureStore } from '@reduxjs/toolkit'
import usersReducer from './usersReducer'
import postsReducer from './postsReducer'

const store = configureStore({
  reducer: {
    users: usersReducer,
    posts: postsReducer,
  },
})

export default store

과제

폴더 분리

📁src
 ㅏApp.jsx
 ㅏApp.test.jsx
 ㅏindex.js
 ㅏreducer.js
 ㅏreducer.test.js
 ㅏstore.js
 ㅏutils.js
 ㅏutils.test.js
 ㅏ📁components
    ㅏ📁Categories
        ㅏCategoriesContainer.jsx
        ㅏCategoriesContainer.test.jsx
    ㅏ📁MenuItems
        ㅏMenuItems.jsx 
        ㅏMenuItems.test.jsx
    ㅏ📁Regions
        ㅏRegionsContainer.jsx
        ㅏRegionsContainer.test.jsx
    ㅏ📁ReviewForm
        ㅏReviewForm.jsx
        ㅏReviewForm.test.jsx
    ㅏ📁Reviews
        ㅏReviews.jsx
        ㅏReviews.test.jsx
    ㅏ📁TextField
        ㅏTextField.jsx
        ㅏTextField.test.jsx
 ㅏ📁pages
    ㅏ📁AboutPage
        ㅏAboutPage.jsx
        ㅏAboutPage.test.jsx
    ㅏ📁HomePage
        ㅏHomePage.jsx
        ㅏHomePage.test.jsx
    ㅏ📁LoginPage
        ㅏLoginForm.jsx
        ㅏLoginForm.test.jsx
        ㅏLoginFormContainer.jsx
        ㅏLoginFormContainer.test.jsx
        ㅏLoginPage.jsx
        ㅏLoginPage.test.jsx
        ㅏLogoutForm.jsx
        ㅏLogoutForm.test.jsx
    ㅏ📁NotFoundPage
        ㅏNotFoundPage.jsx
        ㅏNotFoundPage.test.jsx
    ㅏ📁RestaurantPage
        ㅏRestaurantContainer.jsx
        ㅏRestaurantContainer.test.jsx
        ㅏRestaurantDetail.jsx
        ㅏRestaurantDetail.test.jsx
        ㅏRestaurantPage.jsx
        ㅏRestaurantPage.test.jsx
    ㅏ📁RestaurantsPage
        ㅏRestaurantsContainer.jsx
        ㅏRestaurantsContainer.test.jsx
        ㅏRestaurantsPage.jsx
        ㅏRestaurantsPage.test.jsx
 ㅏ📁services
 ㅏ📁slice
    ㅏloginSlice.js
    ㅏslice.js

관심사별로 폴더 분리를 하는 게 처음이라서 많이 어려웠다.