• React js란?
    React는 2011년 Facebook에서 개발한 오픈 소스 프론트엔드 JavaScript 라이브러리입니다.
    React는 Facebook에서 일하는 소프트웨어 엔지니어 Jordan Walke가 만들었습니다.
    -, React는 특히 단일 페이지 애플리케이션을 위한 사용자 인터페이스를 구축하는 데 사용됩니다.
    -, 재사용 가능한 UI 구성 요소를 만드는 데 도움이 되는 구성 요소 기반 접근 방식을 따릅니다.
    -, 복잡하고 인터랙티브한 웹 및 모바일 UI 개발에 사용됩니다. 2015년에야 오픈 소스가 되었지만 이를 지원하는 가장 큰 커뮤니티 중 하나가 있습니다.
  • React의 주요 기능은 무엇입니까?
    React의 주요 기능은 다음과 같습니다.
    -, RealDOM 조작이 비싸다는 점을 고려하여 RealDOM 대신 VirtualDOM을 사용합니다.
    -, 서버 측 렌더링을 사용합니다.
    -, 단방향 데이터 흐름 또는 데이터 바인딩을 따릅니다.
    재사용/구성 가능한 UI 구성요소를 사용하여 보기를 개발합니다.
  • JSX 란 무엇입니까?
    JSX는 ECMAScript에 대한 XML과 유사한 구문 확장입니다(약어는 JavaScript XML을 나타냄).
    기본적으로 React.createElement() 함수에 대한 구문 설탕을 제공하여 템플릿 구문과 같은 HTML과 함께 JavaScript의 표현력을 제공합니다.
    아래 예에서 <h1> 태그 안의 텍스트는 렌더링 함수에 JavaScript 함수로 반환됩니다.
    class App extends React.Component {
      render() {
        return(
          <div>
            <h1>{'Welcome to React world!'}</h1>
          </div>
        )
      }
    }
              
  • React의 주요 장점을 나열하십시오.
    React의 주요 장점은 다음과 같습니다.
    -, 응용 프로그램의 성능을 향상시킵니다.
    -, 클라이언트 측과 서버 측 모두에서 편리하게 사용할 수 있습니다.
    -, JSX로 인해 코드의 가독성이 향상됩니다.
    -, React는 Meteor, Angular 등과 같은 다른 프레임워크와 쉽게 통합됩니다.
    -, React를 사용하면 UI 테스트 케이스 작성이 매우 쉬워집니다.
  • React에서 구성 요소를 만드는 방법은 무엇입니까?
    구성 요소를 만드는 방법에는 두 가지가 있습니다.
    Function Components : 구성 요소를 만드는 가장 간단한 방법입니다. 다음은 props 객체를 첫 번째 매개변수로 받아들이고 React 요소를 반환하는 순수한 JavaScript 함수입니다.
    function Greeting({ message }) {
      return <h1>{`Hello, ${message}`}</h1>
    }
              

    Class Components : ES6 클래스를 사용하여 구성 요소를 정의할 수도 있습니다. 위의 함수 구성 요소는 다음과 같이 작성할 수 있습니다.
    class Greeting extends React.Component {
      render() {
        return <h1>{`Hello, ${this.props.message}`}</h1>
      }
    }
              
  • 함수 구성 요소보다 클래스 구성 요소를 사용하는 경우는 언제입니까?
    구성 요소에 상태 또는 수명 주기 메서드가 필요한 경우 클래스 구성 요소를 사용하고 그렇지 않으면 함수 구성 요소를 사용합니다.
    그러나 Hooks가 추가된 React 16.8부터는 함수 구성 요소에서 바로 클래스 구성 요소에서만 사용할 수 있었던 상태, 수명 주기 메서드 및 기타 기능을 사용할 수 있습니다.
  • 순수 구성 요소란 무엇입니까?
    React.PureComponent는 shouldComponentUpdate() 메서드를 처리한다는 점을 제외하면 React.Component와 정확히 동일합니다.
    props 또는 state가 변경되면 PureComponent는 props와 state 모두에 대해 얕은 비교를 수행합니다. 반면에 구성 요소는 현재 props 및 state를 즉시 사용 가능한 다음 항목과 비교하지 않습니다.
    따라서 구성 요소는 shouldComponentUpdate가 호출될 때마다 기본적으로 다시 렌더링됩니다.
  • React에서 상태(state)란 무엇입니까?
    구성 요소의 상태(state)는 구성 요소의 수명 동안 변경될 수 있는 일부 정보를 보유하는 개체입니다.
    우리는 항상 상태(state)를 가능한 한 단순하게 만들고 상태(state) 저장 구성 요소의 수를 최소화하도록 노력해야 합니다.
    메시지 상태가 있는 사용자 구성 요소를 만들어 보겠습니다.
    class User extends React.Component {
      constructor(props) {
        super(props)
    
        this.state = {
          message: 'Welcome to React world'
        }
      }
    
      render() {
        return (
          <div>
            <h1>{this.state.message}</h1>
          </div>
        )
      }
    }
              
  • 브라우저가 JSX를 읽을 수 없는 이유는 무엇입니까?
    브라우저는 JavaScript 객체만 읽을 수 있지만 JSX는 일반 JavaScript 객체가 아닙니다.
    따라서 브라우저에서 JSX를 읽을 수 있도록 하려면 먼저 Babel과 같은 JSX 변환기를 사용하여 JSX 파일을 JavaScript 객체로 변환한 다음 브라우저에 전달해야 합니다.
  • React에서 render()의 목적을 설명하십시오.
    각 React 구성 요소에는 반드시 render()가 있어야 합니다.
    네이티브 DOM 구성 요소를 나타내는 단일 React 요소를 반환합니다.
    둘 이상의 HTML 요소를 렌더링해야 하는 경우 <form>, <group>,<div> 등과 같은 하나의 둘러싸는 태그 안에 함께 그룹화되어야 합니다.
    이 함수는 순수하게 유지되어야 합니다. 즉, 동일한 결과를 반환해야 합니다. 호출될 때마다.
  • React에서 props는 무엇입니까?
    props은 구성 요소에 대한 입력입니다. HTML 태그 속성과 유사한 명명 규칙을 사용하여 생성 시 구성 요소에 전달되는 값 집합을 포함하는 단일 값 또는 개체입니다.
    상위 구성 요소에서 하위 구성 요소로 전달되는 데이터입니다.
    React에서 props의 주요 목적은 다음 구성 요소 기능을 제공하는 것입니다.
    -, 구성 요소에 사용자 지정 데이터를 전달합니다.
    -, 상태 변경을 트리거합니다.
    -, 구성 요소의 render() 메서드 내에서 this.props.reactProp을 통해 사용합니다.
    예를 들어 reactProp 속성을 사용하여 요소를 생성해 보겠습니다.
    <Element reactProp={'1'} />
    이 reactProp(또는 여러분이 생각해낸 이름)은 원래 React 라이브러리를 사용하여 생성된 모든 구성 요소에 이미 존재하는 React의 기본 props 객체에 연결된 속성이 됩니다.
    props.reactProp
  • state와 props의 차이점은 무엇입니까?
    props와 state는 모두 일반 JavaScript 객체입니다. 둘 다 렌더 출력에 영향을 미치는 정보를 보유하고 있지만 구성 요소와 관련하여 기능이 다릅니다.
    Props는 함수 매개변수와 유사하게 구성 요소에 전달되는 반면 상태는 함수 내에서 선언된 변수와 유사하게 구성 요소 내에서 관리됩니다.
  • 콜백 함수를 setState()의 인수로 사용하는 목적은 무엇입니까?
    콜백 함수는 setState가 완료되고 구성 요소가 렌더링될 때 호출됩니다. setState()는 비동기식이므로 콜백 함수는 모든 사후 조치에 사용됩니다.
    참고: 이 콜백 함수보다 수명 주기 방식을 사용하는 것이 좋습니다.
    setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'))
  • refs의 용도는 무엇입니까?
    ref는 요소에 대한 참조를 반환하는 데 사용됩니다. 대부분의 경우 피해야 하지만 DOM 요소 또는 구성 요소 인스턴스에 직접 액세스해야 할 때 유용할 수 있습니다.
  • ReactJS의 수명 주기 방법은 무엇입니까? ReactJS의 수명 주기 방법은 무엇입니까?
    -, componentWillMount : 렌더링 전에 실행되며 루트 구성 요소의 앱 수준 구성에 사용됩니다.
    -, componentDidMount : 첫 번째 렌더링 후 실행되며 여기에서는 모든 AJAX 요청, DOM 또는 상태 업데이트, 설정 이벤트 리스너가 발생해야 합니다.
    -, componentWillReceiveProps : 특정 소품이 상태 전환을 트리거하기 위해 업데이트될 때 실행됩니다.
    -, shouldComponentUpdate : 구성 요소를 업데이트할지 여부를 결정합니다. 기본적으로 true를 반환합니다. state 또는 props가 업데이트된 후 구성 요소를 렌더링할 필요가 없다고 확신하는 경우 false 값을 반환할 수 있습니다. 구성 요소가 새 prop을 받는 경우 다시 렌더링하는 것을 방지할 수 있으므로 성능을 향상시킬 수 있는 좋은 장소입니다.
    -, componentWillUpdate : true를 반환하는 shouldComponentUpdate에 의해 확인된 장점 및 상태 변경이 있는 경우 구성 요소를 다시 렌더링하기 전에 실행됩니다.
    -, componentDidUpdate : 주로 prop 또는 state 변경에 대한 응답으로 DOM을 업데이트하는 데 사용됩니다.
    -, componentWillUnmount : 나가는 네트워크 요청을 취소하거나 구성 요소와 연결된 모든 이벤트 수신기를 제거하는 데 사용됩니다.
  • Redux는 무엇입니까?
    오늘날의 성장하는 세계에서 프론트엔드 개발을 위한 가장 수요가 많은 라이브러리 중 하나입니다. 주로 JavaScript 앱용으로 설계된 예측 가능한 상태 컨테이너로 정의되며, 애플리케이션의 전체 상태를 관리하는 데에도 사용됩니다.
    Redux는 크기가 매우 작고 종속성이 없습니다. 다양한 환경에 배포하기 쉽고 테스트하기 쉬운 애플리케이션을 구축합니다. Redux는 크기가 매우 작고 종속성이 없습니다.
  • Redux thunk 사용이란 무엇입니까?
    Redux 썽크는 개인이 작업 대신 기능을 반환하는 작업 작성자를 작성할 수 있도록 하는 미들웨어 역할을 합니다. 이는 특정 조건이 충족되면 액션의 전달을 지연시키기 위한 지연 기능으로도 사용됩니다.
    두 가지 저장 메소드 getState() 및 dispatch()는 내부 함수에 대한 매개변수로 제공됩니다.
    Redux 썽크를 활성화하려면 먼저 아래와 같이 applyMiddleware() 메서드를 사용해야 합니다.
    import{ createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import rootReducer from './reducers/index';
    
    //Note: this API requires redux@>=3.1.0
    const store= createStore(
      rootReducer,
      applyMiddleware(thunk)
    );
              
  • Flux에 대해 무엇을 알고 있습니까?
    기본적으로 Flux는 단방향 데이터 스트림을 유지하는 데 도움이 되는 기본 그림입니다.
    해석된 데이터의 고유한 조각을 제어하여 문제를 일으키지 않고 해당 데이터와 인터페이스하도록 하기 위한 것입니다.
    플럭스 구성이 간단하지 않습니다.
    React 애플리케이션에만 국한되지 않으며 React 애플리케이션을 수집할 필요도 없습니다.
    Flux는 기본적으로 간단한 아이디어이지만 그 사용법에 대한 심오한 이해를 보여야 합니다.
  • React의 합성(Synthetic) 이벤트는 무엇입니까?
    React는 응용 프로그램과 인터페이스의 일관성과 성능을 향상시키기 위해 합성(Synthetic) 이벤트를 구현합니다. 합성 이벤트는 브라우저의 기본 이벤트를 둘러싼 브라우저 간 래퍼입니다.
    여러 브라우저의 동작을 단일 API로 결합하여 이벤트가 다른 브라우저와 플랫폼에서 동일한 속성을 갖도록 합니다.
  • React의 양식은 무엇입니까?
    React는 사용자가 웹 애플리케이션과 상호 작용할 수 있도록 양식을 사용합니다.
    양식을 사용하여 사용자는 응용 프로그램과 상호 작용하고 필요할 때마다 필요한 정보를 입력할 수 있습니다.
    양식에는 텍스트 필드, 버튼, 체크박스, 라디오 버튼 등과 같은 특정 요소가 포함됩니다.
    양식은 사용자 인증, 검색, 필터링, 인덱싱 등과 같은 다양한 작업에 사용됩니다.
  • React에서 고차 구성 요소는 무엇입니까?
    HOC(Higher-Order Component)는 구성 요소를 가져와서 간단하고 재사용이 가능한 새 구성 요소를 반환하는 함수입니다.
    일반적으로 여러 구성 요소가 공통 논리를 사용해야 할 때 사용됩니다.
    동적으로 제공되는 모든 자식 구성 요소를 받아들일 수 있지만 입력 구성 요소에서 동작을 수정하거나 복사하지 않기 때문에 순수 구성 요소라고 합니다.
    const EnhancedComponent = higherOrderComponent(WrappedComponent)
    HOC는 많은 사용 사례에 사용할 수 있습니다.
    -, 코드 재사용, 논리 및 부트스트랩 추상화.
    -, 렌더링 하이재킹.
    -, 상태 추상화 및 조작
    -, props 조작.
  • 리액트 라우터란?
    React Router는 React 애플리케이션에서 경로를 생성하는 데 사용되는 React를 기반으로 구축된 라우팅 라이브러리입니다.
  • 라우터에 반응해야 하는 이유는 무엇입니까?
    일관된 구조와 동작을 유지하며 단일 페이지 웹 응용 프로그램을 개발하는 데 사용됩니다.
    React 애플리케이션에서 여러 경로를 정의하여 단일 애플리케이션에서 여러 보기를 활성화합니다.
  • React Fiber 란 무엇입니까?
    Fiber는 React v16의 새로운 조정 엔진 또는 핵심 알고리즘의 재구현입니다.
    React Fiber의 목표는 애니메이션, 레이아웃, 제스처, 작업 일시 중지, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이트에 우선 순위를 지정하는 것입니다. 그리고 새로운 동시성 프리미티브.
  • React Fiber의 주요 목표는 무엇입니까?
    React Fiber의 목표는 애니메이션, 레이아웃 및 제스처와 같은 영역에 대한 적합성을 높이는 것입니다.
    헤드라인 기능은 증분 렌더링입니다. 렌더링 작업을 청크로 분할하고 여러 프레임에 분산하는 기능입니다.
  • createElement와 cloneElement의 차이점은 무엇입니까?
    JSX 요소는 UI의 객체 표현에 사용될 React 요소를 생성하기 위해 React.createElement() 함수로 변환됩니다. 반면 cloneElement는 요소를 복제하고 새 소품을 전달하는 데 사용됩니다.
  • HOC 구성 요소에 대한 props 프록시를 만드는 방법은 무엇입니까?
    다음과 같이 props 프록시 패턴을 사용하여 구성 요소에 전달된 props를 추가/편집할 수 있습니다.
    function HOC(WrappedComponent) {
      return class Test extends Component {
        render() {
          const newProps = {
            title: 'New Header',
            footer: false,
            showFeatureX: false,
            showFeatureY: true
          }
    
          return <WrappedComponent {...this.props} {...newProps} />
        }
      }
    }
              
  • 컨텍스트란 무엇입니까?
    컨텍스트는 모든 수준에서 props를 수동으로 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공합니다.
    예를 들어 인증된 사용자, 로케일 기본 설정, UI 테마는 많은 구성 요소에서 애플리케이션에서 액세스해야 합니다.
    const {Provider, Consumer} = React.createContext(defaultValue)
  • reconciliation란?
    컴포넌트의 props 또는 state가 변경되면 React는 새로 반환된 요소를 이전에 렌더링된 요소와 비교하여 실제 DOM 업데이트가 필요한지 여부를 결정합니다.
    같지 않으면 React는 DOM을 업데이트합니다. 이 과정을 reconciliation라고 합니다.
  • React가 class 속성보다 className을 사용하는 이유는 무엇입니까?
    class는 JavaScript의 키워드이고 JSX는 JavaScript의 확장입니다.
    이것이 React가 class 대신 className을 사용하는 주된 이유입니다. className prop으로 문자열을 전달하십시오.
    render() {
      return <span className={'menu navigation-menu'}>{'Menu'}</span>
    }