02~03 - 스터디 퀴즈

[PaulMuadDibUsul]

웹팩을 사용하면 SVG 파일과 CSS 파일도 불러와서 사용할 수 있다. 이렇게 파일들을 불러오는 것을 웹팩의 (_____)라는 기능이 담당한다.

컴포넌트에 여러 요소가 있을 때 반드시 (_____)로 감싸야 한다.

JSX안에서는 자바스크립트 표현식을 사용할 수 있다. 작성하려면 코드를 (_____)로 감싸면 된다.

리액트에서 DOM 요소에 스타일을 적용할 때는 (_____) 형태로 넣어야 한다.

[PaulMuadDibUsul]

React.createElement("div", { className: "my-class" }, "Hello, World!")

React 요소 생성에 사용되는 인자들을 설명하시오.

[PaulMuadDibUsul]

비구조화 할당이란?

[ohr0226]

jsx 문법에서 지켜야하는 규칙 세가지만 설명하세요.

[ohr0226]

import { X } from ~ 과 import X from ~의 차이점이 무엇일까요

[ohr0226]

리액트에서 state는 () 값을 의미합니다. props는 컴포넌트가 사용되는 과정에서 ()가 설정하는 값이며, 컴포넌트 자신은 해당 props를 ()만 사용할 수 있습니다. props를 바꾸려면 ()에서 바꿔주어야 합니다.

[cheesepizza453]

JSX 문법에서 반드시 하나의 부모요소로 감싸야 하는 이유는?

[seokhj]

ES6 이전에는 자바스크립트에 클래스(class)가 없었습니다. 이때에 구현하기 위해 "a"문법을 사용하였는데요. 아래 중 "a"에 해당하는 정답은 무엇일까요?

1. typeof
2. prototype
3. switch
4. while
5. async

[seokhj]

아래 코드 JSX를 사용하지 않았을 때 어떻게 렌더링해야하는지 써보세요. (React.createElement 사용)

function App() { 
  return ( 
    <section>
      <h1>안녕하세요 <span>반갑습니다</span>
      <h2>건강하세요<h2>
    <section> 
  ) 
}

[seokhj]

컴포넌트에 state를 설정하기 위해 constructor 메서드를 작성합니다. 그치만 constructor는 무조건 super를 호출하고, 코드길이가 길어질 수 있는데요. state 설정 방식은 constructor 보다 간결하게 작성할 수 있는 또하나의 방법이 있습니다.

아래 코드를 다른 방식으로 작성해보세요.

constructor(props) {
super(props);

  this.state = {
    name: '홍길동'
    age: 20
  }
}

[andrewylies]

예상되는 출력값은?

function myFunction() {
    let a = 1;
    if(true) {
        let a = 2;
        console.log(a); // A:?
    }
    console.log(a); // B:?
}

[andrewylies]

예상되는 출력값은?

function BlackDog() {
    this.name = '흰둥이';
    return {
        name: '검둥이',
        bark: function() {
            console.log(this.name + ': 멍멍!');
        }
    };
}
const blackDog = new BlackDog();
blackDog.bark(); // ??: 멍멍!

function WhiteDog() {
    this.name = '흰둥이';
    return {
        name: '검둥이',
        bark: () => {
            console.log(this.name + ': 멍멍!');
        }
    };
}
const whiteDog = new WhiteDog();
whiteDog.bark(); // ??: 멍멍!