{"id":13726466,"url":"https://github.com/appear/reactjs-interview-questions-ko","last_synced_at":"2025-05-07T21:32:48.729Z","repository":{"id":49742632,"uuid":"153275901","full_name":"appear/reactjs-interview-questions-ko","owner":"appear","description":"React 인터뷰 ","archived":false,"fork":false,"pushed_at":"2020-12-22T15:22:40.000Z","size":489,"stargazers_count":345,"open_issues_count":0,"forks_count":55,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-08-03T01:28:56.410Z","etag":null,"topics":[],"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/appear.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}},"created_at":"2018-10-16T11:42:05.000Z","updated_at":"2024-05-30T01:37:20.000Z","dependencies_parsed_at":"2022-09-09T16:10:40.753Z","dependency_job_id":null,"html_url":"https://github.com/appear/reactjs-interview-questions-ko","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appear%2Freactjs-interview-questions-ko","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appear%2Freactjs-interview-questions-ko/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appear%2Freactjs-interview-questions-ko/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/appear%2Freactjs-interview-questions-ko/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/appear","download_url":"https://codeload.github.com/appear/reactjs-interview-questions-ko/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224654289,"owners_count":17347715,"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":[],"created_at":"2024-08-03T01:03:06.444Z","updated_at":"2024-11-14T16:33:56.172Z","avatar_url":"https://github.com/appear.png","language":null,"funding_links":[],"categories":["Others"],"sub_categories":[],"readme":"# reactjs-interview-questions-ko ✨\n\n\u003cbr /\u003e\n\n\u003e 원작자인 [sudheerj](https://github.com/sudheerj) 의 동의를 구하고 진행하는 번역본 입니다.\n영어 원본은 [링크](https://github.com/sudheerj/reactjs-interview-questions#what-is-reactjs) 에서 확인 할 수 있습니다.\n\n도움을 주시고싶은 분들은 fork 후 pull request 부탁드립니다 🎉\n이 글이 도움이 되셨다면 ⭐ 를 눌러주세요 \n\n\u003cbr /\u003e\n\n## 목차\n\n---\n\n| No. | Questions |\n| --- | --------- |\n|   | **Core React** |\n|1  | [What is React?](#what-is-react) |\n|2  | [What are the major features of React?](#what-are-the-major-features-of-react) |\n|3  | [What is JSX?](#what-is-jsx) |\n|4  | [What is the difference between Element and Component?](#what-is-the-difference-between-element-and-component) |\n|5  | [How to create components in React?](#how-to-create-components-in-react) |\n|6  | [When to use a Class Component over a Function Component?](#when-to-use-a-class-component-over-a-function-component) |\n|7  | [What are Pure Components?](#what-are-pure-components) |\n|8  | [What is state in React?](#what-is-state-in-react) |\n|9  | [What are props in React?](#what-are-props-in-react) |\n|10 | [What is the difference between state and props?](#what-is-the-difference-between-state-and-props) |\n|11 | [Why should we not update the state directly?](#why-should-we-not-update-the-state-directly) |\n|12 | [What is the purpose of callback function as an argument of setState()?](#what-is-the-purpose-of-callback-function-as-an-argument-of-setstate)\n|13 | [What is the difference between HTML and React event handling?](#what-is-the-difference-between-html-and-react-event-handling) |\n|14 | [How to bind methods or event handlers in JSX callbacks?](#how-to-bind-methods-or-event-handlers-in-jsx-callbacks) |\n|15 | [How to pass a parameter to an event handler or callback?](#how-to-pass-a-parameter-to-an-event-handler-or-callback) |\n|16 | [What are synthetic events in React?](#what-are-synthetic-events-in-react) |\n|17 | [What are inline conditional expressions?](#what-are-inline-conditional-expressions) |\n|18 | [What is \"key\" prop and what is the benefit of using it in arrays of elements?](#what-is-key-prop-and-what-is-the-benefit-of-using-it-in-arrays-of-elements) |\n|19 | [What is the use of refs?](#what-is-the-use-of-refs) |\n|20 | [How to create refs?](#how-to-create-refs)\n|21 | [What are forward refs?](#what-are-forward-refs) |\n|22 | [Which is preferred option with in callback refs and findDOMNode()?](#which-is-preferred-option-with-in-callback-refs-and-finddomnode) |\n|23 | [Why are String Refs legacy?](#why-are-string-refs-legacy) |\n|24 | [What is Virtual DOM?](#what-is-virtual-dom) |\n|25 | [How Virtual DOM works?](#how-virtual-dom-works) |\n|26 | [What is the difference between Shadow DOM and Virtual DOM?](#what-is-the-difference-between-shadow-dom-and-virtual-dom) |\n|27 | [What is React Fiber?](#what-is-react-fiber) |\n|28 | [What is the main goal of React Fiber?](#what-is-the-main-goal-of-react-fiber) |\n|29 | [What are controlled components?](#what-are-controlled-components) |\n|30 | [What are uncontrolled components?](#what-are-uncontrolled-components) |\n|31 | [What is the difference between createElement and cloneElement?](#what-is-the-difference-between-createelement-and-cloneelement) |\n|32 | [What is Lifting State Up in React?](#what-is-lifting-state-up-in-react) |\n|33 | [What are the different phases of component lifecycle?](#what-are-the-different-phases-of-component-lifecycle) |\n|34 | [What are the lifecycle methods of React?](#what-are-the-lifecycle-methods-of-react) |\n|35 | [What are Higher-Order components?](#what-are-higher-order-components) |\n|36 | [How to create props proxy for HOC component?](#how-to-create-props-proxy-for-hoc-component) |\n|37 | [What is context?](#what-is-context) |\n|38 | [What is children prop?](#what-is-children-prop) |\n|39 | [How to write comments in React?](#how-to-write-comments-in-react) |\n|40 | [What is the purpose of using super constructor with props argument?](#what-is-the-purpose-of-using-super-constructor-with-props-argument) |\n|41 | [What is reconciliation?](#what-is-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\n\n## Core ReactJS\n\n1. ### What is ReactJS?\n\n#### (React란 무엇인가요?)\n\n[React](https://reactjs.org/docs/hello-world.html)는 SPA (Single Page Application) 즉, 단일 페이지 응용 프로그램에서 사용자 인터페이스를 구성는데 사용되는 오픈 소스 프론트엔드 JS 라이브러리 입니다.  \n웹 및 모바일 앱의 Layer 를 다루는데 사용됩니다. 리액트는 페이스북의 소프트웨어 엔지니어 [Jordan Walke](https://twitter.com/jordwalke) 에 의해 만들어졌습니다.  \n리액트는 2011 년 페이스북 뉴스피드에 발표되었고, 2012년 인스타그램에 처음 구축되었습니다.\n   \n[상단으로 ✨](#목차)\n   \n2. ### What are the major features of ReactJS?\n\n#### (React의 특징은 무엇이 있을까요?)\n\nReact 의 주요 특징은 아래와 같습니다.\n\n- RealDOM 을 조작하는데 많은 비용이 들어간다는 점을 고려하여 리액트는 RealDOM 대신 [VirtualDOM](https://www.youtube.com/watch?v=BYbgopx44vo)을 사용합니다.\n- [서버 사이드 렌더링](https://subicura.com/2016/06/20/server-side-rendering-with-react.html)을 지원합니다.\n- 단방향 데이터 흐름 또는 데이터 바인딩을 따릅니다.\n- UI 구성 요소를 재사용할 수 있도록 개발할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n3. ### What is JSX?\n\n#### (JSX란 무엇인가요?)\n\n[JSX](https://reactjs.org/docs/introducing-jsx.html) 는 JS XML (ECMAScript로 XML 유사 구문 확장) 의 구문 표기법입니다. JSX 는 JS XML의 약자입니다.  \n[HTML](https://ko.wikipedia.org/wiki/HTML)과 같은 문법과 함께 JS를 표현할 수 있습니다.\n예를 들면 아래의 h1 태그안에 text 는 render 함수에 의해 JS 함수로 반환됩니다.\n\n```js\nrender() {\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   \n4. ### What is the difference between Element and Component?\n\n#### (element와 component의 차이점은 무엇인가요?)\n\n[element](https://ko.wikipedia.org/wiki/HTML_%EC%9A%94%EC%86%8C)는 DOM 노드 또는 다른 [component](https://reactjs.org/docs/react-component.html)들과 관련하여 화면에 표시 할 내용을 표현하는 일반 객체입니다. elements는 다른 elements 들을 포함할 수 있습니다.\n[React element](https://reactjs.org/docs/rendering-elements.html)를 만드는 비용은 저렴합니다. element 는 생성되면 변형되지 않습니다. 리액트 element 의 표현은 아래와 같습니다.\n\n```js\nconst element = React.createElement(\"div\", { id: \"login-btn\" }, \"Login\");\n```\n\n위에서 만들어진 element 는 아래와 같은 객체로 리턴됩니다.\n\n```js\n{\n  type: 'div',\n  props: {\n    children: 'Login',\n    id: 'login-btn'\n  }\n}\n```\n\n마지막으로 아래와 같이 [**ReactDOM.render**](https://reactjs.org/docs/react-dom.html) 를 이용하여 DOM 으로 렌더링합니다.\n\n```js\n\u003cdiv id=\"login-btn\"\u003eLogin\u003c/div\u003e\n```\n\n반면 component 는 여러 방법으로 선언될 수 있습니다. render 메서드가 있는 class 일 수도 있습니다. 간단한 component 일 경우 function으로 정의 될 수 있습니다.\n입력된 component 를 바탕으로 element 트리를 만듭니다. 마지막에 JSX 는 [createElement로 변환](https://reactjs.org/docs/jsx-in-depth.html)됩니다.\n\n```js\nfunction Button({ onLogin }) {\n  return React.createElement(\n    \"div\",\n    { id: \"login-btn\", onClick: onLogin },\n    \"Login\"\n  );\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n5. ### How to create components in ReactJS?\n\n#### (React에서 컴포넌트를 어떻게 생성하나요?)\n\nReactJS 는 Components 생성하는 두 가지 방법이 있습니다.\n\n**Functional components**\n\nReactJS 에서 component를 생성하는 가장 간단한 방법입니다. props 를 받을 수 있고 React elements 를 리턴할 수 있습니다.\n이런 방법을 pure 한 JS의 function 이기 때문에 functional한 생성법이라고 부릅니다.\n\n```js\nfunction Greeting(props) {\n  return \u003ch1\u003e Hello, {props.message}\u003c/h1\u003e;\n}\n```\n\n**Class components**\n\nES6 [Class](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)를 사용하여 component 를 정의할 수 있습니다. 위에서 본 functional 선언법을 아래와 같이 적용할 수 있습니다.\n\n```js\nclass Greeting extends React.Component {\n  render() {\n    return \u003ch1\u003eHello, {this.props.message}\u003c/h1\u003e;\n  }\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n6. ### When to use a Class Component over a Functional Component?\n\n#### (언제 클래스 컴포넌트를 사용하고 언제 Functional 컴포넌트를 사용할까요?)\n\nComponent 에서 state 또는 [life cycle methods](https://reactjs.org/docs/react-component.html#the-component-lifecycle) 를 필요로 한다면 Class component를 사용하고 그렇지 않다면 Functional component를 사용할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n7. ### What are Pure Components?\n\n#### (순수 컴포넌트란 무엇인가요?)\n\n[PureComponent](http://lucybain.com/blog/2018/react-js-pure-component)는 동일한 상태에서는 동일한 결과를 반환합니다. [shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate) 메서드를 다룰 수 있다는 점을 제외하고는 component와 동일합니다.  \nprops 또는 state 가 변경될 때 PureComponent 는 state 와 props 에 대해 [Shallow Compare](https://reactjs.org/docs/shallow-compare.html)을 수행합니다.  \n반면 component는 현재 props와 변형될 state를 비교하지 않습니다. 그렇기 때문에 component는 shouldComponentUpdate가 호출 될 때 마다 다시 render 됩니다. (shouldComponentUpdate의 기본값은 true 이기 때문에)\n\n8. ### What is state in ReactJS?\n\n#### (state란 무엇인가요?)\n\nComponent [State](https://reactjs.org/docs/faq-state.html) 는 component의 life cycle 동안 변경될 수 있는 정보를 담고 있는 객체입니다. 우리는 state를 가능한 단순하게 만들고 state 의 구성 요소의 수를 최소화하기 위해 노력해야 합니다.\n\nmessage state를 가진 user component 를 생성해보겠습니다.\n\n```js\nclass User extends React.Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      message: \"Welcome to React world\"\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](./public/state.jpg)\n   \n[상단으로 ✨](#목차)\n   \n9. ### What is props in ReactJS?\n\n#### (props란 무엇인가요?)\n\n[Props](https://reactjs.org/docs/components-and-props.html) 는 HTML 태그 속성과 유사한 규칙을 사용하여 React component 에 전달되는 값을 포함하는 단일 값 또는 객체입니다. 부모 component 에서 자식 component 로 전달되는 데이터 입니다.\n\nReact에서 props 의 목적은 아래와 같은 기능을 component에 제공하는 것 입니다.\n\n1. 사용자 정의 데이터를 React component 로 전달할 수 있습니다.\n2. State 변경을 Trigger 할 수 있습니다.\n3. Component 의 render 메서드 안에서 this.props.reactProp 로 접근하여 사용할 수 있습니다.\n\n예를 들어, reactProp를 받는 element 를 만들고\n\n```js\n\u003cElement reactProp=\"1\" /\u003e\n```\n\n이 \"reactProp\" (또는 사용자가 찾은 정의한) props는 React를 사용하여 생성된 component에서 접근이 가능하고, React의 native props 영역에 포함된 속성이 됩니다.\n\n```js\nprops.reactProp;\n```\n   \n[상단으로 ✨](#목차)\n   \n10. ### What is the difference between state and props?\n\n#### (state와 props의 차이점은 무엇인가요?)\n\nprops와 state는 모두 JavaScript 객체입니다. 두가지 다 렌더링 결과에 영향을 주는 정보를 가지고 있지만, component 와 관련된 기능면에서 차이가 있습니다.  \nprops는 함수 매개변수와 같이 component 요소로 전달됩니다. state 는 component 안에서 관리되고 사용할 변수 선언과 비슷합니다.\n   \n[상단으로 ✨](#목차)\n   \n11. ### Why should not we update the state directly?\n\n#### (state를 직접 업데이트 하면 안되는 이유는 무엇인가요?)\n\nstate를 직접 업데이트 하려고 한다면 component 는 re-render 되지 않습니다.\n\n```js\n//Wrong\nthis.state.message =”Hello world”;\n```\n\n그 대신 setState 메서드를 사용해야합니다. setState는 component state 업데이트에 대한 예약을합니다. state 가 변경되면 component는 re-rendering 할 것 입니다.\n\n```js\n//Correct\nthis.setState({message: ‘Hello World’});\n```\n\nNote: 상태를 할당할 수 있는 곳은 constructor 가 유일합니다. (외부에서 다이렉트로 state를 할당하지 말라는 뜻 같습니다.)\n   \n[상단으로 ✨](#목차)\n   \n12. ### What is the purpose of callback function as an argument of setState?\n\n#### (setState에서 callback의 역할은 무엇인가요?)\n\ncallback 함수는 setState가 끝난 후 그리고 component 가 re-rendering 된 후 호출됩니다. setState는 비동기적으로 동작합니다. callback 함수는 모든 작업이 마무리된 후 사용됩니다.\n\n```js\nsetState({ name: \"sudheer\" }, () =\u003e\n  console.log(\"The name has updated and component re-rendered\")\n);\n```\n\n#### Note: callback 함수를 이용하는 것보단 lifecycle 메서드를 이용하는 것이 좋습니다.\n   \n[상단으로 ✨](#목차)\n   \n13. ### What is the difference of event handling between HTML and React?\n\n#### (HTML과 React의 이벤트 처리 차이점은 무엇인가요?)\n\n아래는 HTML과 React 의 이벤트처리의 몇 가지 차이점입니다.\n\nHTML 에서는 이벤트 이름이 소문자여야 합니다.\n\n```html\n\u003cbutton onclick=\"activateLasers()\"\u003e\u003c/button\u003e\n```\n\n반면 React는 camelCase 를 사용합니다.\n\n```html\n\u003cbutton onClick=\"{activateLasers}\"\u003e\u003c/button\u003e\n```\n\nHTML 에서는 기본 이벤트 동작을 막기위해 false 를 반환할 수 있습니다.\n\n```html\n\u003ca href=\"#\" onclick=\"console.log('The link was clicked.'); return false\" /\u003e\n```\n\n반면 React는 preventDefault 메서드를 호출해야합니다.\n\n```js\nfunction handleClick(e) {\n  e.preventDefault();\n  console.log(\"The link was clicked.\");\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n14. ### How to bind methods or event handlers in JSX callbacks?\n\n#### (This를 바인딩하는 방법은 어떤 것들이 있나요?)\n\n3가지의 방법이 있습니다.\n\n1. 생성자에서의 바인딩: JS 의 Class 에서 메서드는 기본적으로 바인딩 되지 않습니다. 클래스 메서드로 지정된 React의 event handlers 에서도 마찬가지 입니다.  \n   일반적으로 다음과같이 constructor 바인딩합니다.\n\n```js\nconstructor(props) {\n  super(props);\n  this.handleClick = this.handleClick.bind(this);\n}\n\nhandleClick() {\n  // Perform some logic\n}\n```\n\n2. 공통 클래스 필드 구문: 생성자에서의 바인딩 방법을 원하지 않는다면, 공용 클래스 필드 구문을 이용하여 callback 을 올바르게 바인딩할 수 있습니다.\n\n```js\nhandleClick = () =\u003e {\n  console.log(\"this is:\", this);\n};\n\n\u003cbutton onClick={this.handleClick}\u003e Click me \u003c/button\u003e;\n```\n\n3. [arrow function](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98)을 이용한 바인딩\n   아래와 같이 바로 arrow function 을 이용하여 바인딩 해줄 수 있습니다.\n\n```html\n\u003cbutton onClick={(e) =\u003e this.handleClick(e)}\u003e\n  Click me\n\u003c/button\u003e\n```\n\nNote: 만약 callback 이 하위 component 에 props 로 전달되면 component는 re-rendering 될 수 있습니다. 이럴 경우 성능을 고려하였을때 1번 또는 2번의 방식을 사용하는 것이 좋습니다.\n   \n[상단으로 ✨](#목차)\n   \n15. ### How to pass a parameter to an event handler or callback?\n\n#### (이벤트 핸들러 또는 콜백에 매개변수를 어떻게 전달하나요?)\n\narrow function 으로 감싸서 event handler 에게 매개변수를 전달할 수 있습니다.\n\n```js\n\u003cbutton onClick={() =\u003e this.handleClick(id)} /\u003e\n```\n\n위의 방법은 아래와 같이 method 를 사용하는 것과 같습니다\n\n```html\n\u003cbutton onClick=\"{this.handleClick.bind(this,\" id)} /\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n16. ### What are synthetic events in ReactJS?\n\n#### (React에서의 합성 이벤트는 무엇인가요?)\n\n[synthetic event](https://reactjs.org/docs/events.html) 는 브라우저의 기본 이벤트를 감싼 cross-browser wrapper 입니다. API는 모든 브라우저에서 동작한다는 점을 제외하면, stopPropagation () 및 preventDefault () 를 포함해 브라우저 네이티브 이벤트와 같은 인터페이스를 가지고 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n17. ### What is inline conditional expressions?\n\n#### (인라인 조건식은 무엇인가요?)\n\n조건부 표현식을 표현하기 위해 if 문 또는 삼항 연산자를 사용할 수 있습니다. 이런 표현법 외에도 중괄호로 묶은 다음 JS의 논리 연산자 (\u0026\u0026) 를 붙여 JSX 표현식에 포함시킬 수 있습니다.\n\n```html\n\u003ch1\u003eHello!\u003c/h1\u003e\n{messages.length \u003e 0 \u0026\u0026\n\u003ch2\u003e\n  You have {messages.length} unread messages.\n\u003c/h2\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n18. ### What is Key and benefit of using it in lists?\n\n#### (list 에서 key를 사용했을 때의 이점은 무엇인가요?)\n\n[\"Key\"](https://reactjs.org/docs/lists-and-keys.html)는 목록을 만들때 포함시켜야하는 특수한 속성입니다. \"Key\"는 목록의 변경사항, 추가 또는 제거된 항목을 분별할 수 있도록 도와줍니다.\n\n예를 들어, 데이터의 키를 자주 목록의 \"Key\"로 사용합니다.\n\n```js\nconst todoItems = todos.map(todo =\u003e \u003cli key={todo.id}\u003e{todo.text}\u003c/li\u003e);\n```\n\nWhat is ReactJS? (React란 무엇인가요?)\n렌더링 된 목록에 안정적인 ID가 없을 경우 마지막 수단으로 index 값을 이용할 수 있습니다.\n\n```js\nconst todoItems = todos.map((todo, index) =\u003e \u003cli key={index}\u003e{todo.text}\u003c/li\u003e);\n```\n\nNote:\n\n1. 항목 순서가 변경 될 가능성이 있는 경우 index를 이용하는 것은 좋지 않습니다. 성능에 부정적인 영향을 미치고 component state에 문제가 발생할 수 있습니다.\n2. list를 별도의 component로 뽑아 사용하는 경우 li 태그 대신 list component 요소에 key를 적용하세요\n\nlist 에 key 가 없으면 콘솔에 경고가 표시됩니다.\n   \n[상단으로 ✨](#목차)\n   \n19. ### What is the use of create refs?\n\n#### (ref의 용도는 무엇인가요?)\n\n두 가지의 접근법이 있습니다.\n\n최근에 추가된 접근 방식입니다. [create ref](https://reactjs.org/docs/refs-and-the-dom.html)는 element 요소에 대한 참조를 반환하는데 사용할 수 있습니다. DOM의 요소나 compoennt 에 직접 접근해야 될 경우 유용할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n20. ### How to create refs?\n\n#### (create refs를 어떻게 만드나요?)\n\nRef는 React.createRef() 메서드를 사용하여 생성합니다. ref attribute 을 통해 React elements 에 첨부됩니다. component 전체에서 사용하고 싶다면 constructor에서 instance property 로 ref를 할당하면 됩니다.\n\n```js\nclass 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\n2. React의 버전과 관계없이 ref callback 을 사용할 수 있습니다. 예를들어 serach bar component의 input element는 다음과 같이 접근합니다.\n\n```js\nclass 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}\n      /\u003e\n    );\n  }\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n21. ### What are forward refs?\n\n#### (forward refs 란 무엇인가요?)\n\nRef Forwarding 은 ref를 받아 child component 에게 전달하는 기능을합니다.\n\n```js\nconst 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:\nconst ref = React.createRef();\n\u003cButtonElement ref={ref}\u003e{\"Forward Ref\"}\u003c/ButtonElement\u003e;\n```\n   \n[상단으로 ✨](#목차)\n   \n22. ### Which is preferred option with in callback refs and findDOMNode()?\n\n#### (callback refs 와 findDOMNode 중에 어떤것을 더 선호하나요?)\n\nfindDOMNode API 보다 callback refs를 사용하는 것이 좋습니다. [findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode)는 향후 개선사항에서 React의 특성을 막기 떄문입니다.\n\nfindDOMNode 를 사용하는 legacy 한 방식입니다.\n\n```js\nclass MyComponent extends Component {\n  componentDidMount() {\n    findDOMNode(this).scrollIntoView();\n  }\n\n  render() {\n    return \u003cdiv /\u003e;\n  }\n}\n```\n\n권장하는 방법입니다.\n\n```js\nclass MyComponent extends Component {\n  componentDidMount() {\n    this.node.scrollIntoView();\n  }\n\n  render() {\n    return \u003cdiv ref={node =\u003e (this.node = node)} /\u003e;\n  }\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n23. ### Why are String Refs legacy?\n\n#### (왜 String Refs 는 legacy가 되었나요?)\n\n만약 예전 React에서 ref 를 다뤄봤다면, ref={'textInput'} 과 같은 ref 의 속성이 string 이고 DOM Node가 refs.textInput 으로 접근하는 API 방식에 익숙할 것 입니다.  \nString refs 는 아래와 같은 문제들이 있기 떄문에 legacy 를 고려하였습니다. React v16 에서 String refs는 제거되었습니다.\n\n1. String refs 는 실행중인 component 요소를 추적하도록 강제화합니다. 또 react module 을 stateful 하게 만듭니다. bundle시 react module 들이 중복될 때\n   이상한 오류를 발생시킵니다.\n2. 라이브러리를 추가하여 String Refs를 Child component 에 전달하면, 사용자는 다른 ref를 추가할 수 없게됩니다. Callback refs를 이용한다면 이런 문제를 해결할 수 있습니다.\n3. Flow 와 같은 static 분석에서는 동작하지 않습니다. Flow 는 string refs를 this.refs 같은 형태로 표시하도록 만드는 마법을 추측할 수 없습니다. callback ref는 String refs 보다 Flow 와 친밀합니다.\n4. 대부분의 사람들이 \"render callback\" 패턴으로 동작하기를 기대하지만 그렇게 동작하지 않습니다.\n\n```js\nclass MyComponent extends Component {\n  renderRow = index =\u003e {\n    // 이것은 동작하지 않습니다. Ref는 MyComponent가 아닌 DataTable 에 연결될 것입니다.\n    return \u003cinput ref={\"input-\" + index} /\u003e;\n\n    // 이것은 동작합니다. Callback refs는 굉장합니다.\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[상단으로 ✨](#목차)\n   \n24. ### What is Virtual DOM?\n\n#### (가상돔이란 무엇인가요?)\n\n가상돔이란 in-memory 즉 Real DOM의 메모리상에서의 표현입니다. UI의 표현은 메모리에 유지되고 Render함수와 화면을 표시하는 사이에 Real DOM 과 동기화됩니다. 이런 단계를 reconciliation 라고 부릅니다.\n   \n[상단으로 ✨](#목차)\n   \n25. ### How Virtual DOM works?\n\n#### [(가상돔은 어떻게 동작하나요?)](https://www.youtube.com/watch?v=BYbgopx44vo)\n\n가상돔은 세 가지의 간단한 단계로 동작합니다.\n\n1. 데이터가 변경될 때 전체 UI 는 가상돔안에서 re-rendered 됩니다.\n\n![vdom](./public/vdom1.png)\n\n2. 그런 다음 변경되기전 DOM 과 새로운 변경된 DOM 의 변경점을 계산합니다.\n\n![vdom](./public/vdom2.png)\n\n3. 계산이 완료되면 실제 DOM 에서 계산된 변경점들만 업데이트됩니다.\n\n![vdom](./public/vdom3.png)\n   \n[상단으로 ✨](#목차)\n   \n26. ### What is the difference between Shadow DOM and Virtual DOM?\n\n#### (Shadow DOM과 Virtual DOM의 차이점은 무엇인가요?)\n\nShadow DOM은 web component의 scope 및 CSS scope 지정을 위해 설계된 web browser 기술입니다. Virtual DOM 은 browser API를 기반으로 JS 라이브러리에서 구현되는 개념입니다.\n   \n[상단으로 ✨](#목차)\n   \n27. ### What is React Fiber?\n\n#### (React Fiber란 무엇인가요?)\n\nReact Fiber란 React v16 에서 핵심 알고리즘을 재구현 한것입니다. React Fiber 의 목표는 애니메이션, 레이아웃, 제스처, 작업을 일시정지하고, 중단 또는 재사용, 여러 유형의 업데이트 우선순위 조절, 동시성등 여러 기본사항에 대한 성능을 높이는 것 입니다.\n   \n[상단으로 ✨](#목차)\n   \n28. ### What is the main goal of React Fiber?\n\n#### (React Fiber의 주요 목표는 무엇인가요?)\n\nReact Fiber 의 목표는 애니메이션, 레이아웃, 제스처등의 성능을 높이는 것 입니다. 주요 목적은 incremental rendering 입니다.\n\n**incremental rendering:** 렌더링 작업을 청크로 쪼개고 여러 프레임으로 분산 시키는 기능입니다.\n   \n[상단으로 ✨](#목차)\n   \n29. ### What are controlled components?\n\n#### (controlled components 란 무엇인가요?)\n\n입력 요소를 제어하는 component를 controlled components 라고 부릅니다. 모든 상태 변경에는 연관된 handler funciton 이 있습니다.\n\n예를 들어, 이름을 대문자로 쓰려면 아래 handleChange을 이용할 수 있습니다.\n\n```js\nhandleChange(event) {\n  this.setState({value: event.target.value.toUpperCase()})\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n30. ### What are uncontrolled components?\n\n#### (uncontrolled components 란 무엇인가요?)\n\nuncontrolled components란 내부적으로 자기 자신의 state를 가지고 있는 component입니다. 현재 필요한 값을 찾기 위해 ref를 사용하여 DOM query를 할 수 있습니다. 이것은 전통적인 HTML 과 비슷합니다.\n\n아래의 UserProfile Component 에서의 이름 입력은 ref를 사용하여 접근합니다.\n\n```js\nclass 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대부분의 경우 forms 을 제어할 때는 controlled component 를 사용하는 것을 추천합니다.\n   \n[상단으로 ✨](#목차)\n   \n31. ### What is the difference between createElement and cloneElement?\n\n#### (createElement와 cloneElement의 차이점은 무엇인가요?)\n\nUI 의 object representation으로 사용될 react element를 만들기 위해 JSX element 는 React.createElement() 함수로 변환됩니다. cloneElement는 element 를 복사하고 새로운 props 를 전달하는데 사용됩니다.\n   \n[상단으로 ✨](#목차)\n   \n32. ### What is Lifting State Up in React?\n\n#### (React 에서 Lifting State Up 은 무엇인가요?)\n\n여러 component 들이 동일한 변경 데이터를 공유해야하는 경우 가까운 부모 component 로 state를 올리는 것이 좋습니다. 즉, 두개의 자식 component가 부모에 있는 동일한 데이터를 공유할 때 두개의 자식 component 들은 local state를 유지하는 대신, 부모로 state를 올려야 합니다.\n   \n[상단으로 ✨](#목차)\n   \n33. ### What are the different phases of component lifecycle?\n\n#### (component 라이프사이클 단계는 무엇이 다른가요?)\n\n라이프 사이클에는 4가지 단계가 있습니다.\n\n1. Initialization: component 는 초기 state 및 props 를 세팅을 준비합니다.\n2. Mounting: component 가 브라우저 DOM에 mount 될 준비가 되었습니다. 이 단계에서는 componentWillMount, componentDidMount 를 사용할 수 있습니다.\n3. Updating: 새로운 props를 보내거나 state를 업데이트하여 component 를 두가지 방법으로 update 할 수 있습니다. 이 단계에서는 shouldComponentUpdate (), componentWillUpdate () 및 componentDidUpdate 를 사용할 수 있습니다.\n4. Unmounting: 브라우저 DOM에서 component 가 필요하지 않을때 mount를 해제시킵니다. 이 단계에서는 componentWillUnmount 를 사용할 수 있습니다.\n\n![lifecycle](./public/phases.png)\n   \n[상단으로 ✨](#목차)\n   \n34. ### What are the lifecycle methods of React?\n\n#### (React의 lifecycle methods는 무엇인가요?)\n\n- componentWillMount: rendering 전에 실행됩니다.\n- componentDidMount: 첫 rendering 후에 실행됩니다. 이 단계에서 모든 AJAX 요청, DOM 또는 State의 update, event listener 가 설정되어야합니다.\n- componentWillReceiveProps: 특정 props update가 state 변화를 트리거할 때 실행됩니다.\n- shouldComponentUpdate: 컴포넌트의 업데이트 여부를 결정합니다. 기본적으로 return 값은 true 입니다. state 또는 props 가 업데이트 된 후 component 를 render 할 필요가 없을 경우 false를 return 할 수 있습니다. component가 새로운 props를 받으면서 생기는 rerender 을 막을 수 있습니다. 성능을 향상시키는데 좋습니다.\n- componentWillUpdate: shouldComponentUpdate에서 true가 반환되었을 때 state \u0026 props 의 변화를 확인하고 re-rendering 되기전에 실행합니다.\n- componentDidUpdate: 주로 props 나 state 변경에 대한 response 로 DOM을 업데이트할 때 사용됩니다.\n- componentWillUnmount: 네트워크 요청을 취소하거나, component와 관련된 모든 event listeners 를 제거하는데 사용됩니다.\n   \n[상단으로 ✨](#목차)\n   \n35. ### What are Higher-Order components?\n\n#### (Higher-Order components 는 무엇인가요?)\n\nHigher-Order component(HOC)는 component를 받아서 새로운 component를 return 하는 함수입니다. HOC는 React의 특성에서 파생된 패턴입니다.\n동적으로 제공되는 하위 component들을 그대로 사용하지만 입력받은 component를 수정하거나 복사하지 않기 때문에 \"순수 components\" 라고 부릅니다.\n\n```js\nconst EnhancedComponent = higherOrderComponent(WrappedComponent);\n```\n\nHOC는 아래와 같은 많은 use cases 에 사용할 수 있습니다.\n\n- Code reuse, logic and bootstrap abstraction\n- Render High jacking\n- State abstraction and manipulation\n- Props manipulation\n   \n[상단으로 ✨](#목차)\n   \n36. ### How to create props proxy for HOC component?\n\n#### (HOC component 위한 props proxy 만드는법?)\n\n다음과 같이 component에 전달된 props를 props proxy로 추가 / 편집 할 수 있습니다.\n\n```js\nfunction 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   \n37. ### What is context?\n\n#### (context가 뭔가요?)\n\nContext 는 모든 레벨에 수동으로 props를 전달하지 않고 component tree를 통해 데이터를 전달할 수 있도록 제공해줍니다.\n예를 들어, 인증된 유저, locale 설정, UI 테마는 많은 application 들에서 접근해야합니다.\n\n```js\nconst { Provider, Consumer } = React.createContext(defaultValue);\n```\n   \n[상단으로 ✨](#목차)\n   \n38. ### What is children prop?\n\n#### (children prop란 무엇인가요?)\n\nChildren prop는 component를 data로 다른 component로 전달할 수 있도록 해주는 prop(this.prop.children)입니다.  \n당신이 사용하는 prop 처럼 사용할 수 있습니다. React API에는 이 props와 함께 사용할 수 있는 React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray등 여러가지 방법이 있습니다.\n\nchildren prop의 간단한 사용법은 아래와 같습니다.\n\n```js\nvar MyDiv = React.createClass({\n  render: function() {\n    return \u003cdiv\u003e{this.props.children}\u003c/div\u003e;\n  }\n});\n\nReactDOM.render(\n  \u003cMyDiv\u003e\n    \u003cspan\u003eHello\u003c/span\u003e\n    \u003cspan\u003eWorld\u003c/span\u003e\n  \u003c/MyDiv\u003e,\n  node\n);\n```\n   \n[상단으로 ✨](#목차)\n   \n39. ### How to write comments in ReactJS?\n\n#### (React에서 주석은 어떻게 쓰나요?)\n\nReactJS / JSX 에서의 주석은 JavaScript와 유사합니다. 한 줄 및 여러 줄 주석들은 모두 중괄호로 감쌉니다.\n\n**Single-line comments:**\n\n```jsx\n\u003cdiv\u003e\n  {/* Single-line comments */} // In vanilla JavaScript, the single-line\n  comments are represented by double slash(//) Welcome {user}, Let's play React\n\u003c/div\u003e\n```\n\n**Multi-line comments:**\n\n```jsx\n\u003cdiv\u003e\n  {/* Multi-line comments for more than\n   one line */}\n  Welcome {user}, Let's play React\n\u003c/div\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n40. ### What is the purpose of using super constructor with props argument?\n\n#### (props argument와 함께 super constructor를 사용하는 목적은 무엇인가요?)\n\n자식 클래스의 constructor 는 super() 메서드가 호출되기 전까지 this 참조 사용할 수 없습니다. es6 의 sub-classes 에서도 동일하게 적용됩니다.\nsuper()에 props를 파라미터로 전달하는 이유는 child constructors에서 this.props로 접근하기 위해서입니다.\n\n**Passing props**\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n\n    console.log(this.props); // Prints { name: 'sudheer',age: 30 }\n  }\n}\n```\n\n**Not passing props:**\n\n```js\nclass 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: 'sudheer',age: 30 }\n  }\n\n  render() {\n    // No difference outside constructor\n    console.log(this.props); // Prints { name: 'sudheer',age: 30 }\n  }\n}\n```\n\n위의 code snippets은 this.props의 동작이 constructor 만 다른 것을 보여줍니다. 생성자 밖에서의 동작은 동일합니다.\n   \n[상단으로 ✨](#목차)\n   \n41. ### What is reconciliation?\n\n#### ([reconciliation](https://reactjs.org/docs/reconciliation.html)란 무엇인가요?)\n\nComponent 의 props 또는 state가 변경될 때 React는 새로 반환된 component를 이전에 rendered 된 component와 비교하여 DOM update가 필요한지 결정합니다. 두개의 component가 같지 않을때 React는 DOM을 update합니다. 이를 프로세스 reconciliation 라고합니다.\n   \n[상단으로 ✨](#목차)\n   \n42. ### How to set state with a dynamic key name?\n\n#### (동적 key name 으로 어떻게 set State를 하나요?)\n\n만약 ES6 나 babel transpiler 사용하여 JSX 코드를 변환하는 경우 computed property names 으로 작업을 할 수 있습니다.\n\n```js\nhandleInputChange(event) {\n  this.setState({ [event.target.id]: event.target.value })\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n43. ### What would be the common mistake of function being called every time the component renders?\n\n#### (render가 될 때마다 호출되는 function 의 일반적인 실수는 무엇인가요?)\n\nfunction을 parameter로 전달하는 동안 function 이 호출되지 않았는지 확인해야합니다.\n\n```js\nrender() {\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괄호 없이 function 을 전달하세요\n\n```js\nrender() {\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   \n44. ### Why is it necessary to capitalize component names?\n\n#### (왜 Component 의 이름은 대문자로 표기해야하나요?)\n\nComponent 들은 DOM element가 아니기 때문에 대문자 표기가 필요합니다. component들은 constructors입니다. 또한 JSX 에서의 소문자 태그 이름은 component가 아닌 HTML 요소를 나타내기 때문입니다.\n   \n[상단으로 ✨](#목차)\n   \n45. ### Why React uses className over class attribute?\n\n#### (왜 React 는 class를 사용하지 않고 className 속성을 사용하나요?)\n\nclass는 Javascript 의 키워드입니다. JSX는 Javascript 의 확장입니다. 그것이 React가 class 대신 className을 사용하는 이유입니다. classNames prop 로 문자열을 전달하세요\n\n```js\nrender() {\n  return \u003cspan className={'menu navigation-menu'}\u003e{'Menu'}\u003c/span\u003e\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n46. ### What are fragments?\n\n#### (fragments는 무엇인가요 ?)\n\nfragments는 여러 Component 들을 반환하는데 사용되는 React의 일반적인 패턴입니다. fragments를 사용하면 DOM에 node 들을 추가하지 않고 하위 목록을 그룹화 할 수 있습니다.\n\n```js\nrender() {\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더 짧은 구문도 있지만, 많은 tool 들에서 지원되지 않습니다.\n\n```js\nrender() {\n  return (\n    \u003c\u003e\n      \u003cChildA /\u003e\n      \u003cChildB /\u003e\n      \u003cChildC /\u003e\n    \u003c/\u003e\n  )\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n47. ### Why fragments are better than container divs?\n\n#### (왜 fragments 가 div 보다 좋나요 ?)\n\n1. Fragments 는 빠르고 DOM node를 만들지 않기 때문에 메모리를 적게 사용합니다. 이것은 매우 크고 깊은 트리에서 이익을 가집니다.\n2. Flexbox 나 CSS Grid과 같은 CSS 메커니즘에는 특별한 부모 - 자식 관계를 가지고 있습니다. 중간에 div 들을 추가하게 된다면 layout을 유지하기 어려워집니다.\n3. DOM Inspector은 덜 복잡합니다.\n   \n[상단으로 ✨](#목차)\n   \n48. ### What are portals in React?\n\n#### (React 에서 portals은 무엇입니까 ?)\n\nportals 은 상위 Component 의 DOM 계층 구조 외부에 존재하는 DOM 노드로 자식을 render 하는데 권장되는 방법입니다.\n\n```js\nReactDOM.createPortal(child, container);\n```\n\n첫 번째 인자는 렌더링 가능한 React 하위요소 (element, string, fragment) 입니다. 두 번째 인자는 DOM element 입니다.\n   \n[상단으로 ✨](#목차)\n   \n49. ### What are stateless components?\n\n#### (stateless 컴포넌트는 무엇인가요?)\n\nComponent의 동작과 상태가 독립적이라면 stateless component 를 구성할 수 있습니다. stateless component 는 class나 function 을 이용하여 만들 수 있습니다.\nlifecycle hook을 사용해야하는 경우가 아니라면 function component를 사용할 수 있습니다. function component를 사용한다면 많은 이점이 있습니다.\n쓰기, 이해 그리고 테스트가 빠르고 쉽습니다.\n   \n[상단으로 ✨](#목차)\n   \n50. ### What are stateful components?\n\n#### (stateful components 는 무엇인가요?)\n\nComponent 의 동작이 component의 state에 의존한다면 stateful component라고 부를 수 있습니다. stateful component 는 항상 class components 이고, constructor에서 초기화합니다.\n\n```js\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { count: 0 };\n  }\n\n  render() {\n    // ...\n  }\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n51. ### How to apply validation on props in React?\n\n#### (React에서 Props의 유효성검사를 적용하나요 ?)\n\nApplication 이 개발 모드에서 실행될 때 React는 자동으로 component에 설정된 모든 props 들의 유효성을 체크합니다. 타입이 올바르지 않다면 React는 console에 경고 메세지를 생성할 것 입니다.\n성능에 영향이 가기 때문에 production 모드에서는 사용하지 않습니다. 필수 props는 isRequired로 정의됩니다.\n\n정의 된 props 타입\n\n- PropTypes.number\n- PropTypes.string\n- PropTypes.array\n- PropTypes.object\n- PropTypes.func\n- PropTypes.node\n- PropTypes.element\n- PropTypes.bool\n- PropTypes.symbol\n- PropTypes.any\n\nUser component 에 대한 PropTypes 를 아래와 같이 정의할 수 있습니다.\n\n```js\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nclass 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\nNote: React v15.5 에서 PropType은 React.PropTypes 에서 prop-types 라이브러리로 옮겨졌습니다.\n   \n[상단으로 ✨](#목차)\n   \n52. ### What are the advantages of React?\n\n#### (React의 장점은 무엇인가요?)\n\n1. 가상 DOM을 이용하여 application 의 성능을 향상시킵니다.\n2. JSX는 코드를 읽고 쓰는 것을 쉽게 만들어줍니다.\n3. 클라이언트와 서버측 (SSR) 모두 render 됩니다.\n4. 오직 view library 이기 때문에 다른 프레임워크들 (Angular, Backbone)과 손쉽게 통합 할 수 있습니다.\n5. Jest 와 같은 도구를 사용하여 단위 및 통합테스트를 쉽게 작성할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n53. ### What are the limitations of React?\n\n#### (React의 한계는 무엇인가요?)\n\n1. React 전체 framework 가 아닌 view를 위한 library 일 뿐입니다.\n2. 웹 개발을 처음 접하는 초심자들에게는 학습 곡선이 있습니다.\n3. 기존의 MVC framework 에 React 를 합치기 위해서는 몇 가지 추가 구성이 필요합니다.\n4. 인라인 템플릿 및 JSX를 사용하면 코드가 복잡해집니다.\n5. 과도한 엔지니어링 또는 boilerplate 로 이어지는 작은 components 들이 너무 많습니다.\n   \n[상단으로 ✨](#목차)\n   \n54. ### What are error boundaries in React v16?\n\n#### (React v16 에서 error boundaries는 무엇인가요?)\n\nError boundaries 는 하위 component tree 에서 Javascript error 를 catch 하고, 에러를 기록하고, 오류가 발생한 component tree가 아닌 대체 UI를 표현해 주는 component 입니다.\n\nclass component 는 componentDidCatch 라는 새로운 lifecycle 메서드를 정의하면 Error boundaries 됩니다\n\n```js\nclass ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  componentDidCatch(error, info) {\n    // Display fallback UI\n    this.setState({ hasError: true });\n    // You can also log the error to an error reporting service\n    logErrorToMyService(error, info);\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그 다음 일반 component 로 사용합니다.\n\n```js\n\u003cErrorBoundary\u003e\n  \u003cMyWidget /\u003e\n\u003c/ErrorBoundary\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n55. ### How error boundaries handled in React v15?\n\n#### (React v15 에서는 어떻게 error boundaries 처리하나요?)\n\nReact v15 에서는 unstable_handleError 메서드를 사용하여 error boundaries 에 대한 기본적인 지원을 했습니다. React v16에서 componentDidCatch로 이름이 변경되었습니다.\n   \n[상단으로 ✨](#목차)\n   \n56. ### What are the recommended ways for static type checking?\n\n#### (권장되는 static 한 타입 체크방법은 무엇인가요?)\n\n일반적으로 우리는 React application 에서 타입 검사를 하기 위해 PropTypes library (React.PropTypes를 React v15.5 부터는 prop-types package 로 옮겼습니다)를 사용합니다.\n대규모의 코드 베이스에서는 compile time 에서 타입 체크를 하고 자동 완성 기능을 제공해주는 Flow 나 TypeScript 와 같은 static type checkers 를 이용하는 것이 좋습니다.\n   \n[상단으로 ✨](#목차)\n   \n57. ### What is the use of react-dom package?\n\n#### (react-dom 패키지의 사용법은 무엇인가요?)\n\nReact-dom 패키지는 App의 최상위 레벨에서 사용할 수 있는 DOM-specific 메서드를 제공합니다. 대부분의 Component 들은 이 모듈을 사용할 필요가 없습니다.\n패키지의 일부 메서드는 다음과 같습니다.\n\n- render()\n- hydrate()\n- unmountComponentAtNode()\n- findDOMNode()\n- createPortal()\n   \n[상단으로 ✨](#목차)\n   \n58. ### What is the purpose of render method of react-dom?\n\n#### (React dom의 render 메서드의 목적은 무엇인가요?)\n\nrender 메서드는 제공된 컨테이너의 DOM에 React element를 render 하고 Component에 대한 참조를 반환하는데 사용됩니다.\nReact element가 이전에 렌더링 되었다면 update 를 수행하고 최근의 변경사항을 반영하기 위해 필요에 따라 DOM을 변경합니다.\n\n```js\nReactDOM.render(element, container[, callback])\n```\n\n만약 optional callback 이 제공된다면, callback은 component 가 렌더링되거나 업데이트 된 후에 실행됩니다.\n   \n[상단으로 ✨](#목차)\n   \n59. ### What is ReactDOMServer?\n\n#### (ReactDOMServer 란 무엇인가요?)\n\nReactDOMServer 객체를 사용하면 component를 static markup(일반적으로 노드 서버에서 사용됩니다.) 으로 렌더링 할 수 있습니다.\n이 객체는 주로 서버사이드 렌더링(SSR) 에서 사용됩니다. 다음의 메서드는 서버 및 브라우저 환경 모두 사용할 수 있습니다.\n\n- renderToString()\n- renderToStaticMarkup()\n\n예를들어 Express, Hapi, Koa 같은 노드 기반의 웹서버를 실행할때 renderToString을 호출하여 root component 를 문자열로 렌더링 한 다음 response를 보낼 수 있습니다\n\n```js\n// using Express\nimport { renderToString } from \"react-dom/server\";\nimport MyPage from \"./MyPage\";\n\napp.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   \n60. ### How to use innerHTML in React?\n\n#### (React에서 innerHTML을 어떻게 사용하나요?)\n\ndangerouslySetInnerHTML 속성은 브라우저 DOM 에서 innerHTML 을 사용하기 위한 React 의 대체 속성입니다.\ninnerHTML과 마찬가지로 XXS (Cross-Site Scripting) 공격을 고려했을때 브라우저 DOM 에서 이 속성을 사용하는 것은 위험합니다.\n\\_\\_html 객체를 키로 HTML 텍스트를 값으로 전달하면됩니다.\n\n예제에서 MyComponent는 HTML 마크업을 설정하기 위해 dangerouslySetInnerHTML 속성을 사용하고 있습니다.\n\n```js\nfunction createMarkup() {\n  return { __html: \"First \u0026middot; Second\" };\n}\n\nfunction MyComponent() {\n  return \u003cdiv dangerouslySetInnerHTML={createMarkup()} /\u003e;\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n61. ### How to use styles in React?\n\n#### (React 스타일을 어떻게 사용하나요?)\n\nstyle 속성은 CSS 문자열 대신 camelCased 속성의 Javascript 객체를 허용합니다. 이것은 DOM Style Javascript 속성과 일치하며 효율적이고, XSS 보안의 허점을 방지할 수 있습니다.\n\n```js\nconst divStyle = {\n  color: \"blue\",\n  backgroundImage: \"url(\" + imgUrl + \")\"\n};\n\nfunction HelloWorldComponent() {\n  return \u003cdiv style={divStyle}\u003eHello World!\u003c/div\u003e;\n}\n```\n\nStyle의 key는 Javascript DOM Node (예 : node.style.backgroundImage)의 속성에 접근하는 것과 일관되게 하기 위해 camelCased 를 사용합니다.\n   \n[상단으로 ✨](#목차)\n   \n62. ### How events are different in React?\n\n#### (React 에서 이벤트는 어떻게 다른가요?)\n\nReact element 에서의 이벤트 처리는 몇가지 문법상 차이점이 있습니다.\n\n- React 이벤트 핸들러는 소문자보다는 camelCase 를 사용합니다.\n- JSX 에서는 문자열이 아닌 이벤트 핸들러를 통해 function 을 전달합니다.\n   \n[상단으로 ✨](#목차)\n   \n63. ### What will happen if you use setState() in constructor?\n\n#### (constructor 에서 setState를 사용하면 무슨일이 생기나요? )\n\nsetState() 를 사용할 때 객체 상태가 할당되고 또한 component 와 모든 자식들을 재렌더링 합니다.\n이런 에러를 봤을겁니다. `Can only update a mounted or mounting component`. 그래서 우리는 this.state 를 사용하여 constructor 내부의 변수를 초기화 해야합니다.\n   \n[상단으로 ✨](#목차)\n   \n64. ### What is the impact of indexes as keys?\n\n#### (index 가 key 로 미치는 영향은 무엇인가요?)\n\nReact element 가 추적할 수 있도록 key 는 안정적, 예측가능, 고유 하여야합니다.\n아래 코드 조각에서의 각 element 의 key 는 데이터를 따르지 않고 순서에 따라 결정됩니다.\n이것은 React 가 할 수 있는 최적화를 제한합니다.\n\n```js\n{\n  todos.map((todo, index) =\u003e \u003cTodo {...todo} key={index} /\u003e);\n}\n```\n\n만약 element 에 data 의 고유한 키값을 사용한다면, todo.id 가 목록에서 고유하고, 안정적이라고 가정한다면 React 는 elements 를 재평가 할 필요없이 element 를 재정렬 할 수 있습니다.\n\n```js\n{\n  todos.map(todo =\u003e \u003cTodo {...todo} key={todo.id} /\u003e);\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n65. ### Is it good to use setState() in componentWillMount() method?\n\n#### (componentWillMount 에서 setState를 사용하는게 좋나요 ?)\n\n`componentWillMount` 안에서는 비동기적인 초기화는 피하는 것이 좋습니다.\n`componentWillMount` 는 마운트가 실행되기 직전에 호출됩니다.\nrender () 전에 호출되기 때문에 상태를 설정하더라도 re-render 되지 않습니다.\n`componentWillMount` 에서는 side-effects or subscriptions 을 피해야합니다.\n우리는 `componentWillMount` 대신 `componentDidMount` 에서 component 초기화를 위한 비동기 호출을 실행해야 합니다.\n\n```js\ncomponentDidMount() {\n  axios.get(`api/todos`)\n    .then((result) =\u003e {\n      this.setState({\n        messages: [...result.data]\n      })\n    })\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n66. ### What will happen if you use props in initial state?\n\n#### (state 의 초기상태에서 props 를 사용하면 어떻게되나요?)\n\n만약 component 를 새로 고치지 않고 component 의 props 를 변경한다면 생성자 함수가 component 의 현재 상태를 업데이트 하지 않습니다.\n새로운 props 의 값이 표시되지 않습니다. state 의 초기화는 component 를 처음 만들 때만 실행됩니다.\n\n아래의 component 는 업데이트 된 input 의 값을 표시하지 않습니다.\n\n```js\nclass 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\nrender 메소드 안에서 props 를 사용하면 값이 업데이트 됩니다.\n\n```js\nclass 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   \n67. ### How do you conditionally render components?\n\n#### (조건에 따른 component 렌더링은 어떻게 하나요 ?)\n\n경우에 따라서 state 에 의존하여 다르게 component 를 렌더링 하기를 원할것이다.\nJSX 는 false 또는 undefined 때는 렌더링하지 않으므로 조건을 사용하여 특정 조건이 true 인 경우에만\ncomponent의 특정 부분을 렌더링 할 수 있습니다.\n\n```js\nconst MyComponent = ({ name, address }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003e{name}\u003c/h2\u003e\n    {address \u0026\u0026 \u003cp\u003e{address}\u003c/p\u003e}\n  \u003c/div\u003e\n);\n```\n\n만약 if-else 를 사용하기를 원한다면 삼항연산자를 쓰세요\n\n```js\nconst MyComponent = ({ name, address }) =\u003e (\n  \u003cdiv\u003e\n    \u003ch2\u003e{name}\u003c/h2\u003e\n    {address ? \u003cp\u003e{address}\u003c/p\u003e : \u003cp\u003e{\"Address is not available\"}\u003c/p\u003e}\n  \u003c/div\u003e\n);\n```\n   \n[상단으로 ✨](#목차)\n   \n68. ### Why we need to be careful when spreading props on DOM elements?\n\n#### (DOM element 에 props 를 spreading 할때 왜 조심해야 하나요?)\n\nprops 를 spreading 할 때 알려지지않은 HTML 속성을 추가 할 위험이 있습니다. 그것은 좋지않습니다.\n대신 ...rest 연산자를 사용하여 prop destructuring 을 할 수 있으므로 필요한 props 만 추가할 수 있습니다.\n\n```js\nconst ComponentA = () =\u003e (\n  \u003cComponentB isDisplay={true} className={\"componentStyle\"} /\u003e\n);\n\nconst ComponentB = ({ isDisplay, ...domProps }) =\u003e (\n  \u003cdiv {...domProps}\u003e{\"ComponentB\"}\u003c/div\u003e\n);\n```\n   \n[상단으로 ✨](#목차)\n   \n69. ### How you use decorators in React?\n\n#### (React 에서 decorators 는 어떻게 사용하나요?)\n\nClass component 를 하나의 function 으로 변환하는 방식으로 decorate 할 수 있습니다.\nDecorators 는 component 의 기능을 수정하기 위한 유연하고 읽기 쉬운 방법입니다.\n\n```js\n@setTitle(\"Profile\")\nclass Profile extends React.Component {\n  //....\n}\n\nconst 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\nNOTE: Decorators 는 ES7 에 포함되지 않았습니다. 현재 stage 2 에 제안되어 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n70. ### How do you memoize a component?\n\n#### (memoize component 는 어떻게 사용하나요?)\n\nfunction component 에 사용할 수 있는 memoize 라이브러리가 있습니다.\n예를 들면 `moize` 라이브러리는 다른 component 에 component 를 memoize 할 수 있습니다.\n\n```js\nimport moize from \"moize\";\nimport Component from \"./components/Component\"; // this module exports a non-memoized component\n\nconst MemoizedFoo = moize.react(Component);\n\nconst Consumer = () =\u003e {\n  \u003cdiv\u003e\n    {\"I will memoize the following entry:\"}\n    \u003cMemoizedFoo /\u003e\n  \u003c/div\u003e;\n};\n```\n   \n[상단으로 ✨](#목차)\n   \n71. ### How you implement Server Side Rendering or SSR?\n\n#### (Server Side Rendering(SSR) 을 어떻게 구현하나요?)\n\nReact 는 이미 Node 서버에서 렌더링을 처리할 수 있도록 준비되어 있습니다.\n특수한 버전의 DOM renderer 를 사용할 수 있으며, client side 와 동일한 패턴을 따릅니다.\n\n```js\nimport ReactDOMServer from \"react-dom/server\";\nimport App from \"./App\";\n\nReactDOMServer.renderToString(\u003cApp /\u003e);\n```\n\n이 method 는 HTML 을 문자열로 내보내고, 문자열은 서버 응답의 일부로 페이지 본문 내부에 배치 할 수 있습니다.\nclient side 에서 React 는 이미 렌더링된 content 를 감지하여 중단된 부분을 원활히 처리합니다.\n   \n[상단으로 ✨](#목차)\n   \n72. ### How to enable production mode in React?\n\n#### (React에서 어떻게 production 모드를 활성화 하나요)\n\nWebpack 의 DefinePlugin 메서드를 사용하여 NODE_ENV 를 production 으로 설정해야\npropType 의 유효성 검사 및 추가적인 경고 같은 것들을 제거할 수 있습니다.\n\nproduction 모드와는 별도로 코드를 minify 하면 Uglify 의 dead-code 의 제거와 주석을 제거하여 bundle 크기를 줄일 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n73. ### What is CRA and its benefits?\n\n#### (CRA는 무엇이고 CRA의 이점은 무엇인가요?)\n\nCreate-Reaction-App CLI 사용하면 설정 단계 없이 React applications 생성하고 실행할 수 있습니다.\n\nCRA 를 사용하여 Todo App 을 만듭니다\n\n```bash\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   \n[상단으로 ✨](#목차)\n   \n74. ### What is the lifecycle methods order in mounting?\n\n#### (마운팅에서 lifecycle 메서드의 순서는 무엇인가요?)\n\nlifecycle 메서드는 component 의 instance 가 생성되어 DOM에 삽입 될 때 호출됩니다.\n\n- constructor()\n- static getDerivedStateFromProps()\n- render()\n- componentDidMount()\n   \n[상단으로 ✨](#목차)\n   \n75. ### What are the lifecycle methods going to be deprecated in React v16?\n\n#### (React v16 에서 사용되지 않을 lifecycle 메서드는 무엇인가요?)\n\n안전하지 않은 코딩 방법이 될 수 있는 lifecycle 메서드는 비동기적으로 렌더링시 문제가 될 것 입니다.\n\n- componentWillMount()\n- componentWillReceiveProps()\n- componentWillUpdate()\n\nReact v16.3 부터는 UNSAFE\\_가 prefix 붙고, prefix 가 없는 버전은 React v17 에서 제거됩니다.\n   \n[상단으로 ✨](#목차)\n   \n76. ### What is the purpose of getDerivedStateFromProps() lifecycle method?\n\n#### (getDerivedStateFromProps() lifecycle 메서드의 목적은 무엇인가요?)\n\n새로운 정적 getDerivedStateFromProps() lifecycle 메서드는 component 가 인스턴스화 된 후, 다시 렌더링 되기 전에 호출됩니다.  \nobject 를 반환하여 state 를 update 하거나, null 을 반환하여 새로운 props 에서 state update 가 필요하지 않음을 나타낼 수 있습니다.\n\n```js\nclass MyComponent extends React.Component {\n  static getDerivedStateFromProps(props, state) {\n    // ...\n  }\n}\n```\n\n이 lifecycle 메서드는 componentDidUpdate() 와 함께 componentWillReceiveProps() 의 사용 사례에 적용할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n77. ### What is the purpose of getSnapshotBeforeUpdate() lifecycle method?\n\n#### (getSnapshotBeforeUpdate() lifecycle 메서드의 목적은 무엇인가요?)\n\n새로운 [getSnapshotBeforeUpdate()](https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate) lifecycle 메서드는 DOM update 직전에 호출됩니다.\n이 메서드의 반환값은 componentDidUpdate() 의 세번째 파라미터로 전달됩니다.\n\n```js\nclass MyComponent extends React.Component {\n  getSnapshotBeforeUpdate(prevProps, prevState) {\n    // ...\n  }\n}\n```\n\n이 lifecycle 메서드는 componentDidUpdate()와 함께 componentWillUpdate () 의 사용 사례에 적용할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n78. ### What is the difference between createElement() and cloneElement() methods\n\n#### (createElement() 와 cloneElement() 의 차이점은 무엇인가요?)\n\nJSX 에서 React element 는 UI element 를 타내는 React.createElement() 변환됩니다.  \nReact.cloneElement ()는 element 를 복제하고 새로운 props를 전달하는데 사용됩니다.\n   \n[상단으로 ✨](#목차)\n   \n79. ### What is the recommended way for naming components?\n\n#### (component 의 이름을 지정하는 권장방법은 무엇인가요?)\n\ndisplayName 대신 reference 를 이용하여 component 의 이름을 정하는 것을 추천한다.\n\ndisplayName 사용\n\n```js\nexport default React.createClass({\n  displayName: \"TodoApp\"\n  // ...\n});\n```\n\n추천 방법:\n\n```js\nexport default class TodoApp extends React.Component {\n  // ...\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n80. ### What is the recommended ordering of methods in component class?\n\n#### (component class 안에서 메서드의 추천 순서는 무엇인가요?)\n\n마운트에서 부터 렌더링 단계까지의 권장 메서드 지정 순서\n\n- static methods\n- constructor()\n- getChildContext()\n- componentWillMount()\n- componentDidMount()\n- componentWillReceiveProps()\n- shouldComponentUpdate()\n- componentWillUpdate()\n- componentDidUpdate()\n- componentWillUnmount()\n- click handlers or event handlers like onClickSubmit() or onChangeDescription()\n- getter methods for render like getSelectReason() or getFooterContent()\n- optional render methods like renderNavigation() or renderProfilePicture()\n- render()\n   \n[상단으로 ✨](#목차)\n   \n81. ### What is a switching component?\n\n#### (switching component 란 무엇인가요?)\n\nswitching component는 여러 component 중 하나의를 렌더링 하는 component 입니다. 우리는 props 값을 매핑하기 위해 object 를 사용해야합니다.\n\n예를 들어, switching component 는 페이지의 props 를 기반으로 다른 component 를 보여줍니다.\n\n```js\nimport HomePage from \"./HomePage\";\nimport AboutPage from \"./AboutPage\";\nimport ServicesPage from \"./ServicesPage\";\nimport ContactPage from \"./ContactPage\";\n\nconst PAGES = {\n  home: HomePage,\n  about: AboutPage,\n  services: ServicesPage,\n  contact: ContactPage\n};\n\nconst 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.\nPage.propTypes = {\n  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired\n};\n```\n   \n[상단으로 ✨](#목차)\n   \n82. ### Why we need to pass a function to setState()?\n\n#### (왜 setState 에 함수를 전달해야하나요?)\n\n이유는 setState 가 비동기적인 작업이기 때문입니다. 성능상의 이유로 state 의 변경은 일괄적으로 일어납니다, 그래서 setState() 의 호출 직후에 state가 변경되지 않을 수 있습니다.  \nstate 를 확실할 수 없기 때문에 setState()를 호출 할 때 현재의 state에 의존하면 안됩니다.  \n해결책은 이전 state를 인자로 사용하는 setState()에 함수를 전달하는 것입니다.  \n그렇게 하면 setState()가 가진 비동기성으로 인해 사용자가 접근할때 이전 state의 값을 가져오는 문제를 피할 수 있습니다.\n\n초기의 count 값이 0 이라고 가정하겠습니다. 세번의 증가연산 후의 값은 오직 1만 증가합니다.\n\n```js\n// assuming this.state.count === 0\nthis.setState({ count: this.state.count + 1 });\nthis.setState({ count: this.state.count + 1 });\nthis.setState({ count: this.state.count + 1 });\n// this.state.count === 1, not 3\n```\n\nsetState() 에 함수를 전달하면 올바르게 증가합니다.\n\n```js\nthis.setState((prevState, props) =\u003e ({\n  count: prevState.count + props.increment\n}));\n// this.state.count === 3 as expected\n```\n   \n[상단으로 ✨](#목차)\n   \n83. ### What is strict mode in React?\n\n#### (React 에서 strict mode 는 무엇인가요?)\n\nReact.StrictMode 는 application 의 잠재적인 문제를 강조 표시하는데 유용한 component 입니다. `\u003cFragment\u003e`처럼, `\u003cStrictMode\u003e` 도 추가적으로 DOM을 렌더링하지 않습니다.\n자식에 대한 추가적인 확인과 경고를 활성화합니다. 검사는 개발 모드에만 적용됩니다.\n\n```js\nimport React from \"react\";\n\nfunction ExampleApplication() {\n  return (\n    \u003cdiv\u003e\n      \u003cHeader /\u003e\n      \u003cReact.StrictMode\u003e\n        \u003cdiv\u003e\n          \u003cComponentOne /\u003e\n          \u003cComponentTwo /\u003e\n        \u003c/div\u003e\n      \u003c/React.StrictMode\u003e\n      \u003cFooter /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n위의 예제에서 strict mode 는 \u003cComponentOne /\u003e 와 \u003cComponentTwo /\u003e 에만 적용됩니다.  \n`\u003cStrictMode\u003e` 는 다음과 같은 도움을 줍니다.\n\n- 안전하지 않은 lifecycle 메서드를 식별합니다.\n- 레거시 string ref API 에 대한 경고\n- 예상치 못한 사이드 이펙트 감지\n- legacy context API 감지\n   \n[상단으로 ✨](#목차)\n   \n84. ### What are React Mixins?\n\n#### (React Mixins은 무엇인가요?)\n\nMixins은 공통적인 기능을 가질 수 있도록 component를 분리하는 방법입니다. Mixins은 사용하지 말아야합니다. higher-order components 또는 decorators 로 대체할 수 있습니다.  \nprops와 state가 이전의 props 와 state 가 얕게 같을때 불필요한 재 렌더링을 방지하기 위해 component 에서 사용할 수 있습니다.\n\n```js\nconst PureRenderMixin = require(\"react-addons-pure-render-mixin\");\n\nconst Button = React.createClass({\n  mixins: [PureRenderMixin]\n  // ...\n});\n```\n   \n[상단으로 ✨](#목차)\n   \n85. ### Why is isMounted() an anti-pattern and what is the proper solution?\n\n#### (왜 isMounted() 가 안티패턴이고 해결책은 무엇인가요?)\n\nisMounted() 의 사용 사례는 component의 마운트가 해제 된 후에 setState()를 호출하지 않도록 하는 것입니다. component 마운트가 해제된 후 경고가 발생되기 때문입니다.\n\n```js\nif (this.isMounted()) {\n  this.setState({...})\n}\n```\n\nsetState() 를 호출하기 전에 isMounted() 를 검사한다면 경고를 제거할 수 있지만, 경고의 목적을 잃어버릴 수 있습니다.\ncomponent의 마운트가 해제된 후에 reference 를 가지고 있다고 생각하기 때문에 isMounted()를 사용하는 것은 [code smell](https://ko.wikipedia.org/wiki/%EC%BD%94%EB%93%9C_%EC%8A%A4%EB%A9%9C) 입니다.\n\n최적의 해결법은 component의 마운트가 해제된 후 setState() 가 호출될 수 있는 위치를 찾아 수정하는 것입니다.\n이러한 상황은 component가 데이터를 기다리고 데이터가 도착하기전 마운트가 해제될 때, 콜백으로 인해 많이 발생됩니다.\n콜백은 마운트가 해제되기전에 componentWillUnmount 단계에서 취소되어야합니다.\n   \n[상단으로 ✨](#목차)\n   \n86. ### What are the Pointer Events supported in React?\n\n#### (React 에서 지원하는 Pointer Events 는 무엇인가요?)\n\nPointer Events 는 모든 입력 이벤트를 다루는 통일된 방법을 제공합니다. 옛날에는 마우스와 각각 event listeners 를 다뤘지만,\n요즘에는 터치스크린, 펜이 있는 휴대전화와 같이 마우스와 상관이 없는 많이 장치가 있습니다.\n이런 이벤트들은 Pointer Events 를 지원하는 브라우저에서만 동작하는 것을 기억해야합니다.\n\nReact DOM 에서는 다음과 같은 event 를 사용할 수 있습니다.\n\n- onPointerDown\n- onPointerMove\n- onPointerUp\n- onPointerCancel\n- onGotPointerCapture\n- onLostPointerCaptur\n- onPointerEnter\n- onPointerLeave\n- onPointerOver\n- onPointerOut\n   \n[상단으로 ✨](#목차)\n   \n87. ### Why should component names start with capital letter?\n\n#### (왜 Component 의 이름은 대문자로 시작해야하나요?)\n\n만약 JSX 를 사용하여 component 를 렌더링하는 경우 component 의 이름은 대문자로 시작하여야 합니다.\n그렇지 않으면 React 는 알 수 없는 태그로 인식하여 오류가 발생될 것 입니다.\n이 규칙은 HTML 과 SVG 태그만 소문자로 시작할 수 있기 때문에 사용됩니다.\n\n이름이 소문자로 시작하는 component class 를 정의할 수 있지만 가져올떄는 대문자여야 합니다.\n\n여기 소문자는 괜찮습니다.\n\n```js\nclass myComponent extends Component {\n  render() {\n    return \u003cdiv /\u003e;\n  }\n}\n\nexport default myComponent;\n```\n\n다른 파일에서 가져올때는 대문자로 시작해야합니다.\n\n```js\nimport MyComponent from \"./MyComponent\";\n```\n   \n[상단으로 ✨](#목차)\n   \n88. ### Are custom DOM attributes supported in React v16?\n\n#### (React v16 에서 사용자 정의 DOM 속성이 지원되나요?)\n\n네 지원됩니다. 과거 React 는 알려지지 않은 DOM 속성은 무시되었었습니다.\nReact 가 인식하지 못하는 속성을 가진 JSX 를 작성한다면 React 는 건너뛸 것 입니다.\n\n예를 들면 다음과 같습니다.\n\n```js\n\u003cdiv mycustomattribute={\"something\"} /\u003e\n```\n\nReact v15 에서 빈 div 를 DOM 에 렌더링합니다.\n\n```js\n\u003cdiv /\u003e\n```\n\nReact v16 에서 알 수 없는 속성은 DOM 에 포함됩니다.\n\n```js\n\u003cdiv mycustomattribute=\"something\" /\u003e\n```\n\n이 기능은 브라우저 별로 비표준 속성을 제공하고, 새로운 DOM API 를 시도, 다른 라이브러리와 같이 사용할 때 유용합니다.\n   \n[상단으로 ✨](#목차)\n   \n89. ### What is the difference between constructor and getInitialState?\n\n#### (constructor 와 getInitialState의 차이점은 무엇인가요?)\n\nES6 클래스를 사용할 떄는 constructor에서 state를 초기화할 수 있고, React.createClass 를 사용할 때는 getInitialState() 에서 상태를 초기화해야합니다.\n\nES6 클래스 사용:\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      /* initial state */\n    };\n  }\n}\n```\n\nReact.createClass() 사용:\n\n```js\nconst MyComponent = React.createClass({\n  getInitialState() {\n    return {\n      /* initial state */\n    };\n  }\n});\n```\n\n**Note**: React.createClass() 는 이제 사용되지 않고, React v16 에서 제거됩니다. 대신 JS class 를 사용하세요\n   \n[상단으로 ✨](#목차)\n   \n90. ### Can you force a component to re-render without calling setState?\n\n#### (setState 를 호출하지 않고 component 를 강제로 재 렌더링 시킬 수 있나요?)\n\n기본적으로, component 의 state 또는 props 가 변경되면 component 는 다시 렌더링됩니다.\nrender() 메소드가 다른 data 에 의존성이 있는 경우, forceUpdate() 를 호출하여 component에게 다시 렌더링이 필요하다고 알려줄 수 있습니다.\n\n```js\ncomponent.forceUpdate(callback);\n```\n\nforceUpdate() 의 사용은 피하고 render() 안의 this.props 와 this.state 는 읽는 용도로 사용하는 것이 좋습니다.\n   \n[상단으로 ✨](#목차)\n   \n91. ### What is the difference between super() and super(props) in React using ES6 classes?\n\n#### ES6 class 를 사용하는 React 에서 super() 와 super(props) 의 차이점은 무엇인가요?\n\nconstructor() 에서 this.props 에 접근하고 싶을때 super() 메서드에 props 를 전달해야합니다.\n\n**super(props)를 사용:**\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    console.log(this.props); // { name: 'John', ... }\n  }\n}\n```\n\n**super() 를 사용:**\n\n```js\nclass MyComponent extends React.Component {\n  constructor(props) {\n    super();\n    console.log(this.props); // undefined\n  }\n}\n```\n\nconstructor() 의 밖에서의 this.props 에는 같은 값이 표시됩니다.\n   \n[상단으로 ✨](#목차)\n   \n92. ### How to loop inside JSX?\n\n#### 어떻게 JSX 안에서 loop 를 하나요?\n\nES6 arrow function 과 함께 Array.prototype.map 를 사용할 수 있습니다. 예를 들어, 객체의 items 배열은 component 의 배열로 맵핑됩니다.\n\n```js\n\u003ctbody\u003e\n  {items.map(item =\u003e (\n    \u003cSomeComponent key={item.id} name={item.name} /\u003e\n  ))}\n\u003c/tbody\u003e\n```\n\nfor loop 를 사용하여 반복할 수 없습니다.\n\n```js\n\u003ctbody\u003e\n  for (let i = 0; i \u003c items.length; i++) {\n    \u003cSomeComponent key={items[i].id} name={items[i].name} /\u003e\n  }\n\u003c/tbody\u003e\n```\n\nJSX 태그는 함수 호출로 변환되어지기 떄문에 표현식 안에서 JS 표현법을 사용할 수 없습니다.\n이것은 stage 1 에 제안되어 변경되어질 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n93. ### How do you access props in attribute quotes?\n\n#### (attribute 따옴표에서 props 에 어떻게 접근하나요?)\n\nReact (또는 JSX) 는 속성 값 안에 써넣은 값은 지원되지 않습니다. 아래의 표현식은 동작하지 않습니다.\n\n```js\n\u003cimg className=\"image\" src=\"images/{this.props.image}\" /\u003e\n```\n\n그러나 중괄호 안에 JS 표현식을 감싸 속성 값으로 넣을 수 있습니다. 아래의 표현식은 동작합니다.\n\n```js\n\u003cimg className=\"image\" src={\"images/\" + this.props.image} /\u003e\n```\n\n템플릿 문자열을 사용해도 동작합니다.\n\n```js\n\u003cimg className=\"image\" src={`images/${this.props.image}`} /\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n94. ### What is React proptype array with shape?\n\n특정 모양을 가진 component 에 객체 배열을 전달하고 싶다면 React.PropTypes.arrayOf()의 인자로 React.PropTypes.shape() 를 사용하세요\n\n```js\nReactComponent.propTypes = {\n  arrayWithShape: React.PropTypes.arrayOf(\n    React.PropTypes.shape({\n      color: React.PropTypes.string.isRequired,\n      fontSize: React.PropTypes.number.isRequired\n    })\n  ).isRequired\n};\n```\n   \n[상단으로 ✨](#목차)\n   \n95. ### How conditionally apply class attributes?\n\n#### (어떻게 조건에 따라 class 속성을 적용하나요?)\n\n따옴표안에 중괄호를 사용하면 string 으로 인식되기 때문에 중괄호를 사용하면 안됩니다.\n\n```js\n\u003cdiv className=\"btn-panel {this.props.visible ? 'show' : 'hidden'}\"\u003e\n```\n\n중괄호 밖으로 옮겨야 합니다. (class 의 이름 사이에 공백을 포함하는 것을 잊으면 안됩니다.)\n\n```js\n\u003cdiv className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}\u003e\n```\n\n템플릿 문자열을 사용해도 동작합니다.\n\n```js\n\u003cdiv className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n96. ### What is the difference between React and ReactDOM?\n\n#### (React와 ReactDOM은 무엇이 다른가요?)\n\nReact package 에는 React.createElement (), React.Component, React.Children 및 element 와 component class 관련된 helper 들이 포함되어 있습니다.\n이런 기능들은 component 를 구축하는데 필요한 helpers 로 생각할 수 있습니다.\nreact-dom package 에는 ReactDOM.render () 가 포함되어있고, react-dom/server 에는 ReactDOMServer.renderToString() 과 ReactDOMServer.renderToStaticMarkup() 포함되어있어 서버사이드 렌더링을 지원합니다.\n   \n[상단으로 ✨](#목차)\n   \n97. ### Why ReactDOM is separated from React?\n\n#### (왜 React 와 ReactDOM은 분리되어있나요?)\n\nReact 팀은 모든 DOM 과 관련된 기능들을 ReactDOM 이라는 라이브러리로 분리하였습니다.\nReact v0.14 는 ReactDOM 이 분리된 첫번째 릴리즈입니다.\nReact-native, Reaction-Art, Reaction-Canvas, React-3 등 패키지의 일부를 보면 React 의 아름다움과 본질적인 부분이 브라우저나 DOM 과 아무런 관계가 없다는 것을 알 수 있습니다.\nReact 가 렌더링할 수 있는 많은 환경들을 만들기 위해, React 팀은 React 와 React-dom 을 분리할 계획을 세웠습니다.\n이것은 웹 버전의 React 와 React native 사이의 공유할 수 있는 component 를 작성하는 방법을 개척합니다.\n   \n[상단으로 ✨](#목차)\n   \n98. ### How to use React label element?\n\n#### (React 에서 label element 를 어떻게 사용하나요?)\n\n표준 `for` 속성을 사용하는 text input 에 바인드된 label element 를 렌더링하려고하면 속성이없는 HTML이 생성되고 console 에 경고가 출력됩니다.\n\n```js\n\u003clabel for={'user'}\u003e{'User'}\u003c/label\u003e\n\u003cinput type={'text'} id={'user'} /\u003e\n```\n\nfor 는 JS 의 예약된 키워드입니다, 대신 htmlFor 를 사용하세요\n\n```js\n\u003clabel htmlFor={'user'}\u003e{'User'}\u003c/label\u003e\n\u003cinput type={'text'} id={'user'} /\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n99. ### How to combine multiple inline style objects?\n\n#### (어떻게 여러개의 inline style object 를 합치나요?)\n\nReact 에서 spread operator 를 사용할 수 있습니다.\n\n```js\n\u003cbutton style={{ ...styles.panel.button, ...styles.panel.submitButton }}\u003e\n  {\"Submit\"}\n\u003c/button\u003e\n```\n\nReact Native 를 사용하고 있다면 배열 표기법을 사용할 수 있습니다.\n\n```js\n\u003cbutton style={[styles.panel.button, styles.panel.submitButton]}\u003e\n  {\"Submit\"}\n\u003c/button\u003e\n```\n   \n[상단으로 ✨](#목차)\n   \n100. ### How to re-render the view when the browser is resized?\n\n#### (어떻게 브라우저가 resize 될 때 재 렌더링 시키나요?)\n\ncomponentDidMount() 에서 resize 이벤트를 listen 할 수 있고, 크기(width, height)를 update 할 수 있습니다.\ncomponentWillUnmount() 에서 listener 를 제거해줘야합니다.\n\n```js\nclass WindowDimensions extends React.Component {\n  componentWillMount() {\n    this.updateDimensions();\n  }\n\n  componentDidMount() {\n    window.addEventListener(\"resize\", this.updateDimensions);\n  }\n\n  componentWillUnmount() {\n    window.removeEventListener(\"resize\", this.updateDimensions);\n  }\n\n  updateDimensions() {\n    this.setState({ width: $(window).width(), height: $(window).height() });\n  }\n\n  render() {\n    return (\n      \u003cspan\u003e\n        {this.state.width} x {this.state.height}\n      \u003c/span\u003e\n    );\n  }\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n101. ### What is the difference between setState() and replaceState() methods?\n\n#### (setState() 와 replaceState() 의 차이점은 무엇인가요?)\n\nsetState() 를 사용하면 이전 state 와 다음 state 가 병합됩니다. replaceState()는 현재 state 를 버리고 당신이 제공한 state 로 바꿉니다.\n이전의 key 들을 모두 제거해야되는 경우가 아니라면 보통 setState() 가 사용됩니다.\nreplaceState()를 사용하는 대신 setState()에서 state 를 flase/null 로 설정할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n102. ### How to listen to state changes?\n\n#### (어떻게 state 의 변경을 listen 하나요?)\n\nstate 가 변경될때 다음의 lifecycle 메서드들이 호출됩니다.\n이전에 제공된 state 와 props 의 값을 현재의 state와 props와 비교하여 의미있는 변화가 있는지 확인할 수 있습니다.\n\n```js\ncomponentWillUpdate(object nextProps, object nextState)\ncomponentDidUpdate(object prevProps, object prevState)\n```\n   \n[상단으로 ✨](#목차)\n   \n103. ### What is the recommended approach of removing an array element in React state?\n\n#### (React state 에서 배열요소를 제거하는 추천방법은 무엇인가요?)\n\n좋은 방법은 Array.prototype.filter() 메서드를 사용하는 것입니다.\n\n예를 들어, state update를 위한 removeItem () 메서드를 만들겠습니다.\n\n```js\nremoveItem(index) {\n  this.setState({\n    data: this.state.data.filter((item, i) =\u003e i !== index)\n  })\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n104. ### Is it possible to use React without rendering HTML?\n\n#### (HTML 렌더링 없이 React를 사용할 수 있나요?)\n\nlatest version (최신버전 \u003e= 16.2) 부터 가능합니다. 가능한 옵션은 다음과 같습니다.\n\n```js\nrender() {\n  return false\n}\n```\n\n```js\nrender() {\n  return null\n}\n```\n\n```js\nrender() {\n  return []\n}\n```\n\n```js\nrender() {\n  return \u003cReact.Fragment\u003e\u003c/React.Fragment\u003e\n}\n```\n\n```js\nrender() {\n  return \u003c\u003e\u003c/\u003e\n}\n```\n   \n[상단으로 ✨](#목차)\n   \n105. ### How to pretty print JSON with React?\n\n#### (React와 함께 어떻게 이쁘게 JSON 을 print 하나요?)\n\n`\u003cpre\u003e` 태그를 사용하여 JSON.stringify() 형식이 유지되도록 할 수 있습니다.\n\n```js\nconst data = { name: \"John\", age: 42 };\n\nclass User extends React.Component {\n  render() {\n    return \u003cpre\u003e{JSON.stringify(data, null, 2)}\u003c/pre\u003e;\n  }\n}\n\nReact.render(\u003cUser /\u003e, document.getElementById(\"container\"));\n```\n   \n[상단으로 ✨](#목차)\n   \n106. ### Why you can't update props in React?\n\n#### (왜 React에서 props 를 update 할 수 없나요?)\n\nReact 의 철학은 props 는 immutable(불변) 이어야하고 top-down (부모 -\u003e 자식) 방식입니다.\n부모는 모든 props 값을 자식에게 보낼 수 있지만, 자식은 받은 props 를 변경할 수 없습니다.\n   \n[상단으로 ✨](#목차)\n   \n107. ### How to focus an input element on page load?\n\n#### (어떻게 페이지 로드시에 input element 에 focus 하나요?)\n\ninput element 를 위한 ref 를 생성하여 componentDidMount() 에서 사용하면 됩니다.\n\n```js\nclass App extends React.Component {\n  componentDidMount() {\n    this.nameInput.focus();\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cinput defaultValue={\"Won't focus\"} /\u003e\n        \u003cinput\n          ref={input =\u003e (this.nameInput = input)}\n          defaultValue={\"Will focus\"}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"app\"));\n```\n   \n[상단으로 ✨](#목차)\n   \n108. ### What are the possible ways of updating objects in state?\n\n#### (state 의 object 를 update 할 수 있는 방법은 무엇인가요?)\n\n1. state 와 합쳐질 object 를 사용하여 setState() 호출\n\n- Object.assign() 을 사용하여 object 의 복사본을 만듭니다.\n\n```js\nconst user = Object.assign({}, this.state.user, { age: 42 });\nthis.setState({ user });\n```\n\n**spread operator 를 사용:**\n\n```js\nconst user = { ...this.state.user, age: 42 };\nthis.setState({ user });\n```\n\n**function 을 이용하여 setState() 호출:**\n\n```js\nthis.setState(prevState =\u003e ({\n  user: {\n    ...prevState.user,\n    age: 42\n  }\n}));\n```\n   \n[상단으로 ✨](#목차)\n   \n109. ### Why function is preferred over object for setState()?\n\n#### (왜 setState()를 위한 function 이 object 보다 선호되나요?)\n\nReact 는 성능을 위해 여러 setState() 호출들을 일괄 처리 합니다.\n이유는 this.props 와 this.state는 비동기로 update 될 수 있습니다. 다음 state 를 계산할 때 계산된 값을 신뢰하면 안됩니다.\n\n카운터 예제는 기대한대로 update 되지 않습니다.\n\n```js\n// Wrong\nthis.setState({\n  counter: this.state.counter + this.props.increment\n});\n```\n\n추천되는 접근방법은 object 가 아닌 function 으로 setState() 를 호출하는 것입니다.\nfunction 은 첫번째 인자로 이전 state를 받고 두 번째 인자로 update가 적용될 때의 props 를 받습니다.\n\n```js\n// Correct\nthis.setState((prevState, props) =\u003e ({\n  counter: prevState.counter + props.increment\n}));\n```\n   \n[상단으로 ✨](#목차)\n   \n110. ### How can we find the version of React at runtime in the browser?\n\n#### (브라우저에서 React의 버전을 runtime 시 어떻게 찾을 수 있나요?)\n\nReact.version 을 사용하면 버전을 가져올 수 있습니다.\n\n```js\nconst REACT_VERSION = React.version;\n\nReactDOM.render(\n  \u003cdiv\u003e{`React version: ${REACT_VERSION}`}\u003c/div\u003e,\n  document.getElementById(\"app\")\n);\n```\n   \n[상단으로 ✨](#목차)\n   \n111. ### What are the approaches to include polyfills in your create-react-app?\n\n#### (create-react-app 에 polyfills를 포함시키는 방법은 무엇인가요?)\n\n**core-js 에서 수동 import:**\n\n- polyfills.js 파일을 만들어 root index.js 에서 import 합니다. `npm install core-js` 또는 `yarn add core-js` 를 추가하고 필요한 기능을 import 합니다.\n\n```js\nimport \"core-js/fn/array/find\";\nimport \"core-js/fn/array/includes\";\nimport \"core-js/fn/number/is-nan\";\n```\n\n**Polyfill 서비스 사용:**\n\n- polyfill.io CDN 을 사용하여 다음의 줄을 index.html 에 추가하고, 사용자 지정 브라우저별 Polyfill을 검색합니다.\n\n```js\n\u003cscript src=\"https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes\"\u003e\u003c/script\u003e\n```\n\n위의 스크립트에서 Array.prototype.includes 는 기본 스펙에 포함되지 않았기 때문에 기능을 요청했습니다.\n   \n[상단으로 ✨](#목차)\n   \n112. ### How to use https instead of http in create-react-app?\n\n#### (create-react-app 에서 http 대신 https 를 어떻게 사용하나요?)\n\n`HTTPS = true` 설정이 필요합니다. package.json 에 scripts 부분을 편집할 수 있습니다.\n\n```js\n\"scripts\": {\n  \"start\": \"set HTTPS=true \u0026\u0026 react-scripts start\"\n}\n```\n\n또는 `set HTTPS=true \u0026\u0026 npm start` 을 실행하세요\n   \n[상단으로 ✨](#목차)\n   \n113. ### How to avoid using relative path imports in create-react-app?\n\n#### (create-react-app 에서 상대경로 import 를 어떻게 피하나요?)\n\n프로젝트의 root 에 `env` 파일을 만들고 import path 를 작성해주세요.\n\n```js\nNODE_PATH = src / app;\n```\n\n설정후 개발서버를 재시작 해주세요. 상대 경로없이 src/app 안에 있는 모든것을 import 할 수 있습니다.\n   \n[상단으로 ✨](#목차)\n   \n114. ### How to add Google Analytics for React Router?\n\n#### (어떻게 React Router 에 Google Analytics 를 추가하나요?)\n\nhistory 객체에 listener 를 추가하여 각 페이지 뷰를 기록하세요.\n\n```js\nhistory.listen(function(location) {\n  window.ga(\"set\", \"page\", location.pathname + location.search);\n  window.ga(\"send\", \"pageview\", location.pathname + location.search);\n});\n```\n   \n[상단으로 ✨](#목차)\n   \n115. ### How to update a component every second?\n\n#### (어떻게 매 초 마다 component 를 업데이트 하나요?)\n\nsetInterval() 를 사용하여 변경을 트리거해야합니다. 오류 및 메모리 누수를 방지하려면 component unmount 시 타이머를 제거해야합니다.\n\n```js\ncomponen","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappear%2Freactjs-interview-questions-ko","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fappear%2Freactjs-interview-questions-ko","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fappear%2Freactjs-interview-questions-ko/lists"}