Today 요약

1. tailwind 공부
2. 리액트 공부

1. What I Learned?

tailwind 공부

preflight

tailwind 에는 기본적인 reset 스타일링이 적용되어 있다. 이 부분을 Preflight라고 한다. 그렇기 때문에 h1 태그 사용시 기본적인 동작이 안될 수도 있기 때문에 이 경우에는 preflight 옵션을 false로 해주어야 한다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  corePlugins: {
    preflight: false
  },
  plugins: []
}

리액트 공부

useReducer

비즈니스 로직과 UI로직을 분리하기 위해서 useReducer가 유용하게 활용될 수 있다. 간단한 상태를 처리할 때는 useState가 물론 쉽겠지만, 그렇지 않은 복잡한 객체의 상태를 관리할 때는 useReducer가 유용하게 활용될 수 있다. useReducer는 상태를 변경하기 위해서 dispatcher가 필요하다 반드시 dispatcher를 통해서만 상태를 변경할 수 있고, dispatcher는 action 객체를 reducer 함수로 전달해서 action의 타입에 맞는 동작을 수행할 수 있다. 따라서 컴포넌트 외부에 비즈니스 로직을 두어서 관리할 수 있고, 컴포넌트 내부에서는 상태 값으로 활용해서 구현한다.

기본적인 사용방법은 아래와 같다.

import { useReducer } from 'react';

function reducer(state, action) {
  // ...
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { age: 42 });
  // ...