09 스터디 퀴즈 [Hook[docs 공부] 및 컴포넌트 스타일링]

[EYEG]

아래 코드에 대하여 useMemo, useCallback, styled-components의 각각 어떤 동작을 하는지 설명해보기

import React, { useState, useMemo, useCallback } from 'react';
import styled, { css } from 'styled-components';

const calculateThemeStyles = (theme) => {
  return {
    backgroundColor: theme === 'dark' ? '#333' : '#FFF',
  };
};

const StyledComponent = styled.div`
  padding: 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 40px;
  font-family:poppins;
  text-align:center;
  ${(props) =>
    props.inverted &&
    css`
      color: ${(props) => (props.theme === 'dark' ? '#ff0' : '#00f')};
    `}
`;

const ButtonContainer = styled.div`
  text-align: center;
  margin-top: 20px;
`;

function App() {
  const [theme, setTheme] = useState('light');
  const [inverted, setInverted] = useState(false);

  const themeStyles = useMemo(() => calculateThemeStyles(theme), [theme]);

  const handleChangeThemeClick = useCallback(() => {
    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
  }, []);

  const handleInvertClick = useCallback(() => {
    setInverted((prevInverted) => !prevInverted);
  }, []);

  return (
    <div>
      <StyledComponent style={themeStyles} inverted={inverted} theme={theme}>
        현재 테마는 {theme} 테마입니다.<br/>
        텍스트 색상 변환{inverted ? 'O' : 'X'}.
      </StyledComponent>
      <ButtonContainer>
        <button onClick={handleChangeThemeClick}>첫번째 버튼</button>
        <button onClick={handleInvertClick}>두번째 버튼</button>
      </ButtonContainer>
    </div>
  );
}

export default App;

[Kim-younggil]

Q1. useMemo의 장점을 서술하세요. (5점)

정답

   이미 메모리(RAM)에 저장된 코드를 다시 사용할 수 있다.  (메모리 낭비 X)

[seokhj]

emotion.js 를 통해 다음과 같이 미디어 쿼리를 설정했습니다.

import { css } from '@emotion/react'

const breakpoints = [576, 768, 992, 1200]

const mq = breakpoints.map(bp => `@media (min-width: ${bp}px)`)

render(
  <div>
    <div
      css={{
        color: 'green',
        [mq[0]]: {
          color: 'gray'
        },
        [mq[1]]: {
          color: 'hotpink'
        }
      }}
    >
      Some text!
    </div>
    <p
      css={css`
        color: green;
        ${mq[0]} {
          color: gray;
        }
        ${mq[1]} {
          color: hotpink;
        }
      `}
    >
      Some other text!
    </p>
  </div>
)

하지만, 코드길이를 축약할 수 있는 방법이 있는데 그것은 무엇일까요?

정답

* facepaint ```js import facepaint from 'facepaint' const breakpoints = [576, 768, 992, 1200] const mq = facepaint(breakpoints.map(bp => `@media (min-width: ${bp}px)`)) render(

Some text.

) ```

[ohr0226]

styled-components에서 스타일 코드 여러줄을 props에 따라 넣어주어야 할때는 css를 styled-components에서 불러와야 합니다. 사실 css를 사용하지 않고 문자열로 넣어도 됩니다. 하지만 이렇게 구현했을때의 문제점은 무엇일까용

${props => props.inverted && `color: white; border: 1px solid red;`}

[cheesepizza453]

아래는 styled-components를 사용하는 예시이다. 다음 중 불가능한 것은?

import styled from 'styled-components';
const MyComponent = styled.div`
    font-size: 2rem;
`;

const MyInput = styled('input')`
    background: gray;
`
const StyledLink = styled(Link)`
    color:blue;

[andrewylies]

facepaint는 ____ 에서만 동작합니다.

1. Styled Components
2. The css Prop
3. Object Styles
4. Global Styles

[ohr0226]

import React, { useReducer } from 'react';

const counterReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const initialState = { count: 0 };

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  const increment = () => dispatch({ type: 'INCREMENT' }); 
  const decrement = () => dispatch({ type: 'DECREMENT' }); 

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

1. useReducer를 사용할 때, dispatch 함수의 역할은? 1) 상태를 갱신하기 위해 액션을 전달하는 함수 2) 상태를 반환하는 함수 3) 이벤트 핸들러 4) 네트워크 요청을 보내는 함수

2. useReducer를 사용하여 상태를 갱신할 때, 어떤 형식의 객체를 dispatch 함수에 전달해야할까용 1) 숫자 2) 문자열 3) 불리언 4) 액션 객체

3. useReducer를 사용할 때, 리듀서 함수에서 반환하는 값은? 1) 새로운 상태 2) 이전 상태 3) 액션 객체 4) dispatch 함수