Original article: 10 React Interview Questions You Should Know in 2022
리액트 지식에 자신이 있으신가요? 한번 시험해 보세요!
면접을 보는 상황이든 아니든 2022년에 리액트 개발자로서 알아야 할 10가지 주요 질문들을 준비했습니다.
이 질문들은 리액트의 핵심 개념부터 특정 기능을 언제 사용해야 하는지에 대한 실질적인 이해까지 모두 포함합니다.
이 가이드를 통해 최상의 결과를 얻으시려면 정답을 보기 전에 꼭 먼저 모든 질문에 스스로 답해보세요.
그럼 시작해 봅시다!
1. 리액트는 무엇이고 언제 사용합니까?
리액트는 라이브러리이지 프레임워크가 아닙니다.
리액트는 자바스크립트의 모든 기능을 제공합니다. 또한 리액트의 기본 특징들은 우리가 애플리케이션을 만들거나 그것에 대해 생각하는 방식을 향상시켜줍니다.
- JSX 와 같은 도구로 유저 인터페이스를 쉽게 만드는 방법을 제공합니다.
- 정적인 HTML이 할 수 없는 유저 인터페이스 공유를 쉽게 만들어 주는 컴포넌트를 제공합니다.
- 리액트 훅을 사용하여 컴포넌트들 사이에 재사용 가능한 동작을 만들 수 있습니다.
- 리액트는 직접 DOM을 건드리지 않고 데이터가 바뀔 때 UI를 업데이트합니다.
보너스 팁: 리액트에는 Next.js나 Gaysby처럼 애플리케이션을 만들 때 필요한 모든 기능을 제공하는 프레임워크들이 있습니다.
리액트는 특히 싱글 페이지 애플리케이션(SPA)을 위해 만들어졌습니다. 하지만 정적인 사이트부터 모바일 애플리케이션까지 모든 것을 똑같은 리액트 방식으로 만들 수 있습니다.
2. JSX는 무엇입니까?
JSX는 HTML의 간단한 문법을 사용하지만 기능과 자바스크립트의 동적 요소 가 더해진 유저 인터페이스를 만드는 방법 중 하나입니다.
짧게 말해, 리액트 애플리케이션을 조직하는 HTML + Javascript입니다.
JSX는 HTML처럼 보이지만 사실은 자바스크립트 함수 호출입니다.
JSX 안에서 div를 사용하는 것은React.createElement()를 호출하는 것과 동일합니다.
직접 React.createElement()를 호출해 유저 인터페이스를 만들 수 있지만 요소들을 계속 더할수록 만들어놓은 구조를 읽는 게 계속해서 어려워집니다.
웹 브라우저는 JSX를 이해할 수 없습니다. 그래서 보통 Babel이라고 불리는 컴파일러를 사용합니다. Babel은 HTML처럼 보이는 것을 자바스크립트 함수 호출로 변환하여 브라우저가 이해할 수 있게 만들어 줍니다.
3. 리액트 컴포넌트에 어떻게 데이터를 전달합니까?
리액트 컴포넌트에 데이터를 전달하는 방법은 크게 두 가지가 있습니다.
- Props
- Context API
Props는 가까이에 있는 컴포넌트의 부모로부터 전달되는 데이터입니다. Props는 자식 컴포넌트에 선언되며 아무 이름과 유효한 값을 받을 수 있습니다.
function Blog() {
const post = { title: "My Blog Post!" };
return <BlogPost post={post} />;
}
Props는 자식 컴포넌트에서 사용되고 자식 객체의 프로퍼티로 사용 가능합니다.
function BlogPost(props) {
return <h1>{props.post.title}</h1>
}
Props는 순전한 객체의 프로퍼티이기 때문에 더 쉬운 접근을 위해 디스트럭팅 (destructing) 될 수 있습니다.
function BlogPost({ post }) {
return <h1>{post.title}</h1>
}
Context는 context provider에서 전달되는 데이터이며 context를 사용하는 컴포넌트에서 사용됩니다.
Context를 사용하면 Props 없이 애플리케이션 내 어디서나 데이터에 접근할 수 있습니다. (context provider 가 전체 컨포넌트 트리를 감쌀 경우)
Context 데이터는 Context.Provider를 이용해 value prop 을 통해 전달되며 이 데이터들은 Context.Consumer 또는 useContext 훅 (hook) 을 이용해 사용됩니다.
import { createContext, useContext } from 'react';
const PostContext = createContext()
function App() {
const post = { title: "My Blog Post!" };
return (
<PostContext.Provider value={post}>
<Blog />
</PostContext.Provider>
);
}
function Blog() {
return <BlogPost />
}
function BlogPost() {
const post = useContext(PostContext)
return <h1>{post.title}</h1>
}
4. porps 와 state의 차이는 무엇입니까?
State는 리액트 컴포넌트 안에서 읽고 업데이트 가능한 값입니다.
Props는 리액트 컴포넌트에 전달되는 읽기만 가능한 값입니다.
(Props는 업데이트 되면 안 됩니다.)
props는 컴포넌트 밖에 존재하는 함수의 인자로 생각할 수 있습니다. 반면에 state는 계속해서 바뀌는 값이며 컴포넌트 안에 존재하고 선언됩니다.
State 와 porps는 변경사항으로 인해 존재하는 컴포넌트가 다시 렌더링 된다는 점에서 유사합니다.
5. 리액트 fragment는 왜 사용합니까?
fragment는 리액트에 있는 특별한 특징입니다. fragment를 사용하면 DOM에서 노드 (node) 없이 자식 요소나 자식 컴포넌트 그룹을 만들 수 있습니다.
fragment 문법은 빈 태그 <></>처럼 생겼거나 React.Fragment로 사용됩니다.
간단히 말하면, 때로는 여러 리액트 요소들을 한 부모 요소에 넣어야 하지만 div와 같은 일반적인 HTML 요소를 사용하고 싶지 않을 때입니다.
테이블을 만든다고 가정해 보면 아래는 올바르지 않은 HTML입니다.
function Table() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
function Columns() {
return (
<div>
<td>Column 1</td>
<td>Column 2</td>
</div>
);
}
Columns 컴포넌트 안에서 div 요소 대신 fragment를 사용하면 이 문제를 해결할 수 있습니다.
function Columns() {
return (
<>
<td>Column 1</td>
<td>Column 2</td>
</>
);
}
fragment를 사용하는 또 다른 이유는 HTML 요소를 추가할 때 CSS 스타일이 적용되는 방법이 바뀔 수 있기 때문입니다.
6. 리액트 리스트 (list)에 왜 key를 사용해야 합니까?
Key는 고유한 값입니다. .map() 함수를 사용하여 요소나 컴포넌트를 루프 (loop) 할 때 반드시 key prop 을 전달해야 합니다.
요소를 매핑하는 경우 아래와 같을 겁니다.
posts.map(post => <li key={post.id}>{post.title}</li>)
컴포넌트를 맵핑하는 경우
posts.map(post => <li key={post.id}>{post.title}</li>)
둘 다의 경우 고유한 값인 key를 추가해야 합니다. 아니면 리액트가 경고 메시지를 보냅니다.
왜 그럴까요? key는 요소나 컴포넌트가 어느 리스트 (list)에 있는지 정의하기 때문입니다.
key를 사용하지 않을 경우 리스트에 있는 아이템을 어떤 방법으로 추가하거나 수정해서 바꾸려고 할 때 리액트가 바뀌어야 하는 순서를 알 수 없습니다.
리액트는 모든 DOM 비즈니스 업데이트를 책임지지만 (가상 DOM 사용) 이를 제대로 업데이트하려면 key 가 필요합니다.
7. ref는 무엇이고 어떻게 사용해야 합니까?
리액트에서 ref는 DOM 요소의 참조입니다.
Ref는 useRef 훅 (hook) 을 이용해 생성되며 바로 변수에 담을 수 있습니다.
그리고 이 변수는 리액트 요소 (컴포넌트 아님)에 근본적인 HTML 요소 (div, span 등등)의 참조를 얻기 위해 전달됩니다.
참조된 요소와 프로퍼티는 ref의 .current 프로퍼티를 통해 사용 가능합니다.
import { useRef } from 'react'
function MyComponent() {
const ref = useRef();
useEffect(() => {
console.log(ref.current) // div 의 참조
}, [])
return <div ref={ref} />
}
Ref는 가끔 "escape hatch (피난용 비상구)"라고 불리고 DOM 요소와 직접적으로 사용됩니다 그리고 리액트를 통해 할 수 없는 특정 연산 (input 태그를 포커스 하거나 클리어 등) 을 가능하게 해줍니다.
8. useEffect는 왜 사용합니까?
리액트 컴포넌트에서 useEffect 훅 (hook) 은 사이드 이펙트 (side effect)를 위해 사용됩니다.
사이든 이펙트 (side effect) 는 "바깥세상 (outside world)" 나 리액트 context 밖에 존재하는 것을 담당하는 연산입니다.
사이트 이펙트 (side effect)의 예로는 외부 API 포인트로 GET이나 POST 요청을 보내거나 브라우저 API window.navigator 또는 document.getElementById()를 사용하는 것입니다.
리액트 컴포넌트 바디안에서 바로 저 연산들을 할 수 없습니다. useEffect는 사이드 이펙트 (side effect)를 수행할 수 있는 함수와 dependency 배열을 제공합니다. dependency 배열에는 함수가 의존하는 값들이 들어갑니다.
만약 dependency 배열의 값이 바뀌면 이펙트 (effect) 함수는 다시 호출됩니다.
9. 리액트 Context 나 Redux는 언제 사용합니까?
Redux는 아마 리액트에서 가장 널리 사용되는 서드파티 (third party) global state 라이브러리 일 것입니다. 그러나 이 질문의 경우 "Redux"라는 단어를 다른 global state 라이브러리로 바꿀 수 있습니다.
리액트 Context는 Prop 을 활용하지 않고 애플리케이션 내에서 데이터를 사용할 수 있습니다.
리액트 Context는 데이터가 필요하지 않는 컴포넌트를 통해 데이터를 전달할 때 생기는 **"프롭 드릴링 (props drilling)"**이라는 문제를 예방합니다.
대신 Context를 이용하면 데이터를 필요로 하는 컴포넌트에 정확히 사용할 수 있습니다.
Context를 사용하면 데이터를 데이터를 가져오거나 읽기만 할 뿐이지만 Redux 나 다른 서드파티 (third party) state library는 읽기와 업데이트가 가능합니다.
State 업데이트 용으로 만들어지지 않았기 때문에 Context는 Redux 와 같은 서드파티 라이브러리 대체재가 아닙니다 그 이유는 Context를 통해 사용되는 데이터가 업데이트될 때마다 모든 자식 컴포넌트는 다시 렌더링 되고 퍼포먼스에 큰 영향을 끼치기 때문입니다.
10. useCallback 과 useMemo는 왜 사용합니까?
useCallback 과 useMemo는 컴포넌트 퍼포먼스를 향상시키기 위해 사용됩니다.
useCallback 은 매 렌더링마다 컴포넌트 바디안에서 선언된 함수가 재생성되는 것을 예방합니다.
이것은 불필요한 퍼포먼스 문제를 야기할 수 있습니다. 특히 자식 컴포넌트에 전달되는 콜백 (callback) 함수들입니다.
반면에 useMemo는 무거운 연산 작업을 기업합니다.
메모이제이션 (memoization)은 인자가 변경되지 않는 경우 계산한 과거 값을 기억할 수 있는 함수의 기술적 용어입니다. 만약 인자가 그대로라면 함수는 기억된 값을 반환합니다.
다른 말로 하면 많은 계산 자원 (computing resources)를 필요로 하는 계산이 있을 경우 최대한 적게 계산을 하게 됩니다.
이런 경우 함수를 반환하는 useCallback 대신 값을 반환하는 useMemo를 사용할 수 있습니다.
전문적인 리액트 개발자 되기
리액트는 어렵습니다. 혼자 모든 것을 알아내려고 하지 않아도 됩니다.
기록적인 시간에 목표 달성을 돕기 위해 리액트 강의에 리액트에 관해 아는 모든 것을 담았습니다.
Introducing: The React Bootcamp
제가 리액트를 배우기 시작했을 때 알았으면 하는 강의입니다.
아래를 클릭하여 리액트 부트 캠프를 경험해 보세요.
