{"id":15541474,"url":"https://github.com/junghyeonsu/reactjs-interview-questions-kr","last_synced_at":"2025-03-29T00:21:15.235Z","repository":{"id":112754357,"uuid":"348321670","full_name":"junghyeonsu/reactjs-interview-questions-kr","owner":"junghyeonsu","description":"reactjs-interview-questions를 번역했습니다.","archived":false,"fork":false,"pushed_at":"2021-05-09T07:01:21.000Z","size":303,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-19T13:47:05.143Z","etag":null,"topics":["interview","interview-questions","react","reactjs"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/junghyeonsu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-16T11:28:22.000Z","updated_at":"2022-07-15T05:00:10.000Z","dependencies_parsed_at":null,"dependency_job_id":"82a65e30-c74f-4165-a23e-32d7a385a531","html_url":"https://github.com/junghyeonsu/reactjs-interview-questions-kr","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"72053ad59dd452bbcca49a5e3ca30f3b4cca63ac"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junghyeonsu%2Freactjs-interview-questions-kr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junghyeonsu%2Freactjs-interview-questions-kr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junghyeonsu%2Freactjs-interview-questions-kr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/junghyeonsu%2Freactjs-interview-questions-kr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/junghyeonsu","download_url":"https://codeload.github.com/junghyeonsu/reactjs-interview-questions-kr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246118259,"owners_count":20726156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["interview","interview-questions","react","reactjs"],"created_at":"2024-10-02T12:17:27.737Z","updated_at":"2025-03-29T00:21:15.203Z","avatar_url":"https://github.com/junghyeonsu.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 인터뷰 질문 \u0026 답변\n\u003e 이 레파지토리는 [reactjs-interview-questions](https://github.com/sudheerj/reactjs-interview-questions)를 번역한 레파지토리입니다.\n\n### Table of Contents\n\n| No. | Questions |\n| --- | --------- |\n|   | **Core React** |\n|1  | [React가 무엇인가요?](#React가-무엇인가요) |\n|2  | [React의 가장 주요한 특징은 뭘까요?](#React의-가장-주요한-특징은-뭘까요) |\n|3  | [JSX가 뭘까요?](#JSX가-뭘까요) |\n|4  | [Element와 Component의 차이점은 무엇일까요?](#Element와-Component의-차이점은-무엇일까요) |\n|5  | [React에서 Component를 만드는 방법은 무엇일까요?](#React에서-Component를-만드는-방법은-무엇일까요) |\n|6  | [함수형 컴포넌트 대신에 클래스 컴포넌트를 사용하는 때는 언제일까요?](#함수형-컴포넌트-대신에-클래스-컴포넌트를-사용하는-때는-언제일까요) |\n|7  | [Pure Components는 무엇일까요?](#Pure-Components는-무엇일까요) |\n|8  | [React에서 state는 무엇일까요?](#React에서-state는-무엇일까요) |\n|9  | [React에서 props는 무엇일까요?](#React에서-props는-무엇일까요) |\n|10 | [state와 props의 차이는 무엇일까요?](#state와-props의-차이는-무엇일까요) |\n|11 | [왜 state는 직접 바꾸면 안될까요?](#왜-state는-직접-바꾸면-안될까요) |\n|12 | [setState()의 인자로서 콜백함수의 목적은 무엇일까요?](#setState()의-인자로서-콜백함수의-목적은-무엇일까요)\n|13 | [HTML와 React간에 이벤트를 다루는 방법의 차이는 무엇일까요?](#HTML와-React간에-이벤트를-다루는-방법의-차이는-무엇일까요) |\n|14 | [JSX 콜백안에 메소드나 이벤트 핸들러를 어떻게 적용할 수 있을까요?](#JSX-콜백안에-메소드나-이벤트-핸들러를-어떻게-적용할-수-있을까요) |\n|15 | [콜백이나 이벤트 핸들러에 매개변수를 어떻게 넘길 수 있을까요?](#콜백이나-이벤트-핸들러에-매개변수를-어떻게-넘길-수-있을까요?) |\n|16 | [리액트에서 synthetic 이벤트는 무엇일까요?](#리액트에서-synthetic-이벤트는-무엇일까요) |\n|17 | [inline 조건부 표현식은 무엇일까요?](#inline-조건부-표현식은-무엇일까요) |\n|18 | [\"key\" props은 무엇이고, 배열에서 사용했을 때 이점은 무엇일까요?](#\"key\"-props은-무엇이고,-배열에서-사용했을-때-이점은-무엇일까요) |\n|19 | [refs의 사용처는 무엇일까요?](#refs의-사용처는-무엇일까요) |\n|20 | [refs는 어떻게 사용할까요?](#refs는-어떻게-사용할까요)\n|21 | [forward refs는 무엇일까요?](#forward-refs는-무엇일까요) |\n|22 | [callback refs와 findDOMNode() 중에서 선호되는 옵션은 무엇일까요?](#callback-refs와-findDOMNode()-중에서-선호되는-옵션은-무엇일까요) |\n|23 | [String Refs가 legacy인 이유는 무엇일까요?](#String-Refs가-legacy인-이유는-무엇일까요?) |\n|24 | [Virtual DOM이 무엇일까요?](#Virtual-DOM이-무엇일까요) |\n|25 | [Virtual DOM은 어떻게 동작할까요?](#Virtual-DOM은-어떻게-동작할까요) |\n|26 | [Shadow DOM과 Virtual DOM의 차이점은 무엇일까요?](#Shadow-DOM과-Virtual-DOM의-차이점은-무엇일까요) |\n|27 | [React Fiber가 무엇일까요?](#React-Fiber가-무엇일까요) |\n|28 | [React Fiber의 주요 목적은 무엇일까요?](#React-Fiber의-주요-목적은-무엇일까요) |\n|29 | [controlled components는 무엇일까요?](#controlled-components는-무엇일까요) |\n|30 | [uncontrolled components는 무엇일까요?](#uncontrolled-components는-무엇일까요) |\n|31 | [createElement과 cloneElement의 차이점은 무엇일까요?](#createElement과-cloneElement의-차이점은-무엇일까요) |\n|32 | [React에서 Lifting State Up은 무엇일까요?](#React에서-Lifting-State-Up은-무엇일까요) |\n|33 | [component lifecycle의 단계들의 차이점은 무엇일까요?](#component-lifecycle의-단계들의-차이점은-무엇일까요) |\n|34 | [React에서 lifecycle method는 무엇일까요?](#React에서-lifecycle-method는-무엇일까요) |\n|35 | [Higher-Order Component는 무엇일까요?](#Higher-Order-Component는-무엇일까요) |\n|36 | [HOC component를 위한 props proxy는 어떻게 만들까요?](#HOC-component를-위한-props-proxy는-어떻게-만들까요) |\n|37 | [context가 뭘까요?](#context가-뭘까요) |\n|38 | [children prop가 뭘까요?](#children-prop가-뭘까요) |\n|39 | [React에서 주석은 어떻게 작성할까요?](#React에서-주석은-어떻게-작성할까요) |\n|40 | [super constructor with props 인자를 사용하는 이유는 무엇일까요?](#super-constructor-with-props-인자를-사용하는-이유는-무엇일까요) |\n|41 | [reconciliation가 무엇일까요?](#reconciliation가-무엇일까요) |\n|42 | [How to set state with a dynamic key name?](#how-to-set-state-with-a-dynamic-key-name) |\n|43 | [What would be the common mistake of function being called every time the component renders?](#what-would-be-the-common-mistake-of-function-being-called-every-time-the-component-renders) |\n|44 | [Is lazy function supports named exports?](#is-lazy-function-supports-named-exports) |\n|45 | [Why React uses className over class attribute?](#why-react-uses-classname-over-class-attribute) |\n|46 | [What are fragments?](#what-are-fragments) |\n|47 | [Why fragments are better than container divs?](#why-fragments-are-better-than-container-divs) |\n|48 | [What are portals in React?](#what-are-portals-in-react) |\n|49 | [What are stateless components?](#what-are-stateless-components) |\n|50 | [What are stateful components?](#what-are-stateful-components) |\n|51 | [How to apply validation on props in React?](#how-to-apply-validation-on-props-in-react) |\n|52 | [What are the advantages of React?](#what-are-the-advantages-of-react) |\n|53 | [What are the limitations of React?](#what-are-the-limitations-of-react) |\n|54 | [What are error boundaries in React v16](#what-are-error-boundaries-in-react-v16) |\n|55 | [How error boundaries handled in React v15?](#how-error-boundaries-handled-in-react-v15) |\n|56 | [What are the recommended ways for static type checking?](#what-are-the-recommended-ways-for-static-type-checking) |\n|57 | [What is the use of react-dom package?](#what-is-the-use-of-react-dom-package) |\n|58 | [What is the purpose of render method of react-dom?](#what-is-the-purpose-of-render-method-of-react-dom) |\n|59 | [What is ReactDOMServer?](#what-is-reactdomserver) |\n|60 | [How to use InnerHtml in React?](#how-to-use-innerhtml-in-react) |\n|61 | [How to use styles in React?](#how-to-use-styles-in-react) |\n|62 | [How events are different in React?](#how-events-are-different-in-react) |\n|63 | [What will happen if you use setState in constructor?](#what-will-happen-if-you-use-setstate-in-constructor) |\n|64 | [What is the impact of indexes as keys?](#what-is-the-impact-of-indexes-as-keys) |\n|65 | [Is it good to use setState() in componentWillMount() method?](#is-it-good-to-use-setstate-in-componentwillmount-method) |\n|66 | [What will happen if you use props in initial state?](#what-will-happen-if-you-use-props-in-initial-state) |\n|67 | [How do you conditionally render components?](#how-do-you-conditionally-render-components)\n|68 | [Why we need to be careful when spreading props on DOM elements??](#why-we-need-to-be-careful-when-spreading-props-on-dom-elements) |\n|69 | [How you use decorators in React?](#how-you-use-decorators-in-react) |\n|70 | [How do you memoize a component?](#how-do-you-memoize-a-component) |\n|71 | [How you implement Server-Side Rendering or SSR?](#how-you-implement-server-side-rendering-or-ssr) |\n|72 | [How to enable production mode in React?](#how-to-enable-production-mode-in-react) |\n|73 | [What is CRA and its benefits?](#what-is-cra-and-its-benefits) |\n|74 | [What is the lifecycle methods order in mounting?](#what-is-the-lifecycle-methods-order-in-mounting) |\n|75 | [What are the lifecycle methods going to be deprecated in React v16?](#what-are-the-lifecycle-methods-going-to-be-deprecated-in-react-v16) |\n|76 | [What is the purpose of getDerivedStateFromProps() lifecycle method?](#what-is-the-purpose-of-getderivedstatefromprops-lifecycle-method) |\n|77 | [What is the purpose of getSnapshotBeforeUpdate() lifecycle method?](#what-is-the-purpose-of-getsnapshotbeforeupdate-lifecycle-method) |\n|78 | [Do Hooks replace render props and higher order components?](#do-hooks-replace-render-props-and-higher-order-components) |\n|79 | [What is the recommended way for naming components?](#what-is-the-recommended-way-for-naming-components) |\n|80 | [What is the recommended ordering of methods in component class?](#what-is-the-recommended-ordering-of-methods-in-component-class) |\n|81 | [What is a switching component?](#what-is-a-switching-component) |\n|82 | [Why we need to pass a function to setState()?](#why-we-need-to-pass-a-function-to-setstate) |\n|83 | [What is strict mode in React?](#what-is-strict-mode-in-react) |\n|84 | [What are React Mixins?](#what-are-react-mixins) |\n|85 | [Why is isMounted() an anti-pattern and what is the proper solution?](#why-is-ismounted-an-anti-pattern-and-what-is-the-proper-solution) |\n|86 | [What are the Pointer Events supported in React?](#what-are-the-pointer-events-supported-in-react) |\n|87 | [Why should component names start with capital letter?](#why-should-component-names-start-with-capital-letter) |\n|88 | [Are custom DOM attributes supported in React v16?](#are-custom-dom-attributes-supported-in-react-v16) |\n|89 | [What is the difference between constructor and getInitialState?](#what-is-the-difference-between-constructor-and-getinitialstate) |\n|90 | [Can you force a component to re-render without calling setState?](#can-you-force-a-component-to-re-render-without-calling-setstate) |\n|91 | [What is the difference between super() and super(props) in React using ES6 classes?](#what-is-the-difference-between-super-and-superprops-in-react-using-es6-classes) |\n|92 | [How to loop inside JSX?](#how-to-loop-inside-jsx) |\n|93 | [How do you access props in attribute quotes?](#how-do-you-access-props-in-attribute-quotes) |\n|94 | [What is React PropType array with shape?](#what-is-react-proptype-array-with-shape) |\n|95 | [How to conditionally apply class attributes?](#how-to-conditionally-apply-class-attributes) |\n|96 | [What is the difference between React and ReactDOM?](#what-is-the-difference-between-react-and-reactdom) |\n|97 | [Why ReactDOM is separated from React?](#why-reactdom-is-separated-from-react) |\n|98 | [How to use React label element?](#how-to-use-react-label-element) |\n|99 | [How to combine multiple inline style objects?](#how-to-combine-multiple-inline-style-objects) |\n|100| [How to re-render the view when the browser is resized?](#how-to-re-render-the-view-when-the-browser-is-resized)\n|101| [What is the difference between setState and replaceState methods?](#what-is-the-difference-between-setstate-and-replacestate-methods) |\n|102| [How to listen to state changes?](#how-to-listen-to-state-changes) |\n|103| [What is the recommended approach of removing an array element in react state?](#what-is-the-recommended-approach-of-removing-an-array-element-in-react-state) |\n|104| [Is it possible to use React without rendering HTML?](#is-it-possible-to-use-react-without-rendering-html) |\n|105| [How to pretty print JSON with React?](#how-to-pretty-print-json-with-react) |\n|106| [Why you can't update props in React?](#why-you-cant-update-props-in-react) |\n|107| [How to focus an input element on page load?](#how-to-focus-an-input-element-on-page-load) |\n|108| [What are the possible ways of updating objects in state?](#what-are-the-possible-ways-of-updating-objects-in-state) |\n|110| [How can we find the version of React at runtime in the browser?](#how-can-we-find-the-version-of-react-at-runtime-in-the-browser) |\n|111| [What are the approaches to include polyfills in your create-react-app?](#what-are-the-approaches-to-include-polyfills-in-your-create-react-app) |\n|112| [How to use https instead of http in create-react-app?](#how-to-use-https-instead-of-http-in-create-react-app) |\n|113| [How to avoid using relative path imports in create-react-app?](#how-to-avoid-using-relative-path-imports-in-create-react-app) |\n|114| [How to add Google Analytics for react-router?](#how-to-add-google-analytics-for-react-router) |\n|115| [How to update a component every second?](#how-to-update-a-component-every-second) |\n|116| [How do you apply vendor prefixes to inline styles in React?](#how-do-you-apply-vendor-prefixes-to-inline-styles-in-react) |\n|117| [How to import and export components using react and ES6?](#how-to-import-and-export-components-using-react-and-es6) |\n|118| [What are the exceptions on React component naming?](#what-are-the-exceptions-on-react-component-naming) |\n|119| [Why is a component constructor called only once?](#why-is-a-component-constructor-called-only-once) |\n|120| [How to define constants in React?](#how-to-define-constants-in-react) |\n|121| [How to programmatically trigger click event in React?](#how-to-programmatically-trigger-click-event-in-react) |\n|122| [Is it possible to use async/await in plain React?](#is-it-possible-to-use-asyncawait-in-plain-react) |\n|123| [What are the common folder structures for React?](#what-are-the-common-folder-structures-for-react) |\n|124| [What are the popular packages for animation?](#what-are-the-popular-packages-for-animation) |\n|125| [What is the benefit of styles modules?](#what-is-the-benefit-of-styles-modules) |\n|126| [What are the popular React-specific linters?](#what-are-the-popular-react-specific-linters) |\n|127| [How to make AJAX call and In which component lifecycle methods should I make an AJAX call?](#how-to-make-ajax-call-and-in-which-component-lifecycle-methods-should-i-make-an-ajax-call) |\n|128| [What are render props?](#what-are-render-props) |\n|   | **React Router** |\n|129| [What is React Router?](#what-is-react-router) |\n|130| [How React Router is different from history library?](#how-react-router-is-different-from-history-library) |\n|131| [What are the \\\u003cRouter\u003e components of React Router v4?](#what-are-the-router-components-of-react-router-v4) |\n|132| [What is the purpose of push and replace methods of history?](#what-is-the-purpose-of-push-and-replace-methods-of-history) |\n|133| [How do you programmatically navigate using React router v4?](#how-do-you-programmatically-navigate-using-react-router-v4) |\n|134| [How to get query parameters in React Router v4](#how-to-get-query-parameters-in-react-router-v4) |\n|135| [Why you get \"Router may have only one child element\" warning?](#why-you-get-router-may-have-only-one-child-element-warning) |\n|136| [How to pass params to history.push method in React Router v4?](#how-to-pass-params-to-historypush-method-in-react-router-v4) |\n|137| [How to implement default or NotFound page?](#how-to-implement-default-or-notfound-page) |\n|138| [How to get history on React Router v4?](#how-to-get-history-on-react-router-v4) |\n|139| [How to perform automatic redirect after login?](#how-to-perform-automatic-redirect-after-login) |\n|   | **React Internationalization** |\n|140| [What is React-Intl?](#what-is-react-intl) |\n|141| [What are the main features of React Intl?](#what-are-the-main-features-of-react-intl) |\n|142| [What are the two ways of formatting in React Intl?](#what-are-the-two-ways-of-formatting-in-react-intl) |\n|143| [How to use FormattedMessage as placeholder using React Intl?](#how-to-use-formattedmessage-as-placeholder-using-react-intl) |\n|144| [How to access current locale with React Intl](#how-to-access-current-locale-with-react-intl) |\n|145| [How to format date using React Intl?](#how-to-format-date-using-react-intl) |\n|   | **React Testing** |\n|146| [What is Shallow Renderer in React testing?](#what-is-shallow-renderer-in-react-testing) |\n|147| [What is TestRenderer package in React?](#what-is-testrenderer-package-in-react) |\n|148| [What is the purpose of ReactTestUtils package?](#what-is-the-purpose-of-reacttestutils-package) |\n|149| [What is Jest?](#what-is-jest) |\n|150| [What are the advantages of Jest over Jasmine?](#what-are-the-advantages-of-jest-over-jasmine) |\n|151| [Give a simple example of Jest test case](#give-a-simple-example-of-jest-test-case) |\n|   | **React Redux** |\n|152| [What is Flux?](#what-is-flux) |\n|153| [What is Redux?](#what-is-redux) |\n|154| [What are the core principles of Redux?](#what-are-the-core-principles-of-redux) |\n|155| [What are the downsides of Redux compared to Flux?](#what-are-the-downsides-of-redux-compared-to-flux) |\n|156| [What is the difference between mapStateToProps() and mapDispatchToProps()?](#what-is-the-difference-between-mapstatetoprops-and-mapdispatchtoprops) |\n|157| [Can I dispatch an action in reducer?](#can-i-dispatch-an-action-in-reducer) |\n|158| [How to access Redux store outside a component?](#how-to-access-redux-store-outside-a-component) |\n|159| [What are the drawbacks of MVW pattern](#what-are-the-drawbacks-of-mvw-pattern) |\n|160| [Are there any similarities between Redux and RxJS?](#are-there-any-similarities-between-redux-and-rxjs) |\n|161| [How to dispatch an action on load?](#how-to-dispatch-an-action-on-load) |\n|162| [How to use connect from React Redux?](#how-to-use-connect-from-react-redux) |\n|163| [How to reset state in Redux?](#how-to-reset-state-in-redux) |\n|164| [Whats the purpose of at symbol in the redux connect decorator?](#whats-the-purpose-of-at-symbol-in-the-redux-connect-decorator) |\n|165| [What is the difference between React context and React Redux?](#what-is-the-difference-between-react-context-and-react-redux) |\n|166| [Why are Redux state functions called reducers?](#why-are-redux-state-functions-called-reducers) |\n|167| [How to make AJAX request in Redux?](#how-to-make-ajax-request-in-redux) |\n|168| [Should I keep all component's state in Redux store?](#should-i-keep-all-components-state-in-redux-store) |\n|169| [What is the proper way to access Redux store?](#what-is-the-proper-way-to-access-redux-store) |\n|170| [What is the difference between component and container in React Redux?](#what-is-the-difference-between-component-and-container-in-react-redux) |\n|171| [What is the purpose of the constants in Redux? ](#what-is-the-purpose-of-the-constants-in-redux) |\n|172| [What are the different ways to write mapDispatchToProps()?](#what-are-the-different-ways-to-write-mapdispatchtoprops) |\n|173| [What is the use of the ownProps parameter in mapStateToProps() and mapDispatchToProps()?](#what-is-the-use-of-the-ownprops-parameter-in-mapstatetoprops-and-mapdispatchtoprops) |\n|174| [How to structure Redux top level directories?](#how-to-structure-redux-top-level-directories) |\n|175| [What is redux-saga?](#what-is-redux-saga) |\n|176| [What is the mental model of redux-saga?](#what-is-the-mental-model-of-redux-saga) |\n|177| [What are the differences between call and put in redux-saga](#what-are-the-differences-between-call-and-put-in-redux-saga) |\n|178| [What is Redux Thunk?](#what-is-redux-thunk) |\n|179| [What are the differences between redux-saga and redux-thunk](#what-are-the-differences-between-redux-saga-and-redux-thunk) |\n|180| [What is Redux DevTools?](#what-is-redux-devtools) |\n|181| [What are the features of Redux DevTools?](#what-are-the-features-of-redux-devtools) |\n|182| [What are Redux selectors and Why to use them?](#what-are-redux-selectors-and-why-to-use-them) |\n|183| [What is Redux Form?](#what-is-redux-form) |\n|184| [What are the main features of Redux Form?](#what-are-the-main-features-of-redux-form) |\n|185| [How to add multiple middlewares to Redux?](#how-to-add-multiple-middlewares-to-redux) |\n|186| [How to set initial state in Redux?](#how-to-set-initial-state-in-redux) |\n|187| [How Relay is different from Redux?](#how-relay-is-different-from-redux) |\n|188| [What is an action in Redux?](#what-is-an-action-in-redux) |\n|   | **React Native** |\n|188| [What is the difference between React Native and React?](#what-is-the-difference-between-react-native-and-react) |\n|189| [How to test React Native apps?](#how-to-test-react-native-apps) |\n|190| [How to do logging in React Native?](#how-to-do-logging-in-react-native) |\n|191| [How to debug your React Native?](#how-to-debug-your-react-native) |\n|   | **React supported libraries and Integration** |\n|192| [What is reselect and how it works?](#what-is-reselect-and-how-it-works) |\n|193| [What is Flow?](#what-is-flow) |\n|194| [What is the difference between Flow and PropTypes?](#what-is-the-difference-between-flow-and-proptypes) |\n|195| [How to use font-awesome icons in React?](#how-to-use-font-awesome-icons-in-react) |\n|196| [What is React Dev Tools?](#what-is-react-dev-tools) |\n|197| [Why is DevTools not loading in Chrome for local files?](#why-is-devtools-not-loading-in-chrome-for-local-files) |\n|198| [How to use Polymer in React?](#how-to-use-polymer-in-react) |\n|199| [What are the advantages of React over Vue.js?](#what-are-the-advantages-of-react-over-vuejs) |\n|200| [What is the difference between React and Angular?](#what-is-the-difference-between-react-and-angular) |\n|201| [Why React tab is not showing up in DevTools?](#why-react-tab-is-not-showing-up-in-devtools) |\n|202| [What are styled components?](#what-are-styled-components) |\n|203| [Give an example of Styled Components?](#give-an-example-of-styled-components) |\n|204| [What is Relay?](#what-is-relay) |\n|205| [How to use TypeScript in create-react-app application?](#how-to-use-typescript-in-create-react-app-application) |\n|   | **Miscellaneous** |\n|206| [What are the main features of reselect library?](#what-are-the-main-features-of-reselect-library) |\n|207| [Give an example of reselect usage?](#give-an-example-of-reselect-usage) |\n|209| [Does the statics object work with ES6 classes in React?](#does-the-statics-object-work-with-es6-classes-in-react) |\n|210| [Can Redux only be used with React?](#can-redux-only-be-used-with-react) |\n|211| [Do you need to have a particular build tool to use Redux?](#do-you-need-to-have-a-particular-build-tool-to-use-redux) |\n|212| [How Redux Form initialValues get updated from state?](#how-redux-form-initialvalues-get-updated-from-state) |\n|213| [How React PropTypes allow different type for one prop?](#how-react-proptypes-allow-different-types-for-one-prop) |\n|214| [Can I import an SVG file as react component?](#can-i-import-an-svg-file-as-react-component) |\n|215| [Why are inline ref callbacks or functions not recommended?](#why-are-inline-ref-callbacks-or-functions-not-recommended)|\n|216| [What is render hijacking in React?](#what-is-render-hijacking-in-react)|\n|217| [What are HOC factory implementations?](#what-are-hoc-factory-implementations)|\n|218| [How to pass numbers to React component?](#how-to-pass-numbers-to-react-component)|\n|219| [Do I need to keep all my state into Redux? Should I ever use react internal state?](#do-i-need-to-keep-all-my-state-into-redux-should-i-ever-use-react-internal-state)|\n|220| [What is the purpose of registerServiceWorker in React?](#what-is-the-purpose-of-registerserviceworker-in-react)|\n|221| [What is React memo function?](#what-is-react-memo-function)|\n|222| [What is React lazy function?](#what-is-react-lazy-function)|\n|223| [How to prevent unnecessary updates using setState?](#how-to-prevent-unnecessary-updates-using-setstate)|\n|224| [How do you render Array, Strings and Numbers in React 16 Version?](#how-do-you-render-array-strings-and-numbers-in-react-16-version)|\n|225| [How to use class field declarations syntax in React classes?](#how-to-use-class-field-declarations-syntax-in-react-classes)|\n|226| [What are hooks?](#what-are-hooks)|\n|227| [What are the rules needs to follow for hooks?](#what-are-the-rules-needs-to-follow-for-hooks)|\n|228| [How to ensure hooks followed the rules in your project?](#how-to-ensure-hooks-followed-the-rules-in-your-project)|\n|229| [What are the differences between Flux and Redux?](#what-are-the-differences-between-flux-and-redux)|\n|230| [What are the benefits of React Router V4?](#what-are-the-benefits-of-react-router-v4)|\n|231| [Can you describe about componentDidCatch lifecycle method signature?](#can-you-describe-about-componentdidcatch-lifecycle-method-signature)|\n|232| [In which scenarios error boundaries do not catch errors?](#in-which-scenarios-error-boundaries-do-not-catch-errors)|\n|233| [Why do not you need error boundaries for event handlers?](#why-do-not-you-need-error-boundaries-for-event-handlers)|\n|234| [What is the difference between try catch block and error boundaries?](#what-is-the-difference-between-try-catch-block-and-error-boundaries)|\n|235| [What is the behavior of uncaught errors in react 16?](#what-is-the-behavior-of-uncaught-errors-in-react-16)|\n|236| [What is the proper placement for error boundaries?](#what-is-the-proper-placement-for-error-boundaries)|\n|237| [What is the benefit of component stack trace from error boundary?](#what-is-the-benefit-of-component-stack-trace-from-error-boundary)|\n|238| [What is the required method to be defined for a class component?](#what-is-the-required-method-to-be-defined-for-a-class-component)|\n|239| [What are the possible return types of render method?](#what-are-the-possible-return-types-of-render-method)|\n|240| [What is the main purpose of constructor?](#what-is-the-main-purpose-of-constructor)|\n|241| [Is it mandatory to define constructor for React component?](#is-it-mandatory-to-define-constructor-for-react-component)|\n|242| [What are default props?](#what-are-default-props)|\n|243| [Why should not call setState in componentWillUnmount?](#why-should-not-call-setstate-in-componentwillunmount)|\n|244| [What is the purpose of getDerivedStateFromError?](#what-is-the-purpose-of-getderivedstatefromerror)|\n|245| [What is the methods order when component re-rendered?](#what-is-the-methods-order-when-component-re-rendered)|\n|246| [What are the methods invoked during error handling?](#what-are-the-methods-invoked-during-error-handling)|\n|247| [What is the purpose of displayName class property?](#what-is-the-purpose-of-displayname-class-property)|\n|248| [What is the browser support for react applications?](#what-is-the-browser-support-for-react-applications)|\n|249| [What is the purpose of unmountComponentAtNode method?](#what-is-the-purpose-of-unmountcomponentatnode-method)|\n|250| [What is code-splitting?](#what-is-code-splitting)|\n|251| [What is the benefit of strict mode?](#what-is-the-benefit-of-strict-mode)|\n|252| [What are Keyed Fragments?](#what-are-keyed-fragments)|\n|253| [Does React support all HTML attributes?](#does-react-support-all-html-attributes)|\n|254| [What are the limitations with HOCs?](#what-are-the-limitations-with-hocs)|\n|255| [How to debug forwardRefs in DevTools?](#how-to-debug-forwardrefs-in-devtools)|\n|256| [When component props defaults to true?](#when-component-props-defaults-to-true)|\n|257| [What is NextJS and major features of it?](#what-is-nextjs-and-major-features-of-it)|\n|258| [How do you pass an event handler to a component?](#how-do-you-pass-an-event-handler-to-a-component)|\n|259| [Is it good to use arrow functions in render methods?](#is-it-good-to-use-arrow-functions-in-render-methods)|\n|260| [How to prevent a function from being called multiple times?](#how-to-prevent-a-function-from-being-called-multiple-times)|\n|261| [How JSX prevents Injection Attacks?](#how-jsx-prevents-injection-attacks)|\n|262| [How do you update rendered elements?](#how-do-you-update-rendered-elements)|\n|263| [How do you say that props are read only?](#how-do-you-say-that-props-are-read-only)|\n|264| [How do you say that state updates are merged?](#how-do-you-say-that-state-updates-are-merged)|\n|265| [How do you pass arguments to an event handler?](#how-do-you-pass-arguments-to-an-event-handler)|\n|266| [How to prevent component from rendering?](#how-to-prevent-component-from-rendering)|\n|267| [What are the conditions to safely use the index as a key?](#what-are-the-conditions-to-safely-use-the-index-as-a-key)|\n|268| [Is it keys should be globally unique?](#is-it-keys-should-be-globally-unique)|\n|269| [What is the popular choice for form handling?](#what-is-the-popular-choice-for-form-handling)|\n|270| [What are the advantages of formik over redux form library?](#what-are-the-advantages-of-formik-over-redux-form-library)|\n|271| [Why do you not required to use inheritance?](#why-do-you-not-required-to-use-inheritance)|\n|272| [Can I use web components in react application?](#can-i-use-web-components-in-react-application)|\n|273| [What is dynamic import?](#what-is-dynamic-import)|\n|274| [What are loadable components?](#what-are-loadable-components)|\n|275| [What is suspense component?](#what-is-suspense-component)|\n|276| [What is route based code splitting?](#what-is-route-based-code-splitting)|\n|277| [Give an example on How to use context?](#give-an-example-on-how-to-use-context)|\n|278| [What is the purpose of default value in context?](#what-is-the-purpose-of-default-value-in-context)|\n|279| [How do you use contextType?](#how-do-you-use-contexttype)|\n|280| [What is a consumer?](#what-is-a-consumer)|\n|281| [How do you solve performance corner cases while using context?](#how-do-you-solve-performance-corner-cases-while-using-context)|\n|282| [What is the purpose of forward ref in HOCs?](#what-is-the-purpose-of-forward-ref-in-hocs)|\n|283| [Is it ref argument available for all functions or class components?](#is-it-ref-argument-available-for-all-functions-or-class-components)|\n|284| [Why do you need additional care for component libraries while using forward refs?](#why-do-you-need-additional-care-for-component-libraries-while-using-forward-refs)|\n|285| [How to create react class components without ES6?](#how-to-create-react-class-components-without-es6)|\n|286| [Is it possible to use react without JSX?](#is-it-possible-to-use-react-without-jsx)|\n|287| [What is diffing algorithm?](#what-is-diffing-algorithm)|\n|288| [What are the rules covered by diffing algorithm?](#what-are-the-rules-covered-by-diffing-algorithm)|\n|289| [When do you need to use refs?](#when-do-you-need-to-use-refs)|\n|290| [Is it prop must be named as render for render props?](#is-it-prop-must-be-named-as-render-for-render-props)|\n|291| [What are the problems of using render props with pure components?](#what-are-the-problems-of-using-render-props-with-pure-components)|\n|292| [How do you create HOC using render props?](#how-do-you-create-hoc-using-render-props)|\n|293| [What is windowing technique?](#what-is-windowing-technique)|\n|294| [How do you print falsy values in JSX?](#how-do-you-print-falsy-values-in-jsx)|\n|295| [What is the typical use case of portals?](#what-is-the-typical-use-case-of-portals?)|\n|296| [How do you set default value for uncontrolled component?](#how-do-you-set-default-value-for-uncontrolled-component)|\n|297| [What is your favorite React stack?](#what-is-your-favorite-react-stack)|\n|298| [What is the difference between Real DOM and Virtual DOM?](#what-is-the-difference-between-real-dom-and-virtual-dom)|\n|299| [How to add Bootstrap to a react application?](#how-to-add-bootstrap-to-a-react-application)|\n|300| [Can you list down top websites or applications using react as front end framework?](#can-you-list-down-top-websites-or-applications-using-react-as-front-end-framework)|\n|301| [Is it recommended to use CSS In JS technique in React?](#is-it-recommended-to-use-css-in-js-technique-in-react)|\n|302| [Do I need to rewrite all my class components with hooks?](#do-i-need-to-rewrite-all-my-class-components-with-hooks)|\n|303| [How to fetch data with React Hooks?](#how-to-fetch-data-with-react-hooks)|\n|304| [Is Hooks cover all use cases for classes?](#is-hooks-cover-all-use-cases-for-classes)|\n|305| [What is the stable release for hooks support?](#what-is-the-stable-release-for-hooks-support)|\n|306| [Why do we use array destructuring (square brackets notation) in useState?](#why-do-we-use-array-destructuring-square-brackets-notation-in-usestate)|\n|307| [What are the sources used for introducing hooks?](#what-are-the-sources-used-for-introducing-hooks)|\n|308| [How do you access imperative API of web components?](#how-do-you-access-imperative-api-of-web-components)|\n|309| [What is formik?](#what-is-formik)|\n|310| [What are typical middleware choices for handling asynchronous calls in Redux?](#what-are-typical-middleware-choices-for-handling-asynchronous-calls-in-redux)|\n|311| [Do browsers understand JSX code?](#do-browsers-understand-jsx-code)|\n|312| [Describe about data flow in react?](#describe-about-data-flow-in-react)|\n|313| [What is react scripts?](#what-is-react-scripts)|\n|314| [What are the features of create react app?](#what-are-the-features-of-create-react-app)|\n|315| [What is the purpose of renderToNodeStream method?](#what-is-the-purpose-of-rendertonodestream-method)|\n|316| [What is MobX?](#what-is-mobx)|\n|317| [What are the differences between Redux and MobX?](#what-are-the-differences-between-redux-and-mobx)|\n|318| [Should I learn ES6 before learning ReactJS?](#should-i-learn-es6-before-learning-reactjs)|\n|319| [What is Concurrent Rendering?](#what-is-concurrent-rendering)|\n|320| [What is the difference between async mode and concurrent mode?](#what-is-the-difference-between-async-mode-and-concurrent-mode)|\n|321| [Can I use javascript urls in react16.9?](#can-i-use-javascript-urls-in-react169)|\n|322| [What is the purpose of eslint plugin for hooks?](#what-is-the-purpose-of-eslint-plugin-for-hooks)|\n|323| [What is the difference between Imperative and Declarative in React?](#what-is-the-difference-between-imperative-and-declarative-in-react)|\n|324| [What are the benefits of using typescript with reactjs?](#what-are-the-benefits-of-using-typescript-with-reactjs)|\n|325| [How do you make sure that user remains authenticated on page refresh while using Context API State Management?](#how-do-you-make-sure-that-user-remains-authenticated-on-page-refresh-while-using-context-api-state-management)|\n|326| [What are the benefits of new JSX transform?](#what-are-the-benefits-of-new-jsx-transform)|\n|327| [How does new JSX transform different from old transform?](#how-does-new-jsx-transform-different-from-old-transform)|\n|328| [How do you get redux scaffolding using create-react-app?](#how-do-you-get-redux-scaffolding-using-create-react-app)|\n|329| [What are React Server components?](#what-are-react-server-components)\n\n## Core React\n\n\n    \n1. ### React가 무엇인가요?\n\n    ![image](https://user-images.githubusercontent.com/54893898/111304400-09f37300-8699-11eb-95a0-5aab08dd7cfc.png)\n\n    React는 단일 페이지 애플리케이션을위한 사용자 인터페이스를 구축하는데 사용되는 **JavaScript 프론트엔드 오픈소스 라이브러리**입니다. React는 웹 페이지와 모바일 애플리케이션의 뷰 레이어를 처리하는데 사용됩니다. React는 페이스북의 소프트웨어 엔지니어인 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어졌습니다. React는 2011년에 페이스북의 뉴스 피드에 처음으로 배포되었고, 2012년에는 인스타그램에 배포되었습니다. \n    \n   **[⬆ Back to Top](#table-of-contents)**\n\n2. ### React의 가장 주요한 특징은 뭘까요?\n\n    React의 가장 큰 특징들:\n\n    * React는 조작의 비용이 많이드는 RealDOM 대신에 **VirtualDOM**을 사용합니다.\n    * **서버 사이드 렌더링**을 지원합니다.\n    * 단방향 데이터 흐름 또는 데이터 바인딩을 따릅니다.\n    * 뷰를 개발하기 위해서 **재사용가능하고/구성가능한** UI 컴포넌트를 사용합니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n\n    \n3. ### JSX가 뭘까요?\n\n    *JSX*는 ECMAScript에 대한 XML 유사 확장 구문입니다. (약어는 *JavaScript XML*을 나타냅니다.). 기본적으로 우리에게 JavaScript `React.createElement()` 함수에 대한 *syntactic sugar*을 제공하여, HTML과 같은 템플릿 구문과 함께 JavaScript의 표현력을 제공합니다. \n\n    아래 예시에서는 `\u003ch1\u003e` 태그안의 텍스트는 JavaScript 함수로써 렌더링함수에게 반환이됩니다.\n\n    ```jsx harmony\n    class App extends React.Component {\n      render() {\n        return(\n          \u003cdiv\u003e\n            \u003ch1\u003e{'Welcome to React world!'}\u003c/h1\u003e\n          \u003c/div\u003e\n        )\n      }\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n4. ### Element와 Component의 차이점은 무엇일까요?\n\n    *Element*는 DOM 노드 또는 다른 Component들과 관련하여 화면에 표시 할 내용을 나타내는 일반 개체입니다. *Element*는 또 다른 *Element*를 그들의 props에 포함시킬 수 있습니다. React Element를 만드는 것은 저렴합니다. 한 번 Element가 생성되면 절대 변경되지 않습니다.\n\n    React Element 객체 표현은 다음과 같습니다:\n\n    ```javascript\n    const element = React.createElement(\n      'div',\n      {id: 'login-btn'},\n      'Login'\n    )\n    ```\n\n    위의 `React.createElement ()` 함수는 객체를 반환합니다:\n\n    ```\n    {\n      type: 'div',\n      props: {\n        children: 'Login',\n        id: 'login-btn'\n      }\n    }\n    ```\n\n    그리고 `ReactDOM.render()`를 사용해서 DOM에 최종적으로 렌더링합니다:\n\n    ```html\n    \u003cdiv id='login-btn'\u003eLogin\u003c/div\u003e\n    ```\n\n    반면에 **component**는 여러 방향으로 선언될 수 있습니다. **component**는 `render()` method와 함께 class가 될 수 있습니다. 반대로 간단한 경우에는 **component**는 function로 정의될 수 있습니다. 두 경우 전부 props를 input으로 사용할 수 있고 출력으로 JSX tree를 반환합니다:\n\n    ```javascript\n    const Button = ({ onLogin }) =\u003e\n      \u003cdiv id={'login-btn'} onClick={onLogin}\u003eLogin\u003c/div\u003e\n    ```\n\n    그 다음 JSX는`React.createElement ()` 함수 트리로 변환됩니다:\n\n    ```javascript\n    const Button = ({ onLogin }) =\u003e React.createElement(\n      'div',\n      { id: 'login-btn', onClick: onLogin },\n      'Login'\n    )\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n5. ### React에서 Component를 만드는 방법은 무엇일까요?\n\n    component를 만드는 두 가지 방법이 있습니다.\n\n    1. **Function Components(함수형 컴포넌트):** component를 만드는 간단한 방식입니다. 함수형 컴포넌트는 props 객체를 첫 번째 매개 변수로 받아들이고 React elements를 반환하는 순수한 JavaScript 함수입니다.\n\n        ```jsx harmony\n        function Greeting({ message }) {\n          return \u003ch1\u003e{`Hello, ${message}`}\u003c/h1\u003e\n\n        }\n        ```\n\n    2. **Class Components(클래스 컴포넌트):** ES6 class를 사용해서 component를 정의할 수 있습니다. 다음과 같이 사용할 수 있습니다:\n\n        ```jsx harmony\n        class Greeting extends React.Component {\n          render() {\n            return \u003ch1\u003e{`Hello, ${this.props.message}`}\u003c/h1\u003e\n          }\n        }\n        ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n6. ### 함수형 컴포넌트 대신에 클래스 컴포넌트를 사용하는 때는 언제일까요?\n\n    만약 *state(상태) or lifecycle(라이프사이클) 함수들*이 컴포넌트에 필요하다면, 함수형 컴포넌트 대신에 클래스 컴포넌트를 사용해야 합니다.\n    *하지만, Hooks(state를 사용할 수 있습니다.), lifecycle 함수들, 그리고 클래스 컴포넌트에서만 가능했던 다른 기능들이 React 16.8 버전부터 함수형 컴포넌트에서 사용 가능해졌습니다.*\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n7. ### Pure Components는 무엇일까요?\n\n    *`React.PureComponent`* 는 *`React.Component`* 에서 `shouldComponentUpdate()` 메소드를 제공해주는 것 빼고는 *`React.Component`* 와 정확히 같습니다. props와 state가 바뀔 때, *PureComponent* 는 state와 props 둘 다 얕은 비교(shallow comparison)을 수행합니다. 반면에 *Component*는 현재 props와 state를 다음 항목과 비교하지 않습니다. 그래서 component는 `shouldComponentUpdate`가 불려질 때마다 다시 렌더링(re-render)됩니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n8. ### React에서 state는 무엇일까요?\n\n    component의 *State* 는 component의 수명 동안 변경될 수 있는 일부 정보를 담고있는 객체입니다. 그래서 우리는 state를 가능한 한 단순하게 만들고 stateful component의 개수를 최소화해야합니다.\n\n    메세지 state를 가지는 user component를 만들어봅시다.\n\n    ```jsx harmony\n    class User extends React.Component {\n      constructor(props) {\n        super(props)\n\n        this.state = {\n          message: 'Welcome to React world'\n        }\n      }\n\n      render() {\n        return (\n          \u003cdiv\u003e\n            \u003ch1\u003e{this.state.message}\u003c/h1\u003e\n          \u003c/div\u003e\n        )\n      }\n    }\n    ```\n\n    State는 props와 비슷하지만, state는 private하고 완전히 component에 의해 조종됩니다. 즉, State는 component가 소유하고 설정하는 component 이외에는 접근할 수 없습니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n9. ### React에서 props는 무엇일까요?\n\n    *Props* 는 component에 대한 입력값입니다. props에는 HTML 태그 속성과 비슷한 명명\u001d 규칙을\u001d 사용해서 component 생성 시 전달되는 객체들 또는 단일 값들입니다. props는 부모 component에서 자식 component로 전달됩니다.\n\n    React props의 주요 목적은 다음과 같은 component 기능을 제공하는 것입니다.\n\n    1. 맞춤 데이터를 자신의 component에 전달합니다.\n    2. state 변경을 일으킵니다.\n    3. component의 `render()` 메소드를 안에 `this.props.reactProp` 구문을 사용합니다.\n\n    예를 들어, `reactProp`특성을 사용해서 element를 만들어봅시다:\n\n    ```jsx harmony\n    \u003cElement reactProp={'1'} /\u003e\n    ```\n\n    이 `reactProp`이라는 이름은 (또는 우리가 생각하는 무엇이든지) React 라이브러리를 사용해서 만들어져 모든 component에 이미 존재하는 React의 native props 객체에 연결된 속성이 됩니다.\n\n    ```\n    props.reactProp\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n10. ### state와 props의 차이는 무엇일까요?\n\n    *props* 와 *state* 둘 다 일반 JavaScript 객체입니다. 둘 다 출력에 영향을 주는 정보를 가지고 있지만, component와 관련해서 기능적으로 다릅니다. Props는 함수 매개변수와 비슷하게 component에 전달되는 반면, State는 함수안에서 선언되는 변수들과 비슷하게 component 안에서 관리됩니다.\n    \n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n11. ### 왜 state는 직접 바꾸면 안될까요?\n\n    If you try to update state directly then it won't re-render the component.\n\n    만약에 state를 직접적으로 바꾸려고 한다면, component가 다시 렌더링되지 않습니다.\n\n    ```javascript\n    //Wrong\n    this.state.message = 'Hello world'\n    ```\n\n    대신에 `setState()` 메소드를 사용합니다. `setState()`는 component의 state 객체 업데이트를 스케줄합니다. state가 변할 때, component는 다시 렌더링해서 반응합니다.\n\n    ```javascript\n    //Correct\n    this.setState({ message: 'Hello World' })\n    ```\n\n    **Note:** *constructor* 또는 javascript의 최신 클래스 필드 선언 문법을 사용해서 state 객체에 직접적으로 할당할 수 있습니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n12. ### setState()의 인자로서 콜백함수의 목적은 무엇일까요?\n\n    콜백 함수는 setState 함수가 완료되고 component가 렌더링 될 때 발생합니다. `setState()` 함수는 **비동기** 함수이므로 모든 post action에 콜백 함수가 사용됩니다.\n\n    **Note:** 콜백 함수보다는 라이프사이클 메소드를 사용하는 것이 더 좋습니다.\n\n    ```javascript\n    setState({ name: '현수' }, () =\u003e console.log('name state가 업데이트되고 component가 렌더링 되었습니다.'))\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n13. ### HTML와 React간에 이벤트를 다루는 방법의 차이는 무엇일까요?\n    아래는 HTML와 React가 이벤트를 다루는 주요한 차이점들입니다.\n\n    1. HTML에서는, 이벤트 이름이 *소문자* 여야 합니다:\n\n        ```html\n        \u003cbutton onclick='activateLasers()'\u003e\n        ```\n\n       반면에 React에서는 *낙타표기법* 을 따릅니다:\n\n        ```jsx harmony\n        \u003cbutton onClick={activateLasers}\u003e\n        ```\n\n    2. HTML에서는, 기본 동작을 방지하기 위해서 `false`를 리턴할 수 있습니다:\n\n        ```html\n        \u003ca href='#' onclick='console.log(\"링크가 클릭됐습니다.\"); return false;' /\u003e\n        ```\n\n       반면에 React에서는 명시적으로 `preventDefault()`를 불러야만 합니다:\n\n        ```javascript\n        function handleClick(event) {\n          event.preventDefault()\n          console.log('링크가 클릭됐습니다.')\n        }\n        ```\n\n    3. HTML에서는, `()`를 사용해서 함수를 실행시켜야 합니다.\n       반면에 React에서는 `()` 기호를 함수 뒤에 붙일 필요가 없습니다. (1번에서 activateLasers 함수를 참고하세요)\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n14. ### JSX 콜백안에 메소드나 이벤트 핸들러를 어떻게 bind할 수 있을까요?\n\n    이 문제에는 세 가지 방법이 있습니다.\n\n    1.  **Constructor에서 적용하기:** JavaScript class 안에서, 메소드는 기본적으로 bind 되지 않습니다. 클래스 메소드로 정의된 React 이벤트 핸들러 역시, 기본적으로 bind 되지않습니다. 일반적으로 메소드나 이벤트 핸들러는 constructor안에서 bind됩니다.\n\n        ```javascript\n        class Component extends React.Component {\n          constructor(props) {\n            super(props)\n            this.handleClick = this.handleClick.bind(this)\n          }\n\n          handleClick() {\n            // ...\n          }\n        }\n        ```\n\n    2. **Public class fields syntax:** 만약 bind 접근법을 사용하기 싫다면, *public class fields syntax* 콜백에 정확하게 bind 할 때 사용될 수 있습니다.\n\n        ```jsx harmony\n        handleClick = () =\u003e {\n          console.log('this is:', this)\n        }\n        ```\n\n        ```jsx harmony\n        \u003cbutton onClick={this.handleClick}\u003e\n          {'나를 눌러요~'}\n        \u003c/button\u003e\n        ```\n\n    3. **콜백에서 화살표 함수 사용하기:** 콜백에서 바로 *화살표 함수*를 사용할 수 있습니다.\n\n        ```jsx harmony\n        \u003cbutton onClick={(event) =\u003e this.handleClick(event)}\u003e\n          {'나를 눌러요~'}\n        \u003c/button\u003e\n        ```\n\n    **Note:** 콜백이 자식 component에 prop을 넘긴다면, 자식 component들은 아마 추가로 다시 렌더링 될 수도 있습니다. 이 경우, 성능을 고려하여 `.bind()` 또는 *public class fields syntax* 접근법이 더 좋습니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n15. ### 콜백이나 이벤트 핸들러에 매개변수를 어떻게 넘길 수 있을까요?\n\n    *화살표 함수* 를 사용하여 *이벤트 핸들러* 를 감싸고 매개변수를 넘길 수 있습니다:\n\n    ```jsx harmony\n    \u003cbutton onClick={() =\u003e this.handleClick(id)} /\u003e\n    ```\n\n    *화살표 함수* 를 사용하면 `.bind`를 호출하는 것과 같습니다:\n\n    ```jsx harmony\n    \u003cbutton onClick={this.handleClick.bind(this, id)} /\u003e\n    ```\n    이 두 가지 접근 방식 외에도 *화살표 함수* 로 정의 된 함수에 인자를 전달할 수도 있습니다.\n    ```jsx harmony\n    \u003cbutton onClick={this.handleClick(id)} /\u003e\n    handleClick = (id) =\u003e () =\u003e {\n        console.log(\"안녕, 너의 티켓 번호는\", id)\n    };\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n16. ### 리액트에서 synthetic 이벤트는 무엇일까요?\n\n    `SyntheticEvent`는 브라우저의 기본 이벤트를 둘러싼 크로스 브라우저 래퍼입니다. API는 이벤트가 모든 브라우저에서 동일하게 작동한다는 점을 제외하면`stopPropagation ()`및`preventDefault ()`를 포함한 브라우저의 기본 이벤트와 동일합니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n17. ### inline 조건부 표현식은 무엇일까요?\n\n    JS에서 조건부 렌더링을 위해서 사용하는 *if문* 이나 *삼항표현식*을 사용할 수 있습니다. 이러한 접근 방식 외에JSX에 표현식을 중괄호로 묶은 다음 JS 논리 연산자 `\u0026\u0026` 를 사용하여 포함 할 수도 있습니다. \n    \n\n    ```jsx harmony\n    \u003ch1\u003eHello!\u003c/h1\u003e\n    {\n        messages.length \u003e 0 \u0026\u0026 !isLogin?\n          \u003ch2\u003e\n              {messages.length}만큼의 읽지 않은 메세지가 있습니다.\n          \u003c/h2\u003e\n          :\n          \u003ch2\u003e\n              읽지 않은 메세지가 없습니다.\n          \u003c/h2\u003e\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n18. ### \"key\" props은 무엇이고, 배열에서 사용했을 때 이점은 무엇일까요?\n\n    `key`는 배열의 요소를 만들 때 **반드시** 포함해야 하는 특별한 문자열 특성입니다. *Key* prop은 React에서 배열 아이템들이 어떤 게 삭제됐는지, 변했는지, 추가됐는지를 식별하는데 도움을 줍니다.\n\n    대부분의 경우 ID를 *key*로 사용합니다: \n\n    ```jsx harmony\n    const todoItems = todos.map((todo) =\u003e\n      \u003cli key={todo.id}\u003e\n        {todo.text}\n      \u003c/li\u003e\n    )\n    ```\n\n    렌더링 된 아이템들에 안정된 ID 값들이 없을 때, 마지막 수단으로 *index*를 *key* 값으로 사용할 수 있습니다:\n\n    ```jsx harmony\n    const todoItems = todos.map((todo, index) =\u003e\n      \u003cli key={index}\u003e\n        {todo.text}\n      \u003c/li\u003e\n    )\n    ```\n\n    **Note:**\n\n    1. 만약 배열 아이템들의 순서가 바뀐다면 *key*를 *index*로 사용하는 것은 **추천하지 않습니다.** 성능에 부정적으로 영향을 줄 수 있고, component state에 문제를 야기할 수 있습니다.\n    2. 만약 별도의 component로서 리스트 아이템을 추출한다면, `li` 태그 대신에 `keys`를 리스트 component에 적용합니다.\n    3. 만약 list에 `key` prop 이 없으면 경고 메세지가 뜰 겁니다. \n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n19. ### refs의 사용처는 무엇일까요?\n\n    *ref* 는 element의 참조(reference)를 반환하는데 사용됩니다. 대부분의 경우 *사용을 피해야 하지만*, DOM 요소 또는 component의 요소에 직접 접근을 해야 될 때 사용이 될 수 있습니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n20. ### refs는 어떻게 사용할까요?\n\n    두 개의 접근 방식이 있습니다.\n    1. 첫번째는 최근에 추가된 접근법입니다. *Refs* 는 `React.createdRef()` 메소드를 사용해서 만들어지고, *ref* 특성을 통해 React 요소에 추가됩니다. component를 통해서 *refs* 를 사용하기 위해서는, *ref*를 constructor 안의 인스턴스 특성에 할당하기만 하면 됩니다.\n\n        ```jsx harmony\n        class MyComponent extends React.Component {\n          constructor(props) {\n            super(props)\n            this.myRef = React.createRef()\n          }\n          render() {\n            return \u003cdiv ref={this.myRef} /\u003e\n          }\n        }\n        ```\n    2. React 버전에 상관없이 *ref* 콜백 함수를 사용할 수 있습니다. 예를 들어, 검색창 component의 입력 요소는 다음과 같이 접근할 수 있습니다.\n        ```jsx harmony\n        class SearchBar extends Component {\n           constructor(props) {\n              super(props);\n              this.txtSearch = null;\n              this.state = { term: '' };\n              this.setInputSearchRef = e =\u003e {\n                 this.txtSearch = e;\n              }\n           }\n           onInputChange(event) {\n              this.setState({ term: this.txtSearch.value });\n           }\n           render() {\n              return (\n                 \u003cinput\n                    value={this.state.term}\n                    onChange={this.onInputChange.bind(this)}\n                    ref={this.setInputSearchRef} /\u003e\n              );\n           }\n        }\n        ```\n\n    그리고 *refs* 를 **closures**를 사용해서 함수형 component에 사용할 수 있습니다.\n    **Note**: 추천하진 않지만, inline ref 콜백함수를 사용할 수 있습니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n21. ### forward refs는 무엇일까요?\n\n    *Ref forwarding* 은 어떤 component가 받은 *ref*를 가져와서 자식 component에게 전달할 수 있는 기능입니다.\n\n    ```jsx harmony\n    const ButtonElement = React.forwardRef((props, ref) =\u003e (\n      \u003cbutton ref={ref} className=\"CustomButton\"\u003e\n        {props.children}\n      \u003c/button\u003e\n    ));\n\n    // Create ref to the DOM button:\n    const ref = React.createRef();\n    \u003cButtonElement ref={ref}\u003e{'Forward Ref'}\u003c/ButtonElement\u003e\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n22. ### callback refs와 findDOMNode() 중에서 선호되는 옵션은 무엇일까요?\n\n    `findDOMNode()` API를 사용하는 것보다 *callback refs*를 사용하는 것이 선호됩니다. 왜냐하면 `findDOMNode()`는 향후에 React의 특정 향상을 방지하기 때문입니다.\n\n    `findDOMNode`를 사용하는 **레거시** 접근법입니다:\n\n    ```javascript\n    class MyComponent extends Component {\n      componentDidMount() {\n        findDOMNode(this).scrollIntoView()\n      }\n\n      render() {\n        return \u003cdiv /\u003e\n      }\n    }\n    ```\n\n    추천되는 접근법입니다:\n\n    ```javascript\n    class MyComponent extends Component {\n      constructor(props){\n        super(props);\n        this.node = createRef();\n      }\n      componentDidMount() {\n        this.node.current.scrollIntoView();\n      }\n\n      render() {\n        return \u003cdiv ref={this.node} /\u003e\n      }\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n23. ### String Refs가 legacy인 이유는 무엇일까요?\n\n    #### React v16에서 제거되어서 번역이 조금 이상할 수 있습니다.\n\n    이전에 React로 작업했다면`ref` 속성이`ref = { 'textInput'}`과 같은 문자열이고 DOM 노드가`this.refs.textInput`으로 액세스되는 이전 API에 익숙 할 것입니다. *문자열 참조에는 다음과 같은 문제가 있으며*  레거시로 간주되기 때문에 권장하지 않습니다. 문자열 참조는 **React v16에서 제거되었습니다**.\n\n    1. 그들은 *현재 실행중인 구성 요소를 추적하도록 React를 강제합니다*. 이것은 반응 모듈을 상태 저장하기 때문에 문제가되며, 따라서 반응 모듈이 번들에 복제 될 때 이상한 오류가 발생합니다.\n    2. 그것들은 *구성 할 수 없습니다* — 라이브러리가 전달 된 자식에 ref를 넣는 경우, 사용자는 그것에 다른 ref를 넣을 수 없습니다. 콜백 참조는 완벽하게 구성 할 수 있습니다.\n    3. Flow와 같은 *정적 분석* 에서는 작동하지 않습니다. Flow는 프레임 워크가 문자열 ref가`this.refs`에 나타나도록 만드는 마법과 그 유형 (다를 수 있음)을 추측 할 수 없습니다. 콜백 참조는 정적 분석에 더 친숙합니다.\n    4. 대부분이 기대하는 \"렌더 콜백\" 패턴 (예 : \u003cDataGrid renderRow = {this.renderRow} /\u003e 처럼 작동하지 않습니다.\n\n       ```jsx harmony\n       class MyComponent extends Component {\n         renderRow = (index) =\u003e {\n           // This won't work. Ref will get attached to DataTable rather than MyComponent:\n           return \u003cinput ref={'input-' + index} /\u003e;\n\n           // This would work though! Callback refs are awesome.\n           return \u003cinput ref={input =\u003e this['input-' + index] = input} /\u003e;\n         }\n\n         render() {\n           return \u003cDataTable data={this.props.data} renderRow={this.renderRow} /\u003e\n         }\n       }\n       ```\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n24. ### Virtual DOM이 무엇일까요?\n\n    *Virtual DOM*은 *Real DOM*의 메모리 내에서 작동하는 것입니다. UI적 표현은 메모리안에 유지되고, \"실제\" DOM과 동기화(synced)가 됩니다. 호출되는 렌더링 함수와 화면에 요소를 표시하는 사이에 발생하는 단계입니다. 이 전체 프로세스를 *조정(reconciliation)* 이라고합니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n25. ### Virtual DOM은 어떻게 동작할까요?\n\n    *Virtual DOM*은 세 가지의 단계로 동작합니다.\n\n    1. 기본 데이터가 변경 될 때마다 전체 UI가 Virtual DOM으로 다시 렌더링됩니다.\n\n        ![vdom](images/vdom1.png)\n\n    2. 그런 다음 이전 DOM과 새 DOM간의 차이가 계산됩니다.\n\n        ![vdom2](images/vdom2.png)\n\n    3. 계산이 완료되면 실제 DOM은 실제로 변경된 것만 업데이트됩니다.\n\n        ![vdom3](images/vdom3.png)\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n26. ### Shadow DOM과 Virtual DOM의 차이점은 무엇일까요?\n\n    *Shadow DOM*은 주로 *web component*의 범위 변수들과 CSS를 위해 설계 된 브라우저 기술입니다. *Virtual DOM*은 브라우저의 API 위에 JavaScript의 라이브러리가 구현 한 개념입니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n27. ### React Fiber가 무엇일까요?\n\n    Fiber는 React v16의 새로운 *조정* 엔진 또는 핵심 알고리즘의 재 구현입니다. React Fiber의 목표는 애니메이션, 레이아웃, 제스처, 작업 일시 중지, 중단 또는 재사용 기능과 같은 영역에 대한 적합성을 높이고 다양한 유형의 업데이트에 우선 순위를 할당하는 것입니다. 그리고 새로운 동시성 기초 요소입니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n28. ### React Fiber의 주요 목적은 무엇일까요?\n\n    The goal of *React Fiber* is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is **incremental rendering**: the ability to split rendering work into chunks and spread it out over multiple frames.\n    *React Fiber*의 목표는 애니메이션, 레이아웃 및 제스처와 같은 영역에 대한 적합성을 높이는 것입니다. 헤드 라인 기능은 **증분 렌더링** : 렌더링 작업을 청크로 분할하고 여러 프레임에 분산시키는 기능입니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n29. ### controlled component는 무엇일까요?\n\n    후속 사용자 입력에서 양식 내의 입력 요소를 제어하는 ​​구성 요소를 **Controlled Component**라고합니다. 즉, 모든 state 변형에는 연결된 handler 함수가 있습니다.\n\n    예를 들어, 모든 문자를 대문자로 쓰기 위해서는, 아래와 같이 handleChange를 사용합니다.\n\n    ```javascript\n    handleChange(event) {\n      this.setState({value: event.target.value.toUpperCase()})\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n30. ### uncontrolled components는 무엇일까요?\n\n    **Uncontrolled Components**는 자체 state를 내부적으로 저장하는 구성 요소이며, 필요할 때 현재 값을 찾기 위해 ref를 사용하여 DOM을 쿼리합니다. 이것은 전통적인 HTML과 좀 더 비슷합니다.\n\n    아래 UserProfile 컴포넌트에서 `name` input은 ref를 사용하여 접근됩니다\n\n    ```jsx harmony\n    class UserProfile extends React.Component {\n      constructor(props) {\n        super(props)\n        this.handleSubmit = this.handleSubmit.bind(this)\n        this.input = React.createRef()\n      }\n\n      handleSubmit(event) {\n        alert('A name was submitted: ' + this.input.current.value)\n        event.preventDefault()\n      }\n\n      render() {\n        return (\n          \u003cform onSubmit={this.handleSubmit}\u003e\n            \u003clabel\u003e\n              {'Name:'}\n              \u003cinput type=\"text\" ref={this.input} /\u003e\n            \u003c/label\u003e\n            \u003cinput type=\"submit\" value=\"Submit\" /\u003e\n          \u003c/form\u003e\n        );\n      }\n    }\n    ```\n\n    대부분의 경우 controlled components를 사용하여 form을 구현하는 것이 좋습니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n31. ### createElement과 cloneElement의 차이점은 무엇일까요?\n\n    JSX element는 UI의 객체 표현에 사용될 React element를 생성하기 위해 `React.createElement()` 함수로 트랜스 파일(특정 소스 코드를 다른 소스 코드로 변환 시키는 과정)됩니다. 반면 `cloneElement` 는 element를 복제하고 새 props을 전달하는 데 사용됩니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n32. ### React에서 Lifting State Up은 무엇일까요?\n\n    여러 component가 동일한 변경 데이터를 공유해야하는 경우 *공유 상태를 가장 가까운 공통 조상으로 높이는(lift the shared state up)* 것이 좋습니다. 즉, 두 개의 하위 component가 상위에서 동일한 데이터를 공유하는 경우 자식 component에서 state를 유지하는 것보다 state를 부모로 이동시키는 것을 의미합니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n33. ### component lifecycle의 단계들의 차이점은 무엇일까요?\n\n    component 수명주기에는 세 가지 고유한 수명주기 단계가 있습니다.\n\n    1. **Mounting:** component가 브라우저 DOM에 mount할 준비가 되었습니다. 이 단계에서는 `constructor ()`,`getDerivedStateFromProps ()`,`render ()` 및 `componentDidMount ()` 수명주기 메소드의 초기화를 다룹니다.\n\n    2. **Updating:** 이 단계에서 component는 두 가지 방법으로 업데이트됩니다. 새 props를 보내고 `setState ()` 또는 `forceUpdate ()`에서 state를 업데이트합니다. 이 단계에서는 `getDerivedStateFromProps ()`,`shouldComponentUpdate ()`,`render ()`,`getSnapshotBeforeUpdate ()` 및 `componentDidUpdate ()`수명주기 메소드를 다룹니다.\n\n    3. **Unmounting:** 이 마지막 단계에서는 component가 필요하지 않으며 브라우저 DOM에서 unmount됩니다. 이 단계에는`componentWillUnmount ()` 라이프 사이클 메소드가 포함됩니다.\n\n    React는 DOM에 변경 사항을 적용 할 때 내부적으로 단계 개념이 있다는 점을 언급 할 가치가 있습니다. 다음과 같이 구분됩니다.\n\n    1. **Render** component는 부작용없이 렌더링됩니다. 이는 Pure component에 적용되며이 단계에서 React는 렌더링을 일시 중지, 중단 또는 다시 시작할 수 있습니다.\n\n    2. **Pre-commit** component가 DOM에 변경 사항을 실제로 적용하기 전에 React가`getSnapshotBeforeUpdate ()`를 통해 DOM에서 읽을 수 있는 시간이 있습니다.\n\n    3. **Commit** React는 DOM과 함께 작동하며 최종 수명주기를 각각 mount할 때 `componentDidMount ()`, 업데이트 할 때 `componentDidUpdate ()`, unmount할 때 `componentWillUnmount ()`를 실행합니다.\n\n    React 16.3 버전 이후 (or an [interactive version](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/))\n\n    ![phases 16.3+](images/phases16.3.jpg)\n\n    React 16.3 버전 이전\n\n    ![phases 16.2](images/phases.png)\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n34. ### component의 각 라이프사이클 단계들의 차이점은 무엇일까요?\n\n    React 16.3 버전 이전\n\n    - **componentWillMount:** 렌더링 전에 실행되며 루트 component의 앱 수준 구성에 사용됩니다.\n    - **componentDidMount:** 첫 번째 렌더링 후 실행되며 여기에서 모든 AJAX 요청, DOM 또는 state 업데이트 및 설정 이벤트 리스너가 발생해야 합니다.\n    - **componentWillReceiveProps:** 특정 props가 상태 전환을 트리거하기 위해 업데이트 될 때 실행됩니다.\n    - **shouldComponentUpdate:** component를 업데이트할지 여부를 결정합니다. 기본적으로 'true'를 반환합니다. state 또는 props가 업데이트 된 후 component를 렌더링 할 필요가 없다고 확신하는 경우 false 값을 반환 할 수 있습니다. component가 새 props를 받을 경우 다시 렌더링되는 것을 방지 할 수 있으므로 성능을 향상시킬 수 있는 좋은 단계입니다.\n    - **componentWillUpdate:** true를 반환하는`shouldComponentUpdate ()`에 의해 확인 된 props 및 state 변경이있을 때 구성 요소를 다시 렌더링하기 전에 실행됩니다.\n    - **componentDidUpdate:** 대부분 prop 또는 state 변경에 대한 응답으로 DOM을 업데이트하는 데 사용됩니다.\n    - **componentWillUnmount:** 나가는 네트워크 요청을 취소하거나 component와 관련된 모든 이벤트 리스너를 제거하는 데 사용됩니다.\n\n    React 16.3+\n\n    - **getDerivedStateFromProps:** `render ()`를 호출하기 직전에 호출되며 *모든* 렌더링시 호출됩��다. 이것은 파생 된 상태가 필요한 드문 사용 사례에 존재합니다. [파생 상태가 필요한 경우] (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html)를 읽을 가치가 있습니다.\n    - **componentDidMount:** 첫 번째 렌더링 후 실행되며 모든 AJAX 요청, DOM 또는 state 업데이트 및 설정 이벤트 리스너가 발생해야합니다.\n    - **shouldComponentUpdate:** component를 업데이트할지 여부를 결정합니다. 기본적으로 'true'를 반환합니다. state 또는 props가 업데이트 된 후 component를 렌더링 할 필요가 없다고 확신하는 경우 false 값을 반환 할 수 있습니다. 컴포넌트가 새 props를 받을 경우 다시 렌더링되는 것을 방지 할 수 있으므로 성능을 향상시킬 수 있는 좋은 단계입니다.\n    - **getSnapshotBeforeUpdate:** 렌더링 된 출력이 DOM에 커밋되기 직전에 실행됩니다. 이것에 의해 반환 된 모든 값은`componentDidUpdate ()`로 전달됩니다. 이는 DOM에서 정보, 즉 스크롤 위치를 캡처하는 데 유용합니다.\n    - **componentDidUpdate:** 대부분 prop 또는 state 변경에 대한 응답으로 DOM을 업데이트하는 데 사용됩니다. `shouldComponentUpdate ()`가`false`를 반환하면 실행되지 않습니다.\n    - **componentWillUnmount:** 나가는 네트워크 요청을 취소하거나 component와 관련된 모든 이벤트 리스너를 제거하는 데 사용됩니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n35. ### Higher-Order Component는 무엇일까요?\n\n    *higher-order component* (*HOC*)는 component를 가져와 새 component를 반환하는 함수입니다. 기본적으로 React의 구성 특성에서 파생 된 패턴입니다.\n\n    동적으로 제공되는 모든 자식 component를 허용 할 수 있지만 입력 component의 동작을 수정하거나 복사하지 않기 때문에 **pure components** 라고합니다.\n\n    ```javascript\n    const EnhancedComponent = higherOrderComponent(WrappedComponent)\n    ```\n\n    HOC는 많은 사용 사례에 사용할 수 있습니다.\n\n    1. 코드 재사용, logic 및 bootstrap 추상화.\n    2. hijacking 렌더링.\n    3. State 추상화 및 조작.\n    4. Props 조작.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n36. ### HOC component를 위한 props proxy는 어떻게 만들까요?\n\n    *props proxy* 패턴을 사용해서 component에 전달 된 props를 추가/수정을 할 수 있습니다.\n\n    ```jsx harmony\n    function HOC(WrappedComponent) {\n      return class Test extends Component {\n        render() {\n          const newProps = {\n            title: 'New Header',\n            footer: false,\n            showFeatureX: false,\n            showFeatureY: true\n          }\n\n          return \u003cWrappedComponent {...this.props} {...newProps} /\u003e\n        }\n      }\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n37. ### context가 뭘까요?\n\n    *Context*는 전달하고자 하는 데이터를 모든 component에 props를 전달하지 않고 component tree를 통해서 바로 데이터를 제공할 수 있는 방법입니다.\n\n    예를 들어서 유저 인증, 사용 언어, UI 테마 (다크 모드)는 많은 component들이 application에서 많이 접근해야 합니다.\n\n    ```javascript\n    const {Provider, Consumer} = React.createContext(defaultValue)\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n38. ### children prop가 뭘까요?\n\n    *Children*은 사용하는 다른 props과 마찬가지로 component를 다른 component에 데이터로 전달할 수 있는 prop (`this.props.children`)입니다. Component의 여는 태그와 닫는 태그 사이에 놓인 component 트리는 `children` prop으로 해당 component에 전달됩니다.\n\n    이 prop과 함께 작동하기 위해 React API에서 사용할 수 있는 여러 메소드가 있습니다. 여기에는 `React.Children.map`,`React.Children.forEach`,`React.Children.count`,`React.Children.only`,`React.Children.toArray`가 포함됩니다.\n\n    Children props의 간단한 사용법은 다음과 같습니다.\n\n    ```jsx harmony\n    const MyDiv = React.createClass({\n      render: function() {\n        return \u003cdiv\u003e{this.props.children}\u003c/div\u003e\n      }\n    })\n\n    ReactDOM.render(\n      \u003cMyDiv\u003e\n        \u003cspan\u003e{'Hello'}\u003c/span\u003e\n        \u003cspan\u003e{'World'}\u003c/span\u003e\n      \u003c/MyDiv\u003e,\n      node\n    )\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n39. ### React에서 주석은 어떻게 작성할까요?\n\n    React/JSX안에서 주석은 JavaScript의 여러 줄 주석과 비슷하지만 대괄호로 감쌉니다.\n\n    **한 줄 주석:**\n\n    ```jsx harmony\n    \u003cdiv\u003e\n      {/* 한 줄 주석(vanilla Javascript에서는 한 줄 주석이 (//)로 표시됩니다.) */}\n      {`Welcome ${user}, let's play React`}\n    \u003c/div\u003e\n    ```\n\n    **여러 줄 주석:**\n\n    ```jsx harmony\n    \u003cdiv\u003e\n      {/* \n        한 줄 주석 말고\n        여러 줄 주석!\n       */}\n      {`Welcome ${user}, let's play React`}\n    \u003c/div\u003e\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n40. ### super constructor with props 인자를 사용하는 이유는 무엇일까요?\n\n    자식 클래스 constructor는 `super()` 메소드가 불리기 전까지 `this` reference를 사용하지 못합니다. ES6의 sub-classes에도 동일하게 적용됩니다. props 매개변수를 `super()` 메소드 호출에 전달하는 주된 이유는 자식 constructor에서 `this.props`에 접근하기 위해서 입니다.\n\n    **props 전달함:**\n\n    ```javascript\n    class MyComponent extends React.Component {\n      constructor(props) {\n        super(props)\n\n        console.log(this.props) // prints { name: 'John', age: 42 }\n      }\n    }\n    ```\n\n    **props를 전달하지 않음:**\n\n    ```javascript\n    class MyComponent extends React.Component {\n      constructor(props) {\n        super()\n\n        console.log(this.props) // prints undefined\n\n        // but props parameter is still available\n        console.log(props) // prints { name: 'John', age: 42 }\n      }\n\n      render() {\n        // no difference outside constructor\n        console.log(this.props) // prints { name: 'John', age: 42 }\n      }\n    }\n    ```\n\n    위의 코드는 `this.props`가 construtor안에서만 다르다는 것은 보여줍니다. constructor 밖에서도 동일합니다.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n41. ### reconciliation가 무엇일까요?\n\n    component의 props나 state가 바뀔 때, React는 새롭게 반환된 요소와 이전에 렌더링된 요소와 비교를 함으로써 실제 DOM이 업데이트 되어야 하는지를 결정합니다. 만약 둘이 다르다면, React는 DOM을 갱신할 것 입니다. 이러한 과정이 *reconciliation*라고 합니다.\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n42. ### How to set state with a dynamic key name?\n\n    If you are using ES6 or the Babel transpiler to transform your JSX code then you can accomplish this with *computed property names*.\n\n    ```javascript\n    handleInputChange(event) {\n      this.setState({ [event.target.id]: event.target.value })\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n43. ### What would be the common mistake of function being called every time the component renders?\n\n    You need to make sure that function is not being called while passing the function as a parameter.\n\n    ```jsx harmony\n    render() {\n      // Wrong: handleClick is called instead of passed as a reference!\n      return \u003cbutton onClick={this.handleClick()}\u003e{'Click Me'}\u003c/button\u003e\n    }\n    ```\n\n    Instead, pass the function itself without parenthesis:\n\n    ```jsx harmony\n    render() {\n      // Correct: handleClick is passed as a reference!\n      return \u003cbutton onClick={this.handleClick}\u003e{'Click Me'}\u003c/button\u003e\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n44. ### Is lazy function supports named exports?\n    No, currently `React.lazy` function supports default exports only. If you would like to import modules which are named exports, you can create an intermediate module that reexports it as the default. It also ensures that tree shaking keeps working and don’t pull unused components.\n    Let's take a component file which exports multiple named components,\n    ```javascript\n    // MoreComponents.js\n    export const SomeComponent = /* ... */;\n    export const UnusedComponent = /* ... */;\n    ```\n    and reexport `MoreComponents.js` components in an intermediate file `IntermediateComponent.js`\n    ```javascript\n    // IntermediateComponent.js\n    export { SomeComponent as default } from \"./MoreComponents.js\";\n    ```\n    Now you can import the module using lazy function as below,\n    ```javascript\n    import React, { lazy } from 'react';\n    const SomeComponent = lazy(() =\u003e import(\"./IntermediateComponent.js\"));\n    ```\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n45. ### Why React uses `className` over `class` attribute?\n\n    `class` is a keyword in JavaScript, and JSX is an extension of JavaScript. That's the principal reason why React uses `className` instead of `class`. Pass a string as the `className` prop.\n\n    ```jsx harmony\n    render() {\n      return \u003cspan className={'menu navigation-menu'}\u003e{'Menu'}\u003c/span\u003e\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n46. ### What are fragments?\n\n    It's common pattern in React which is used for a component to return multiple elements. *Fragments* let you group a list of children without adding extra nodes to the DOM.\n\n    ```jsx harmony\n    render() {\n      return (\n        \u003cReact.Fragment\u003e\n          \u003cChildA /\u003e\n          \u003cChildB /\u003e\n          \u003cChildC /\u003e\n        \u003c/React.Fragment\u003e\n      )\n    }\n    ```\n\n    There is also a *shorter syntax*, but it's not supported in many tools:\n\n    ```jsx harmony\n    render() {\n      return (\n        \u003c\u003e\n          \u003cChildA /\u003e\n          \u003cChildB /\u003e\n          \u003cChildC /\u003e\n        \u003c/\u003e\n      )\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n47. ### Why fragments are better than container divs?\n    Below are the list of reasons,\n\n    1. Fragments are a bit faster and use less memory by not creating an extra DOM node. This only has a real benefit on very large and deep trees.\n    2. Some CSS mechanisms like *Flexbox* and *CSS Grid* have a special parent-child relationships, and adding divs in the middle makes it hard to keep the desired layout.\n    3. The DOM Inspector is less cluttered.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n48. ### What are portals in React?\n\n    *Portal* is a recommended way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n\n    ```javascript\n    ReactDOM.createPortal(child, container)\n    ```\n\n    The first argument is any render-able React child, such as an element, string, or fragment. The second argument is a DOM element.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n49. ### What are stateless components?\n\n    If the behaviour is independent of its state then it can be a stateless component. You can use either a function or a class for creating stateless components. But unless you need to use a lifecycle hook in your components, you should go for function components. There are a lot of benefits if you decide to use function components here; they are easy to write, understand, and test, a little faster, and you can avoid the `this` keyword altogether.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n50. ### What are stateful components?\n\n    If the behaviour of a component is dependent on the *state* of the component then it can be termed as stateful component. These *stateful components* are always *class components* and have a state that gets initialized in the `constructor`.\n\n    ```javascript\n    class App extends Component {\n      constructor(props) {\n        super(props)\n        this.state = { count: 0 }\n      }\n\n      render() {\n        // ...\n      }\n    }\n    ```\n    **React 16.8 Update:**\n\n     Hooks let you use state and other React features without writing classes.\n\n     *The Equivalent Functional Component*\n\n       ```javascript\n        import React, {useState} from 'react';\n\n        const App = (props) =\u003e {\n          const [count, setCount] = useState(0);\n\n          return (\n            // JSX\n          )\n        }\n       ```\n\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n51. ### How to apply validation on props in React?\n\n    When the application is running in *development mode*, React will automatically check all props that we set on components to make sure they have *correct type*. If the type is incorrect, React will generate warning messages in the console. It's disabled in *production mode* due to performance impact. The mandatory props are defined with `isRequired`.\n\n    The set of predefined prop types:\n\n    1. `PropTypes.number`\n    2. `PropTypes.string`\n    3. `PropTypes.array`\n    4. `PropTypes.object`\n    5. `PropTypes.func`\n    6. `PropTypes.node`\n    7. `PropTypes.element`\n    8. `PropTypes.bool`\n    9. `PropTypes.symbol`\n    10. `PropTypes.any`\n\n    We can define `propTypes` for `User` component as below:\n\n    ```jsx harmony\n    import React from 'react'\n    import PropTypes from 'prop-types'\n\n    class User extends React.Component {\n      static propTypes = {\n        name: PropTypes.string.isRequired,\n        age: PropTypes.number.isRequired\n      }\n\n      render() {\n        return (\n          \u003c\u003e\n            \u003ch1\u003e{`Welcome, ${this.props.name}`}\u003c/h1\u003e\n            \u003ch2\u003e{`Age, ${this.props.age}`}\u003c/h2\u003e\n          \u003c/\u003e\n        )\n      }\n    }\n    ```\n\n    **Note:** In React v15.5 *PropTypes* were moved from `React.PropTypes` to `prop-types` library.\n\n    *The Equivalent Functional Component*\n\n    ```jsx harmony\n    import React from 'react'\n    import PropTypes from 'prop-types'\n   \n    function User() {\n      return (\n        \u003c\u003e\n          \u003ch1\u003e{`Welcome, ${this.props.name}`}\u003c/h1\u003e\n          \u003ch2\u003e{`Age, ${this.props.age}`}\u003c/h2\u003e\n        \u003c/\u003e\n      )\n    }\n\n    User.propTypes = {\n        name: PropTypes.string.isRequired,\n        age: PropTypes.number.isRequired\n      }\n    ```\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n52. ### What are the advantages of React?\n    Below are the list of main advantages of React,\n\n    1. Increases the application's performance with *Virtual DOM*.\n    2. JSX makes code easy to read and write.\n    3. It renders both on client and server side (*SSR*).\n    4. Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.\n    5. Easy to write unit and integration tests with tools such as Jest.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n53. ### What are the limitations of React?\n    Apart from the advantages, there are few limitations of React too,\n\n    1. React is just a view library, not a full framework.\n    2. There is a learning curve for beginners who are new to web development.\n    3. Integrating React into a traditional MVC framework requires some additional configuration.\n    4. The code complexity increases with inline templating and JSX.\n    5. Too many smaller components leading to over engineering or boilerplate.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n54. ### What are error boundaries in React v16?\n\n    *Error boundaries* are components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.\n\n    A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)` or `static getDerivedStateFromError() `:\n\n    ```jsx harmony\n    class ErrorBoundary extends React.Component {\n      constructor(props) {\n        super(props)\n        this.state = { hasError: false }\n      }\n\n      componentDidCatch(error, info) {\n        // You can also log the error to an error reporting service\n        logErrorToMyService(error, info)\n      }\n\n      static getDerivedStateFromError(error) {\n         // Update state so the next render will show the fallback UI.\n         return { hasError: true };\n       }\n\n      render() {\n        if (this.state.hasError) {\n          // You can render any custom fallback UI\n          return \u003ch1\u003e{'Something went wrong.'}\u003c/h1\u003e\n        }\n        return this.props.children\n      }\n    }\n    ```\n\n    After that use it as a regular component:\n\n    ```jsx harmony\n    \u003cErrorBoundary\u003e\n      \u003cMyWidget /\u003e\n    \u003c/ErrorBoundary\u003e\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n55. ### How error boundaries handled in React v15?\n\n    React v15 provided very basic support for *error boundaries* using `unstable_handleError` method. It has been renamed to `componentDidCatch` in React v16.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n56. ### What are the recommended ways for static type checking?\n\n    Normally we use *PropTypes library* (`React.PropTypes` moved to a `prop-types` package since React v15.5) for *type checking* in the React applications. For large code bases, it is recommended to use *static type checkers* such as Flow or TypeScript, that perform type checking at compile time and provide auto-completion features.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n57. ### What is the use of `react-dom` package?\n\n    The `react-dom` package provides *DOM-specific methods* that can be used at the top level of your app. Most of the components are not required to use this module. Some of the methods of this package are:\n\n    1. `render()`\n    2. `hydrate()`\n    3. `unmountComponentAtNode()`\n    4. `findDOMNode()`\n    5. `createPortal()`\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n58. ### What is the purpose of render method of `react-dom`?\n\n    This method is used to render a React element into the DOM in the supplied container and return a reference to the component. If the React element was previously rendered into container, it will perform an update on it and only mutate the DOM as necessary to reflect the latest changes.\n\n    ```\n    ReactDOM.render(element, container[, callback])\n    ```\n\n    If the optional callback is provided, it will be executed after the component is rendered or updated.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n59. ### What is ReactDOMServer?\n\n    The `ReactDOMServer` object enables you to render components to static markup (typically used on node server). This object is mainly used for *server-side rendering* (SSR). The following methods can be used in both the server and browser environments:\n\n    1. `renderToString()`\n    2. `renderToStaticMarkup()`\n\n    For example, you generally run a Node-based web server like Express, Hapi, or Koa, and you call `renderToString` to render your root component to a string, which you then send as response.\n\n    ```javascript\n    // using Express\n    import { renderToString } from 'react-dom/server'\n    import MyPage from './MyPage'\n\n    app.get('/', (req, res) =\u003e {\n      res.write('\u003c!DOCTYPE html\u003e\u003chtml\u003e\u003chead\u003e\u003ctitle\u003eMy Page\u003c/title\u003e\u003c/head\u003e\u003cbody\u003e')\n      res.write('\u003cdiv id=\"content\"\u003e')\n      res.write(renderToString(\u003cMyPage/\u003e))\n      res.write('\u003c/div\u003e\u003c/body\u003e\u003c/html\u003e')\n      res.end()\n    })\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n60. ### How to use innerHTML in React?\n\n    The `dangerouslySetInnerHTML` attribute is React's replacement for using `innerHTML` in the browser DOM. Just like `innerHTML`, it is risky to use this attribute considering cross-site scripting (XSS) attacks. You just need to pass a `__html` object as key and HTML text as value.\n\n    In this example MyComponent uses `dangerouslySetInnerHTML` attribute for setting HTML markup:\n\n    ```jsx harmony\n    function createMarkup() {\n      return { __html: 'First \u0026middot; Second' }\n    }\n\n    function MyComponent() {\n      return \u003cdiv dangerouslySetInnerHTML={createMarkup()} /\u003e\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n61. ### How to use styles in React?\n\n    The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.\n\n    ```jsx harmony\n    const divStyle = {\n      color: 'blue',\n      backgroundImage: 'url(' + imgUrl + ')'\n    };\n\n    function HelloWorldComponent() {\n      return \u003cdiv style={divStyle}\u003eHello World!\u003c/div\u003e\n    }\n    ```\n\n    Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes in JavaScript (e.g. `node.style.backgroundImage`).\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n62. ### How events are different in React?\n\n    Handling events in React elements has some syntactic differences:\n\n    1. React event handlers are named using camelCase, rather than lowercase.\n    2. With JSX you pass a function as the event handler, rather than a string.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n63. ### What will happen if you use `setState()` in constructor?\n\n    When you use `setState()`, then apart from assigning to the object state React also re-renders the component and all its children. You would get error like this: *Can only update a mounted or mounting component.* So we need to use `this.state` to initialize variables inside constructor.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n64. ### What is the impact of indexes as keys?\n\n    Keys should be stable, predictable, and unique so that React can keep track of elements.\n\n    In the below code snippet each element's key will be based on ordering, rather than tied to the data that is being represented. This limits the optimizations that React can do.\n\n    ```jsx harmony\n    {todos.map((todo, index) =\u003e\n      \u003cTodo\n        {...todo}\n        key={index}\n      /\u003e\n    )}\n    ```\n\n    If you use element data for unique key, assuming todo.id is unique to this list and stable, React would be able to reorder elements without needing to reevaluate them as much.\n\n    ```jsx harmony\n    {todos.map((todo) =\u003e\n      \u003cTodo {...todo}\n        key={todo.id} /\u003e\n    )}\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n65. ### Is it good to use `setState()` in `componentWillMount()` method?\n\n    Yes, it is safe to use `setState()` inside `componentWillMount()` method. But at the same it is recommended to avoid async initialization in `componentWillMount()` lifecycle method. `componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method. We need to make sure async calls for component initialization happened in `componentDidMount()` instead of `componentWillMount()`.\n\n    ```jsx harmony\n    componentDidMount() {\n      axios.get(`api/todos`)\n        .then((result) =\u003e {\n          this.setState({\n            messages: [...result.data]\n          })\n        })\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n66. ### What will happen if you use props in initial state?\n\n    If the props on the component are changed without the component being refreshed, the new prop value will never be displayed because the constructor function will never update the current state of the component. The initialization of state from props only runs when the component is first created.\n\n    The below component won't display the updated input value:\n\n    ```jsx harmony\n    class MyComponent extends React.Component {\n      constructor(props) {\n        super(props)\n\n        this.state = {\n          records: [],\n          inputValue: this.props.inputValue\n        };\n      }\n\n      render() {\n        return \u003cdiv\u003e{this.state.inputValue}\u003c/div\u003e\n      }\n    }\n    ```\n\n    Using props inside render method will update the value:\n\n    ```jsx harmony\n    class MyComponent extends React.Component {\n      constructor(props) {\n        super(props)\n\n        this.state = {\n          record: []\n        }\n      }\n\n      render() {\n        return \u003cdiv\u003e{this.props.inputValue}\u003c/div\u003e\n      }\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n67. ### How do you conditionally render components?\n\n    In some cases you want to render different components depending on some state. JSX does not render `false` or `undefined`, so you can use conditional *short-circuiting* to render a given part of your component only if a certain condition is true.\n\n    ```jsx harmony\n    const MyComponent = ({ name, address }) =\u003e (\n      \u003cdiv\u003e\n        \u003ch2\u003e{name}\u003c/h2\u003e\n        {address \u0026\u0026\n          \u003cp\u003e{address}\u003c/p\u003e\n        }\n      \u003c/div\u003e\n    )\n    ```\n\n    If you need an `if-else` condition then use *ternary operator*.\n\n    ```jsx harmony\n    const MyComponent = ({ name, address }) =\u003e (\n      \u003cdiv\u003e\n        \u003ch2\u003e{name}\u003c/h2\u003e\n        {address\n          ? \u003cp\u003e{address}\u003c/p\u003e\n          : \u003cp\u003e{'Address is not available'}\u003c/p\u003e\n        }\n      \u003c/div\u003e\n    )\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n68. ### Why we need to be careful when spreading props on DOM elements?\n\n    When we *spread props* we run into the risk of adding unknown HTML attributes, which is a bad practice. Instead we can use prop destructuring with `...rest` operator, so it will add only required props.\n\n    For example,\n\n    ```jsx harmony\n    const ComponentA = () =\u003e\n      \u003cComponentB isDisplay={true} className={'componentStyle'} /\u003e\n\n    const ComponentB = ({ isDisplay, ...domProps }) =\u003e\n      \u003cdiv {...domProps}\u003e{'ComponentB'}\u003c/div\u003e\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n69. ### How you use decorators in React?\n\n    You can *decorate* your *class* components, which is the same as passing the component into a function. **Decorators** are flexible and readable way of modifying component functionality.\n\n    ```jsx harmony\n    @setTitle('Profile')\n    class Profile extends React.Component {\n        //....\n    }\n\n    /*\n      title is a string that will be set as a document title\n      WrappedComponent is what our decorator will receive when\n      put directly above a component class as seen in the example above\n    */\n    const setTitle = (title) =\u003e (WrappedComponent) =\u003e {\n      return class extends React.Component {\n        componentDidMount() {\n          document.title = title\n        }\n\n        render() {\n          return \u003cWrappedComponent {...this.props} /\u003e\n        }\n      }\n    }\n    ```\n\n    **Note:** Decorators are a feature that didn't make it into ES7, but are currently a *stage 2 proposal*.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n70. ### How do you memoize a component?\n\n    There are memoize libraries available which can be used on function components.\n\n    For example `moize` library can memoize the component in another component.\n\n    ```jsx harmony\n    import moize from 'moize'\n    import Component from './components/Component' // this module exports a non-memoized component\n\n    const MemoizedFoo = moize.react(Component)\n\n    const Consumer = () =\u003e {\n      \u003cdiv\u003e\n        {'I will memoize the following entry:'}\n        \u003cMemoizedFoo/\u003e\n      \u003c/div\u003e\n    }\n    ```\n\n    **Update:** Since React v16.6.0, we have a `React.memo`. It provides a higher order component which memoizes component unless the props change. To use it, simply wrap the component using React.memo before you use it.\n\n    ```js\n      const MemoComponent = React.memo(function MemoComponent(props) {\n        /* render using props */\n      });\n      OR\n      export default React.memo(MyFunctionComponent);\n    ```\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n71. ### How you implement Server Side Rendering or SSR?\n\n    React is already equipped to handle rendering on Node servers. A special version of the DOM renderer is available, which follows the same pattern as on the client side.\n\n    ```jsx harmony\n    import ReactDOMServer from 'react-dom/server'\n    import App from './App'\n\n    ReactDOMServer.renderToString(\u003cApp /\u003e)\n    ```\n\n    This method will output the regular HTML as a string, which can be then placed inside a page body as part of the server response. On the client side, React detects the pre-rendered content and seamlessly picks up where it left off.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n72. ### How to enable production mode in React?\n\n    You should use Webpack's `DefinePlugin` method to set `NODE_ENV` to `production`, by which it strip out things like propType validation and extra warnings. Apart from this, if you minify the code, for example, Uglify's dead-code elimination to strip out development only code and comments, it will drastically reduce the size of your bundle.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n73. ### What is CRA and its benefits?\n\n    The `create-react-app` CLI tool allows you to quickly create \u0026 run React applications with no configuration step.\n\n    Let's create Todo App using *CRA*:\n\n    ```console\n    # Installation\n    $ npm install -g create-react-app\n\n    # Create new project\n    $ create-react-app todo-app\n    $ cd todo-app\n\n    # Build, test and run\n    $ npm run build\n    $ npm run test\n    $ npm start\n    ```\n    It includes everything we need to build a React app:\n\n    1. React, JSX, ES6, and Flow syntax support.\n    2. Language extras beyond ES6 like the object spread operator.\n    3. Autoprefixed CSS, so you don’t need -webkit- or other prefixes.\n    4. A fast interactive unit test runner with built-in support for coverage reporting.\n    5. A live development server that warns about common mistakes.\n    6. A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n74. ### What is the lifecycle methods order in mounting?\n\n    The lifecycle methods are called in the following order when an instance of a component is being created and inserted into the DOM.\n\n    1. `constructor()`\n    2. `static getDerivedStateFromProps()`\n    3. `render()`\n    4. `componentDidMount()`\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n75. ### What are the lifecycle methods going to be deprecated in React v16?\n\n    The following lifecycle methods going to be unsafe coding practices and will be more problematic with async rendering.\n\n    1. `componentWillMount()`\n    2. `componentWillReceiveProps()`\n    3. `componentWillUpdate()`\n\n    Starting with React v16.3 these methods are aliased with `UNSAFE_` prefix, and the unprefixed version will be removed in React v17.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n76. ### What is the purpose of `getDerivedStateFromProps()` lifecycle method?\n\n    The new static `getDerivedStateFromProps()` lifecycle method is invoked after a component is instantiated as well as before it is re-rendered. It can return an object to update state, or `null` to indicate that the new props do not require any state updates.\n\n    ```javascript\n    class MyComponent extends React.Component {\n      static getDerivedStateFromProps(props, state) {\n        // ...\n      }\n    }\n    ```\n\n    This lifecycle method along with `componentDidUpdate()` covers all the use cases of `componentWillReceiveProps()`.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n77. ### What is the purpose of `getSnapshotBeforeUpdate()` lifecycle method?\n\n    The new `getSnapshotBeforeUpdate()` lifecycle method is called right before DOM updates. The return value from this method will be passed as the third parameter to `componentDidUpdate()`.\n\n    ```javascript\n    class MyComponent extends React.Component {\n      getSnapshotBeforeUpdate(prevProps, prevState) {\n        // ...\n      }\n    }\n    ```\n\n    This lifecycle method along with `componentDidUpdate()` covers all the use cases of `componentWillUpdate()`.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n78. ### Do Hooks replace render props and higher order components?\n\n    Both render props and higher-order components render only a single child but in most of the cases Hooks are a simpler way to serve this by reducing nesting in your tree.\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n79. ### What is the recommended way for naming components?\n\n    It is recommended to name the component by reference instead of using `displayName`.\n\n    Using `displayName` for naming component:\n\n    ```javascript\n    export default React.createClass({\n      displayName: 'TodoApp',\n      // ...\n    })\n    ```\n\n    The **recommended** approach:\n\n    ```javascript\n    export default class TodoApp extends React.Component {\n      // ...\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n80. ### What is the recommended ordering of methods in component class?\n\n    *Recommended* ordering of methods from *mounting* to *render stage*:\n\n    1. `static` methods\n    2. `constructor()`\n    3. `getChildContext()`\n    4. `componentWillMount()`\n    5. `componentDidMount()`\n    6. `componentWillReceiveProps()`\n    7. `shouldComponentUpdate()`\n    8. `componentWillUpdate()`\n    9. `componentDidUpdate()`\n    10. `componentWillUnmount()`\n    11. click handlers or event handlers like `onClickSubmit()` or `onChangeDescription()`\n    12. getter methods for render like `getSelectReason()` or `getFooterContent()`\n    13. optional render methods like `renderNavigation()` or `renderProfilePicture()`\n    14. `render()`\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n81. ### What is a switching component?\n\n    A *switching component* is a component that renders one of many components. We need to use object to map prop values to components.\n\n    For example, a switching component to display different pages based on `page` prop:\n\n    ```jsx harmony\n    import HomePage from './HomePage'\n    import AboutPage from './AboutPage'\n    import ServicesPage from './ServicesPage'\n    import ContactPage from './ContactPage'\n\n    const PAGES = {\n      home: HomePage,\n      about: AboutPage,\n      services: ServicesPage,\n      contact: ContactPage\n    }\n\n    const Page = (props) =\u003e {\n      const Handler = PAGES[props.page] || ContactPage\n\n      return \u003cHandler {...props} /\u003e\n    }\n\n    // The keys of the PAGES object can be used in the prop types to catch dev-time errors.\n    Page.propTypes = {\n      page: PropTypes.oneOf(Object.keys(PAGES)).isRequired\n    }\n    ```\n\n\n   **[⬆ Back to Top](#table-of-contents)**\n    \n82. ### Why we need to pass a function to setState()?\n\n    The reason behind for this is that `setState()` is an asynchronous operation. React batches state ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunghyeonsu%2Freactjs-interview-questions-kr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjunghyeonsu%2Freactjs-interview-questions-kr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjunghyeonsu%2Freactjs-interview-questions-kr/lists"}