TIL #31 React 숙련주차 개인과제-3

DO YEON KIM·2024년 5월 29일

React TIL 내일배움캠프 부트캠프 스파르타코딩클럽

부트캠프

목록 보기

31/72

하루 하나씩 작성하는 TIL #31

드디어 오늘 개인 과제를 제출 했고,, 겉핥기만 해봤던 리액트 숙련 주차 과제로 인해 정말 ,, 사람 기절할 뻔 했다

이번 til은 과제에서 체크하고 넘어가야 했던 요소들에 대해 작성해보겠다.

✅ 체크리스트

- inline 방법이 아닌, 리액트 컴포넌트를 스타일링 할 수 있는 방법을 2개 이상 설명해주세요.

Styled-Components

CSS-in-JS 라이브러리로, 컴포넌트 기반으로 스타일을 정의합니다. 예를 들어, styled-components를 사용하여 버튼을 스타일링할 수 있습니다.

import styled from 'styled-components';

const StyledButton = styled.button`
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
`;

CSS Modules

CSS 파일을 모듈화하여 각 컴포넌트에 독립적인 스타일을 적용할 수 있습니다. 파일 이름에 .module.css를 붙여 사용합니다.

// Button.module.css
.button {
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 5px;
}

// Button.jsx
import styles from './Button.module.css';

const Button = () => {
 return <button className={styles.button}>Click me</button>;
};

- 조건부 스타일링은 언제 사용해야 하고, styled-components에서는 어떻게 사용할 수 있는지 설명해주세요.

UI 요소의 상태에 따라 스타일을 동적으로 변경해야 할 때 사용합니다. 예를 들어, 버튼의 활성화 상태나 입력 필드의 유효성 검사 결과에 따라 스타일을 다르게 적용할 수 있습니다.

- React hook의 다음 종류에 대해 용도와 사용 방법에 대해 설명해주세요.

- useState

상태 변수를 선언하고 초기값을 설정합니다. 상태를 변경할 수 있는 함수도 반환합니다.

const [count, setCount] = useState(0);

- useEffect

사이드 이펙트를 수행합니다. 컴포넌트가 마운트, 업데이트, 언마운트될 때 동작하는 로직을 정의할 수 있습니다.

useEffect(() => {
  // 컴포넌트가 마운트될 때 실행
  console.log('Component mounted');
  return () => {
    // 컴포넌트가 언마운트될 때 실행
    console.log('Component unmounted');
  };
}, []);

- useRef

DOM 요소나 컴포넌트의 인스턴스에 접근할 수 있습니다. 또한, 상태가 변경되어도 리렌더링되지 않는 변수를 선언할 수 있습니다.

const inputRef = useRef(null);
const focusInput = () => {
 inputRef.current.focus();
};

- useContext

Context API를 통해 전역 상태를 공유할 수 있습니다.

const MyContext = React.createContext();

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

- memoization이란 무엇이며, 왜 사용해야만 하는지 설명해주세요. 만일 사용하지 않는다면 어떤 이슈가 발생할 수 있을지도 말씀해주세요.

동일한 계산을 반복하지 않도록, 계산 결과를 캐싱하는 기법

성능 최적화를 위해 사용. 불필요한 재계산을 방지하여 렌더링 성능을 개선할 수 있습니다.

미사용시 불필요한 재계산과 렌더링으로 인해 성능이 저하될 수 있음

- React 컴포넌트 라이프사이클에 대해 설명하고, mount, update, unmount 과정에서 각 라이프사이클 메서드가 어떻게 동작하는지 설명해주세요.

마운트: 컴포넌트가 DOM에 삽입될 때 실행됩니다.
constructor: 컴포넌트 초기화
componentDidMount: 컴포넌트가 마운트된 직후 실행
업데이트: 컴포넌트의 상태나 props가 변경될 때 실행됩니다.
componentDidUpdate: 업데이트 후 실행
언마운트: 컴포넌트가 DOM에서 제거될 때 실행됩니다.
componentWillUnmount: 언마운트 직전에 실행

- Virtual DOM이 무엇인지 설명하고, 이가 실제 DOM과 어떻게 다른지, 그리고 왜 필요한지 설명해주세요.

정의: 실제 DOM을 조작하기 전에 메모리 상에서 가상의 DOM 트리를 구성하여 변경 사항을 적용하는 방식입니다.

차이점: Virtual DOM은 가볍고 빠르며, 변경 사항을 실제 DOM에 한 번에 반영하여 성능을 최적화합니다.

필요성: 실제 DOM 조작은 비용이 많이 들기 때문에, 변경 사항을 최소화하여 성능을 개선합니다.

-전역상태 관리의 필요성에 대해 설명하고, Redux를 사용하여 전역상태를 관리하는 방법에 대해 예시를 들어 설명해주세요.

여러 컴포넌트에서 공유되는 상태를 효율적으로 관리하기 위해 필요

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

const expensesSlice = createSlice({
  name: 'expenses',
  initialState: [],
  reducers: {
    addExpense: (state, action) => {
      state.push(action.payload);
    },
    deleteExpense: (state, action) => {
      return state.filter(expense => expense.id !== action.payload);
    },
  },
});

export const { addExpense, deleteExpense } = expensesSlice.actions;

const store = configureStore({
  reducer: {
    expenses: expensesSlice.reducer,
  },
});

- React Router를 사용하여 SPA(Single Page Application)에서 라우팅을 어떻게 구현해야 하는지 설명해주세요.

React Router는 SPA에서 여러 페이지를 구현할 수 있게 해줍니다. URL 경로에 따라 다른 컴포넌트를 렌더링합니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => (
 <Router>
   <Switch>
     <Route path="/" exact component={Home} />
     <Route path="/detail/:id" component={Detail} />
   </Switch>
 </Router>
);