linkedin-skill-assessments-quizzes

React.js

Q1. React 라이브러리에서 컴포넌트 하나만 가져오고 싶을 때 올바른 import 문법은?

Q2. 함수 컴포넌트가 같은 props를 받았을 때 항상 같은 결과로 렌더링된다면, 적용할 수 있는 간단한 최적화는?

Q3. 다음 코드를 실행하면 문법 오류가 발생한다. 어떻게 고쳐야 할까?

const person = (firstName, lastName) =>
{
  first: firstName,
  last: lastName
}
console.log(person("Jill", "Wilson"))

Q4. 다음 import 문이 있는 파일에서, 컴포넌트의 상태 관리에 무엇을 사용하고 있다고 볼 수 있을까?

import React, { useState } from 'react';

Q5. 다음 코드에서 객체 축약 표기법(property shorthand)을 사용해 값을 채웠다. console.log(person)의 결과는?

const name = 'Rachel';
const age = 31;
const person = { name, age };
console.log(person);

Q6. React와 가장 흔히 함께 쓰이는 테스트 라이브러리는?

Q7. 배열 구조 분해(destructuring)를 사용해 다음 배열의 첫 번째 항목(“cooking”)을 가져오려면?

const topics = ['cooking', 'art', 'history'];

Q8. 컴포넌트 트리 아래로 props를 일일이 수동으로 내려주지 않고 값을 전달하려면 무엇을 사용해야 할까?

Q9. 다음 코드를 실행하면 콘솔에 무엇이 출력될까?

const [, , animal] = ['Horse', 'Mouse', 'Cat'];
console.log(animal);

Q10. JSX를 createElement 호출로 변환하는 데 사용하는 도구는?

Q11. React 컴포넌트에서 useState 대신 useReducer를 쓰는 이유로 알맞은 것은?

Q12. 다음 문법을 사용하면 컴포넌트에서 어떤 속성을 사용할 수 있을까?

<Message {...props} />

Q13. React Router에서 다음 코드의 “:id”는 무엇이라고 부를까?

<Route path="/:id" />

Q14. Dish 컴포넌트를 렌더링하면 DOM에 어떤 엘리먼트가 추가될까?

function Dish() {
  return <h1>Mac and Cheese</h1>;
}

ReactDOM.render(<Dish />, document.getElementById('root'));

Q15. 다음 호출의 결과로 DOM에 만들어지는 엘리먼트는?

React.createElement('h1', null, "What's happening?");

Q16. 다음 Suspense 컴포넌트가 로딩 표시를 보여주게 하려면 어떤 속성을 지정해야 할까?

function MyComponent() {
  return (
    <Suspense>
      <div>
        <Message />
      </div>
    </Suspense>
  );
}

Q17. 다음 코드에서 중괄호 안의 message는 무엇이라고 부를까?

const message = 'Hi there';
const element = <p>{message}</p>;

Q18. 코드 분할(code splitting)을 실행할 때 사용하는 것은?

Q19. useLayoutEffect는 언제 사용할까?

Q20. 다음 두 버튼의 onClick 이벤트 처리 방식에는 어떤 차이가 있을까? (this.handleClick은 이미 올바르게 바인딩되어 있다고 가정)

A. <button onClick={this.handleClick}>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>

Q21. Dish 컴포넌트로 전달되는 속성을 구조 분해하려면 어떻게 고쳐야 할까?

function Dish(props) {
  return (
    <h1>
      {props.name} {props.cookingTime}
    </h1>
  );
}

Q22. React.PureComponent는 언제 사용할까?

Q23. 컴포넌트의 props 값을 내부 state로 그대로 복사하는 것을 되도록 피해야 하는 이유는?

Q24. children이라는 속성은 무엇일까?

설명: children in JSX

Q25. 브라우저 DOM의 innerHTML 속성을 대신하기 위해 사용하는 속성은?

Q26. React 애플리케이션을 흔히 설명할 때 쓰이는 표현으로 알맞은 것은?

Q27. webpack을 사용할 때 로더(loader)가 필요한 상황은?

Q28. 실제 DOM과 동기화된 상태로 메모리에 유지되는 UI 표현을 무엇이라고 부를까?

Q29. 다음 코드를 작성했는데 아무것도 렌더링되지 않는다. 어떻게 고쳐야 할까?

const Heading = () => {
  <h1>Hello!</h1>;
};

Q30. 자바스크립트에서 상수를 만들 때 사용하는 키워드는?

Q31. 컴포넌트 트리 어디에서 발생하든 자바스크립트 에러를 잡아내는 React 컴포넌트를 무엇이라고 부를까?

Q32. 클래스 컴포넌트의 어떤 생명주기 메서드에서 데이터 요청을 해야 할까?

Q33. React 컴포넌트는 조합돼 UI를 만든다. 컴포넌트 자체는 어떻게 조합될까?

Q34. React의 모든 컴포넌트는 자신의 props에 대해 어떻게 동작해야 할까?

Q35. 아래 코드에서 [e.target.id] 부분을 무엇이라고 부를까?

handleChange(e) {
  this.setState({ [e.target.id]: e.target.value })
}

Q36. 이 컴포넌트의 이름은 무엇일까?

class Clock extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q37. Array.map() 함수에는 무엇을 넘길까?

Q38. setState에 객체 대신 함수를 넘기는 것이 좋은 이유는?

설명: setState에 함수 전달하기

Q39. React 엘리먼트를 DOM에 렌더링하는 render() 함수는 어느 패키지에 들어있을까?

Q40. 비제어(uncontrolled) 폼 필드에 기본값을 지정하려면 어떻게 해야 할까?

Q41. 다음 코드가 에러 없이 실행되려면 무엇을 바꿔야 할까?

class clock extends React.Component {
  render() {
    return <h1>Look at the time: {this.props.time}</h1>;
  }
}

설명: JSX에서는 소문자로 시작하는 이름을 HTML 태그로 인식한다. 자세한 내용은 이 문서에서 확인할 수 있다.

Q42. 페이지 제목을 바꿀 때 사용할 수 있는 훅 사용법으로 올바른 것은?

Q43. 컴포넌트를 지연 로드(lazy load)할 때 사용하는 것은?

Q44. 다음 컴포넌트가 마운트될 때만 setDone 콜백을 호출하려면?

function MyComponent(props) {
  const [done, setDone] = useState(false);

  return <h1>Done: {done}</h1>;
}

Q45. 다음 코드는 handleClick을 참조로 넘기는 대신 즉시 호출해버리고 있다. 어떻게 고쳐야 할까?

<button onClick={this.handleClick()}>Click this</button>

Q46. 함수 컴포넌트를 가장 잘 설명하는 것은?

Q47. 전역 함수 fetch()는 어느 라이브러리에서 제공할까?

Q48. name이 처음에 “john”이 아니라고 가정할 때, 다음 useEffect가 실행되면 어떤 일이 벌어질까?

useEffect(() => {
  setName('John');
}, [name]);

Q49. 다음 중 React 컴포넌트를 다시 렌더링시키지 않는 것은?

Q50. 클래스 컴포넌트에 handleClick이라는 메서드를 새로 만들었지만 동작하지 않는다. 무엇이 빠졌을까?

class Button extends React.Component {

  constructor(props) {
    super(props);
    // 여기에 무엇이 빠졌을까?
  }

  handleClick() {...}
}

Q51. React는 인접한 두 엘리먼트를 Fragment로 감싸지 않으면 렌더링하지 않는다. 아래는 Fragment를 렌더링하는 한 방법이다. 같은 결과를 내는 더 짧은 문법은?

<React.Fragment>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</React.Fragment>

<...>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</...>

<//>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
<///>

<>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</>

<Frag>
  <h1>Our Staff</h1>
  <p>Our staff is available 9-5 to answer your questions</p>
</Frag>

Q52. state 변수 count의 값을 보여주려면 h1 엘리먼트의 중괄호 안에 무엇을 넣어야 할까?

class Ticker extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return <h1>{}</h1>;
  }
}

Q53. 다음 코드에서 greeting 변수에 Hello 컴포넌트가 할당되는 시점은?

const greeting = isLoggedIn ? <Hello /> : null;

Q54. 다음 코드에서 orderNumber 속성이 받는 값의 타입은?

ReactDOM.render(<Message orderNumber="16" />, document.getElementById('root'));

Q55. h1 엘리먼트에 style 속성을 추가했는데, 실행하면 예상치 못한 토큰 에러가 난다. 어떻게 고쳐야 할까?

const element = <h1 style={ backgroundColor: "blue" }>Hi</h1>;

Q56. React 클래스 컴포넌트에서 state 변수를 갱신할 때 사용하는 함수는?

Q57. 다음 컴포넌트에서 Star 아이콘의 기본 색상은?

const Star = ({ selected = false }) => <Icon color={selected ? 'red' : 'grey'} />;

Q58. this.handleClick이 제대로 바인딩되지 않았다고 가정할 때, 다음 두 버튼의 onClick 동작에는 어떤 차이가 있을까?

A. <button onClick=this.handleClick>Click Me</button>
B. <button onClick={event => this.handleClick(event)}>Click Me</button>

Q59. 다음 React Router 코드에서, 이 라우트가 활성화됐을 때 About 컴포넌트를 렌더링하려면 어떻게 추가해야 할까?

<Route path="/:id" />

<Route path="/:id">
  {' '}
  <About />
</Route>

<Route path="/tid" about={Component} />

<Route path="/:id" route={About} />

<Route>
  <About path="/:id" />
</Route>

Q60. 다음 함수 컴포넌트와 동등한 클래스 컴포넌트는?

const Greeting = ({ name }) => <h1>Hello {name}!</h1>;

class Greeting extends React.Component {
  constructor() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  <h1>Hello {this.props.name}!</h1>;
}

class Greeting extends React.Component {
  render() {
    return <h1>Hello {this.props.name}!</h1>;
  }
}

class Greeting extends React.Component {
  render({ name }) {
    return <h1>Hello {name}!</h1>;
  }
}

Q61. 다음 코드에서 함수에 넘긴 두 번째 인자는 무엇을 의미할까?

ReactDOM.render(
  <h1>Hi</h1>,
  document.getElementById('root')
)

Q63. createElement 함수에 넘기는 첫 번째 인자 x는 무엇일까?

React.createElement(x, y, z);

Q64. 다음 훅과 같은 시점에 호출되는 클래스 컴포넌트의 생명주기 메서드는?

useEffect(() => {
  // do things
}, []);

Q65. 이 컴포넌트가 상속하는 기반 컴포넌트의 이름은?

class Comp extends React.Component {
  render() {
    return <h1>Look at the time: {time}</h1>;
  }
}

Q66. Portal을 사용할 때 첫 번째 인자에는 무엇이 들어갈까?

ReactDOM.createPortal(x, y);

설명: Portals

Q67. 다음 코드에서 setCount는 무엇일까?

const [count, setCount] = useState(0);

설명: Hooks-State

Q68. 아래 코드에서 map 함수는 어떤 역할을 할까?

const database = [{ data: 1 }, { data: 2 }, { data: 3 }];
database.map((user) => <h1>{user.data}</h1>);

Q69. 다음 코드에서 벌어지는 일을 가장 정확히 설명하면?

const { name: firstName } = person;

Q70. 다음 코드의 문제는 무엇일까?

const MyComponent = ({ names }) => (
  <h1>Hello</h1>
  <p>Hello again</p>
);

Q71. Portal을 사용할 때 두 번째 인자는 무엇일까?

ReactDOM.createPortal(x, y);

Q72. 다음 코드에서 <h1> 태그 안에는 무엇이 렌더링될까?

const MyComponent = ({ children }) => (
  <h1>{children.length}</h1>
);
...
<MyComponent>
<p>Hello</p>
<p>Goodbye</p>
</MyComponent>

Q73. 다음과 같은 할당 패턴을 무엇이라고 부를까?

const [count, setCount] = useState(0);

Q74. 기본적인 React 프로젝트에서 브라우저가 가장 먼저 불러오는 파일은?

Q75. 다음 코드는 아무것도 렌더링하지 않고 “ReactDOM is not defined.”라는 에러가 난다. 어떻게 해결할까?

import React from 'react';
import { render } from 'reactjs-dom';

const element = <h1>Hi</h1>;

ReactDOM.render(element, document.getElementById('root'));

Q76. 다음 컴포넌트에서 사용자의 로그인 여부를 표시하려면 어떻게 해야 할까?

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is:
    </div>
  );
}

Q77. React에서 리스트를 렌더링할 때 콘솔에 “Warning: Each child in a list should have a unique ‘key’ prop.”라는 경고가 뜬다. 어떻게 해결할까?

Q78. 바지를 모으는 새 앱을 위한 보일러플레이트 코드를 만들려면 어떤 명령을 쓸까?

설명: Create React App

Q79. 버튼을 클릭하면 광자 어뢰를 발사하도록 코드를 완성하면?

class StarTrekkin extends React.Component {
  firePhotonTorpedoes(e) {
    console.log('pew pew');
  }
  render() {
    return; // 여기에 코드를 추가해야 한다
  }
}

설명: Handling Events

Q80. 업데이트가 필요한지 아닌지를 판단하는 과정을 무엇이라고 부를까?

Q81. React는 오픈소스 프로젝트지만, 어느 회사가 관리하고 있을까?

Q82. React 프로젝트를 만들 때 사용할 수 있는 명령은?

Q83. React 개발자들이 앱을 디버깅할 때 사용하는 브라우저 확장 프로그램은?

Q84. 다음 중 Create React App에 포함되지 않는 도구는?

Q85. React 엘리먼트를 만들 때 흔히 쓰이는 자바스크립트 문법 확장은?

Q86. Flow나 TypeScript를 쓰지 않고 props의 타입을 검사하려면 어떻게 할까?

Q87. 다음 h1 엘리먼트에 id “heading”을 추가하려면 어떻게 해야 할까?

let dish = <h1>Mac and Cheese</h1>;

Q88. 포옹할 사람의 이름을 버튼에 전달하려면 button 값에 무엇을 넣어야 할까?

class Huggable extends React.Component {
  hug(id) {
    console.log("hugging " + id);
  }
  render() {
    let name = "kitten";
    let button = // 코드가 빠져 있다
    return button;
  }
}

설명: 이 문제는 클래스 컴포넌트에 대한 지식을 테스트한다. 클래스 컴포넌트에 정의된 메서드를 호출하려면 this를 사용해야 한다.

Q89. React에서 컴포넌트를 만들 때 쓰는 문법은?

설명: 컴포넌트와 props

Q90. 버튼을 비활성화해서 onClick 이벤트가 발생하지 않게 하려면 어떤 속성을 사용할까?

Q91. 다음 함수 컴포넌트를 가장 잘 설명하는 것은?

function Dish() {
  return (
    <>
      <Ingredient />
      <Ingredient />
    </>
  );
}

Q92. 클래스 컴포넌트에서 componentDidMount 메서드는 언제 실행될까?

Q93. webpack은 어떤 용도로 사용할까?

Q94. 크롬 확장 프로그램 React Developer Tools를 사용할 때, 아이콘이 빨간색이면 무엇을 의미할까?

설명: React Developer Tools 아이콘 색상

Q95. 다음 에러를 피하려면 생성자를 어떻게 고쳐야 할까? “ReferenceError: Must call super constructor in derived class before accessing ‘this’…”

class TransIsBeautiful extends React.Component {
  constructor(props){
  // 빠진 줄....
  console.log(this) ;
  }
  ...
}

Q96. React와 함께 사용할 수 없는 언어는?

Q97. 포켓몬을 모으는 앱의 일부인 다음 코드에서, 지금까지 모은 포켓몬 목록을 출력하려면 어떻게 해야 할까?

constructor(props) {
    super(props);
    this.state = {
        pokeDex: []
    };
}

설명: React 클래스 컴포넌트 state 관리

Q98. 다음 코드를 실행하면 결과는 무엇일까?

function add(x = 1, y = 2) {
  return x + y;
}

add();

image

Q99. React.createRef를 사용해야 하는 이유는?

설명: Refs and the DOM

Q100. 다음 코드에서 사용된 할당 패턴은?

const { tree, lake } = nature;

설명: Destructuring assignment

Q101. 다음 코드를 고쳐서 sent 속성이 불리언 값 false를 갖도록 하려면?

ReactDom.render(
  <Message sent=false />,
  document.getElementById("root")
);

<Message sent={false} />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));

<Message sent="false" />,

ReactDom.render(<Message sent="false" />, document.getElementById('root'));
This site is open source. Improve this page.