2024.11.04

Q. 이름이 같은 컴포넌트를 동시에 import 하려면 어떻게 해야 하는지 적어보세요.

 

 

A. 이름이 같은 컴포넌트를 동시에 import해야 할 때는 별칭을 사용하여 구분할 수 있습니다. 예를 들어, Button이라는 이름을 가진 컴포넌트가 두 파일에 각각 있을 때, 다음과 같이 as 키워드를 사용하여 별칭을 붙여서 import합니다 :)

import { Button as PrimaryButton } from './PrimaryButton';
import { Button as SecondaryButton } from './SecondaryButton';

 

 

Q. 여러 컴포넌트를 하나의 파일에서 export하는 방법에 대해 적어보세요.

 

A1. named export

 

파일에서 여러 컴포넌트를 각각 export하고, 필요한 파일에서 개별적으로 import할 수 있습니다. 예를 들어 components.js 파일에서 다음과 같이 컴포넌트를 export할 수 있습니다.

 

// components.js
export const Header = () => <header>Header</header>;
export const Footer = () => <footer>Footer</footer>;
export const Sidebar = () => <aside>Sidebar</aside>;

// App.js
import { Header, Footer, Sidebar } from './components';

// 사용 예시
<Header />
<Footer />
<Sidebar />

 

 

A2.  Default Export

 

또는 파일 하단에서 개별 컴포넌트를 export한 후 한 번에 export할 수도 있습니다.

 

// components.js
const Header = () => <header>Header</header>;
const Footer = () => <footer>Footer</footer>;
const Sidebar = () => <aside>Sidebar</aside>;

export { Header, Footer, Sidebar };

// App.js
import { Header, Footer, Sidebar } from './components';

 

 

Q. React 로 페이지를 구현할 때, 폼 제출 시 e.preventDefault()를 사용하는 이유는 무엇 때문인지 작성해보세요. 또, 이때 폼 상태가 즉시 업데이트 되지 않는 이유는 무엇이며, 이를 해결하는 방법에 대해서도 작성해보세요.

 

A. React에서 폼을 구현할 때 e.preventDefault()를 사용하는 이유와 폼 상태가 즉시 업데이트되지 않는 이유, 그리고 이를 해결하는 방법은 다음과 같습니다.

1. e.preventDefault() 사용 이유

e.preventDefault()는 기본 이벤트의 동작을 막기 위해 사용됩니다. HTML의 <form> 요소는 기본적으로 폼 제출 시 페이지를 새로 고침(reload)하는데, React에서는 페이지 리로딩 없이 상태를 업데이트하며 동작하기 때문에 폼 제출 시 기본 동작을 막아야 합니다. e.preventDefault()를 사용하면 페이지 리로딩을 방지하고, JavaScript 코드로 폼 데이터를 다룰 수 있습니다.

const handleSubmit = (e) => {
    e.preventDefault();
    // 폼 데이터 처리 로직
};

2. 폼 상태가 즉시 업데이트되지 않는 이유

폼 상태가 즉시 업데이트되지 않는 이유는 React의 상태 업데이트가 비동기적으로 처리되기 때문입니다. React에서는 성능 최적화를 위해 여러 상태 업데이트를 한 번에 처리하려고 하기 때문에, 상태 업데이트가 즉각 반영되지 않고 다음 렌더링 사이클 이후에 반영될 수 있습니다.

 

const [inputValue, setInputValue] = useState('');

const handleChange = (e) => {
    setInputValue(e.target.value);  // 상태 업데이트 요청
    console.log(inputValue); // 이전 값이 출력됨 (비동기 처리로 인한 지연)
};

 

3. 해결 방법: 상태 업데이트 후 최신 값을 사용하기

상태 변경 직후 최신 상태 값을 확인하려면 React의 상태를 업데이트한 후에 반영될 최신 상태 값을 기반으로 코드를 작성해야 합니다.

• useEffect 사용: 상태 업데이트 후 특정 로직을 실행하려면 useEffect를 사용하여 상태 변경을 감지하고 최신 값을 활용할 수 있습니다.

const [inputValue, setInputValue] = useState('');

useEffect(() => {
    console.log(inputValue); // 상태가 변경된 이후의 값이 출력됨
}, [inputValue]);

• 함수형 업데이트 사용: 상태가 이전 상태에 따라 변경될 경우에는 함수형 업데이트를 사용하는 것이 좋습니다. 이렇게 하면 최신 상태 값을 정확히 반영할 수 있습니다.

 

setInputValue((prevValue) => {
    const newValue = prevValue + " updated";
    console.log(newValue);
    return newValue;
});