React Quiz - JSX, redering, component, props, state

내가 출제한 문제

1. 컴포넌트에 여러 요소가 있을 경우, 하나의 부모 요소로 감싸야 하는 이유는 무엇입니까?

Virtual DOM에서 컴포넌트 변화를 효율적으로 감지하기 위해 컴포넌트 내부는 하나의 DOM 트리 구조로 되어 있어야 한다는 규칙 때문입니다.

2. name이라는 변수가 '리액트'일 경우 '리액트입니다'라는 문자열을 반환하고, 아닐 경우 '리액트가 아닙니다'라는 문자열을 반환하도록 코드를 수정하세요.

function App() {
  const name = 'React';
  return (
    <div>
      {/* 여기에 작성하세요 */}
    </div>
  )
}

export default App;

function App() {
  const name = 'React';
  return (
    <div>
      {name === 'React' && <h1>React입니다</h1>}
    </div>
  )
}
export default App;

3. 다음 중 에러가 나는 코드를 고르세요.

// 1번 코드
function App() {
  const name = undefined;
  return name;
}

// 2번 코드
function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return <div>warning</div>
}

// 3번 코드
function App() {
  const name = undefined;
  return name || '값이 undefined입니다';
}

// 4번 코드
function App() {
  const name = undefined;
  return <div>{name}</div>;
}

정답 : 1
React 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하면 안 됨
그럴 경우 Error: Nothing was returned from render라는 에러가 발생함

4. 다음 중 주석 처리가 되지 않는 코드를 고르세요.

// 1번 코드
function App() {
  // 주석입니다
  const name = 'React';
  return (
    <>
      <div
        className="react"
        >{name}</div>
      <input />
    </>
  );
}

// 2번 코드
function App() {
  const name = 'React';
  return (
    <>
      <div
        className="react" // 주석입니다
        >{name}</div>
      <input />
    </>
  );
}

// 3번 코드
function App() {
  const name = 'React';
  return (
    <>
      <div
        className="react"
        >{name}</div> // 주석 입니다
      <input />
    </>
  );
}

// 4번 코드
function App() {
  const name = 'React';
  return (
    <>
      {/* 주석 입니다 */}
      <div className="react">{name}</div>
      <input />
    </>
  );
}

정답 : 3
1. 함수 내부에서 // 뒤에 주석을 작성 가능함
2. 시작 태그를 여러 줄 작성할 경우, 그 내부에서 // 뒤에 주석을 작성 가능함
4. JSX 내부에서 주석을 작성할 때는 {/* */} 안에 작성함

5. react에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때의 과정에 대해 간략히 설명해보세요.

1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링함 (Virtual DOM : DOM을 추상화한 자바스크립트 객체)
2. 이전 Virtual DOM에 있던 내용과 현재 현재 내용을 비교함
3. 바뀐 부분만 실제 DOM에 적용함

6. 클래스형 컴포넌트와 함수 컴포넌트의 차이점에 대해 설명하세요.

클래스형 컴포넌트는 state와 LifeCycle 메서드가 있고 임의의 메서드를 작성할 수 있음
함수 컴포넌트에는 state와 LifeCycle 메서드가 없지만 react v16.8 업데이트 이후 useState라는 훅을 사용해서 state와 setter 함수를 정의하고 사용할 수 있음

7. 다음 중 옳지 않은 설명을 고르세요.
   1. props는 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
   2. props의 기본값을 설정하지 않으면 props에 접근할 때 에러가 발생한다.
   3. children은 컴포넌트 태그 사이의 내용을 보여주는 props 속성이다.
   4. propsTypes를 지정할 때 isRequired를 붙여서 필수 propsTypes을 설정할 수 있다.
   5. 클래스형 컴포넌트에서 propsTypes를 클래스 내부에서 지정할 수 있다.

정답 : 2
props의 기본값을 설정하지 않으면 에러가 발생하지 않고 prop에 undefined가 전달됨

8. 다음 중 옳지 않은 설명을 고르세요.
   1. 모든 state는 항상 특정한 컴포넌트가 소유하고 있다.
   2. 컴포넌트는 자신의 state를 자식 컴포넌트에 props로 전달할 수 있다.
   3. state에서 파생된 UI 또는 데이터는 state를 소유하고 있는 컴포넌트에만 영향을 미친다.
   4. 클래스의 constructor 함수 밖에서도 state를 설정할 수 있다.
   5. 클래스형 컴포넌트의 state는 객체 형식만 가질 수 있다.

정답 : 3
state에서 파생된 UI 또는 데이터는 트리구조에서 state를 소유한 컴포넌트 아래에 있는 컴포넌트에만 영향을 미침

9. 다음 중 에러가 발생하는 코드를 고르세요.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
      fixedNumber: 0
    };
  }
// 1번 코드
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            number = number + 1;
          }}
         >
          +1
        </button>
      </div>
    )
  }
  
// 2번 코드
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
         >
          +1
        </button>
      </div>
    )
  }

// 3번 코드
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState(prevState => ({
              number: prevState.number + 1
            }));
          }}
          >
          +1
        </button>
      </div>
    )
  }

// 4번 코드
  render() {
    const { number, fixedNumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState(
              {
                number: number + 1
              },
              () => {
                console.log('setState 호출');
                console.log(this.state);
              }
            );
          }}
          >
          +1
        </button>
      </div>
    )
  }
}

정답 : 1
state 값을 변경할 때는 setState 혹은 useState를 통해 전달받은 setter 함수를 사용해야함

10. componentDidMount(), componentWillUnmount() 메서드의 실행 시점에 대해 설명하세요.

componentDidMout() : 컴포넌트가 DOM에 렌더링된 이후에 실행됨
componentWillUnmount() : 컴포넌트가 DOM에서 삭제된 이후에 실행됩니다.

11. 다음 중 옳지 않은 설명을 고르세요.

    1. 함수 컴포넌트에서 useState 함수를 사용하여 state 초기값을 설정할 때 값의 형태는 객체 형식만 가능하다.
    2. 배열의 비구조화 할당을 사용하여 state와 setter 함수명을 변경할 수 있다.
    3. 한 컴포넌트에서 useState를 여러 번 사용 가능하다.
    4. state는 직접 변경할 수 없고, setter 함수를 호출해야 한다.
    5. 객체 state를 변경할 때 spread 연산자를 사용해서 객체의 사본을 만들어서 변경해야 한다.

정답 : 1
함수 컴포넌트에서 useState 함수를 사용하여 state 초기값을 설정할 때 값의 형태는 자유임