1. React란?
- SPA (Single page application -단일 페이지)으로 사용자 인터페이스를 개발하는 데 사용되는 오픈 소스 JS 라이브러리입니다.
2. 리액트 만들고 시작하는 명령어는?
npx create-react-app <app name>
cd <app name>
npm start
3. Virtual Dom이란?
- 컴포넌트가 다시 렌더링 될 때, virtual Dom은 업데이트할 요소의 목록을 만들기 위해 기존의 DOM 모델에서 변경된 사항을 비교합니다.
- 애플리케이션의 UI를 구성하는 HTML 엘리먼트를 메모리 내에서 구현한 것입니다.
4. JSX란?
- JavaScript XML의 약자로 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트 문법의 확장입니다.
5. Props에 대해 설명해주세요.
- props를 사용하여 다른 React 구성 요소에 데이터를 전달할 수 있습니다. 그리고 props는 값을 변경할 수 없습니다.
6. map에 대해 설명해주세요.
- map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수에 호출한 결과를 모아 새로운 배열을 반환합니다.
- 배열에서만 작동하는 메서드입니다.
- 🚨주의! 객체에 map 메서드를 사용하면 작동하지 않습니다.
7. Image tag 설정 방법에 대해 말해보세요.
impot mealsImg from ‘../imgfile’;
<img src={mealsImg} alt=”설명"/>
8. React css 연결방법을 말해보세요.
import classes from ‘./header.module.css’;
div tag 안에 className={classes.header}
9. state와 props의 차이점은 무엇인가요?
- props와 state는 모두 JavaScript 객체입니다. 두 가지 다 렌더링 결과에 영향을 주는 정보를 가지고 있지만, component와 관련된 기능면에서 차이가 있습니다.
- props는 component 요소로 전달합니다.
- state는 component 안에서 관리되고 사용할 변수 선언입니다.
10. 클래스형과 함수형의 차이는 무엇인가?
- 클래스형은 내부 state를 유지하는 데 필요한 컴포넌트를 생성하거나 생명주기 메서드를 활용하고 render() 메서드를 포함해야 합니다.
- 함수형에서는 Hook, useEffect 등을 사용하고, props를 받고, elements를 리턴할 수 있습니다.
- 클래스형은 render함수가 반드시 필요, 함수형이 선언하기 더 간편합니다.
11. element와 component의 차이점은 무엇인가요?
- element는 DOM 노드 또는 다른 component 들과 관련하여 화면에 표시할 내용을 표현하는 일반 객체입니다.
- component는 여러 방법으로 선언될 수 있습니다.
12. key는 어떻게 사용되나요?
- collection을 렌더링 할 때 엘리먼트와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 엘리먼트에 key를 추가하는 것입니다. key를 사용하지 않으면 collection에 item을 추가하거나 제거할 때 예상치 못한 동작 결과가 발생할 수 있습니다.
13. 왜 state를 직접 변경하지 않고 setState를 이용하나요?
- 만약 컴포넌트의 state를 직접 변경하려고 시도한다면, 리액트는 컴포넌트를 다시 렌더링해야 하는지 알 수 있는 방법이 없습니다. setState() 메서드를 사용하면 리액트는 컴포넌트의 UI를 업데이트할 수 있습니다.
14. React context는 무엇인가요?
- 리액트는 하나의 앱 안에서 복수의 컴포넌트들이 state를 공유할 때 발생하는 문제들을 해결하기 위해 context API를 제공합니다.
15. Hook 이란?
- Hooks는 클래스 기반 컴포넌트의 장점(예를 들면 내부 state와 생명주기 메서드)을 함수형 컴포넌트로 가져오려는 리액트의 시도입니다.
16. hooks의 장점은 무엇인가요?
- 클래스 기반 컴포넌트, lifecycle hooks, this의 필요성이 사라집니다
17. React Native는 ReactJS와 어떻게 다릅니까?
- React Native는 모바일 앱 개발 요구 사항을 충족하기 위해 Facebook에서 개발한 JavaScript 프레임워크입니다. 오픈 소스이며 JavaScript를 기반으로 합니다. 재사용 가능한 구성 요소로 기본 모바일 앱을 빌드하도록 설계되었습니다. 많은 ReactJS 구성 요소를 사용하지만 다른 장치에서 기본 방식으로 구현합니다.
- ReactJS는 Facebook에서도 개발했습니다. 모바일 및 웹 애플리케이 모션을 위한 반응형 사용자 인터페이스를 개발하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. 개발자가 앱의 기반을 구축하는 데 도움이 되는 재사용 가능한 구성 요소 라이브러리가 있습니다.
주요 차이점
구문 -HTML 사용 여부: React Native와 ReactJS는 모두 JSX를 사용하지만 ReactJS는 HTML 태그를 사용하고 React Native는 사용하지 않습니다.
탐색 : React Native는 자체 내장 탐색 라이브러리를 사용하는 반면 ReactJS는 반응 라우터를 사용합니다.
애니메이션 : ReactJS는 CSS 애니메이션을 사용합니다. React Native는 애니메이션 API를 사용합니다.
DOM : ReactJS는 부분 새로 고침과 함께 가상 DOM을 사용합니다. React Native는 UI 구성 요소를 렌더링 할 때 기본 API를 사용해야 합니다.
사용법 : ReactJS는 주로 웹 앱 개발에 사용되는 반면 React Native는 모바일 응용 프로그램에 중점을 둡니다.
댓글