리액트

프론트 면접

use디바운스,debounce가 너무 중요하다!!
훅들에 대해서 프론트엔드 기술 면접을 물어본다!! 어떻게 동작이 되는지 알아두기

아침정리

useState

useState는 컴포넌트의 상태(state)를 관리하는 훅입니다. 상태는 컴포넌트의 값이나 UI를 동적으로 변경할 때 사용됩니다.

import React, { useState } from 'react';

function Counter() {
  // count는 상태 값, setCount는 상태를 업데이트하는 함수
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useState(0)은 count의 초기값을 0으로 설정하고, setCount 함수로 count 값을 변경할 수 있습니다.
버튼을 클릭하면 상태가 증가하고, 컴포넌트가 다시 렌더링됩니다.

useRef

useRef는 DOM 요소에 접근하거나 렌더링 간 유지해야 하는 값을 저장하는 데 사용됩니다. 렌더링과 상관없이 유지되는 값을 저장하며, 렌더링을 트리거하지 않습니다.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onFocusClick = () => {
    // input 요소에 직접 접근해 포커스를 줌
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onFocusClick}>Focus the input</button>
    </div>
  );
}

useRef를 통해 inputEl.current로 DOM 요소에 접근할 수 있습니다.
onFocusClick을 통해 버튼을 클릭하면 입력 필드에 포커스를 줍니다.

useContext

useContext는 React의 Context API에서 전역 상태나 데이터를 소비할 때 사용합니다. Context를 통해 컴포넌트 트리에서 값을 props로 전달하지 않고 사용할 수 있습니다.

import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext(null);

function App() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

function Profile() {
  const user = useContext(UserContext);

  return <div>{`Hello, ${user.name}!`}</div>;
}

UserContext.Provider에서 user 데이터를 하위 컴포넌트에 전달하고, Profile 컴포넌트에서 useContext(UserContext)를 사용해 user 값을 가져옵니다.

useEffect

useEffect는 컴포넌트가 렌더링되거나 업데이트될 때 부수 효과를 처리하기 위해 사용됩니다. 예를 들어, 데이터 패칭, 이벤트 리스너 등록/제거, 타이머 설정 등을 처리할 때 유용합니다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 타이머를 정리함
    return () => clearInterval(timer);
  }, []);

  return <div>{count}</div>;
}

useEffect는 컴포넌트가 렌더링될 때 타이머를 시작하고, 컴포넌트가 언마운트되면 타이머를 정리합니다.
타이머는 1초마다 count 값을 증가시킵니다.

useLayoutEffect

useLayoutEffect는 DOM이 업데이트된 후 바로 실행되며, 화면에 그려지기 전에 동기적으로 실행됩니다. DOM 조작이 필요할 때 사용됩니다.

import React, { useState, useLayoutEffect, useRef } from 'react';

function LayoutEffectExample() {
  const [size, setSize] = useState(0);
  const divRef = useRef(null);

  useLayoutEffect(() => {
    // div의 너비를 가져와서 상태로 저장
    if (divRef.current) {
      setSize(divRef.current.offsetWidth);
    }
  });

  return (
    <div>
      <div ref={divRef} style= />
      <p>Div width: {size}px</p>
    </div>
  );
}

useLayoutEffect는 DOM이 업데이트된 후 동기적으로 실행되며, div의 크기를 계산해 size 상태로 저장합니다.

useCallback

useCallback은 특정 함수의 재생성을 방지하는 훅입니다. 컴포넌트가 렌더링될 때마다 불필요하게 함수가 다시 생성되는 것을 막고, 성능 최적화에 도움을 줍니다.

import React, { useState, useCallback } from 'react';

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

  const increment = useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

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

useCallback을 사용해 increment 함수가 재생성되지 않도록 설정했습니다. 이는 컴포넌트가 불필요하게 렌더링되지 않도록 방지합니다.

useMemo

useMemo는 특정 값의 재계산을 방지하고, 메모이제이션을 통해 성능 최적화를 수행합니다. 컴포넌트가 렌더링될 때마다 값이 다시 계산되지 않도록 제어할 수 있습니다.

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation(num) {
  console.log('Expensive calculation...');
  return num * 2;
}

function Calculator() {
  const [number, setNumber] = useState(0);
  const [text, setText] = useState('');

  const doubledNumber = useMemo(() => ExpensiveCalculation(number), [number]);

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="Type something" />
      <button onClick={() => setNumber(number + 1)}>Increment Number</button>
      <p>Doubled Number: {doubledNumber}</p>
    </div>
  );
}

useMemo를 사용해 ExpensiveCalculation 함수가 number 값이 변경될 때만 다시 실행되도록 합니다. 이를 통해 불필요한 재계산을 방지합니다.

alt text

테일윈드

$ yarn add tailwind-merge

https://www.npmjs.com/package/tailwind-merge

clsx

yarn add clsx

라우팅

yarn add react-router-dom
yarn add -D @types/react-router-dom

BBZJUN's

Contact

리액트