[리액트] 3. 컴포넌트_문제

1. 컴포넌트를 선언하는 방식 두 가지는?

2. 클래스형 컴포넌트의 특징으로는 state 기능 및 라이프사이클 기능을 사용할 수 있고, () 함수를 반드시 필요로 한다.

3. props은 컴포넌트 속성을 설정할 때 사용하는 요소로, ()에서 설정한다.

4. state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미하는데, () 컴포넌트가 지니고 있는state, () 컴포넌트에서 ()라는 함수를 통해 사용하는 state로 두 가지 종류가 있다.

5. state 값을 설정하기 위해서 컴포넌트에서 constructor 메서드를 이용하는데, ()의 역할을 한다.

6. 클래스형 컴포넌트에서 state의 초기값은 어떤 형태여야 하는가?,

7. 함수 컴포넌트에서는 state 초기값을 반드시 객체로 넣어야 하는가? (O/X)

8. 비구조화 할당 문법을 이용해서 코드를 재작성하시오.

// MyComponent.js
const MyComponent = props => {
	return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}
      입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

9. 생성자를 완성시키시오.

// Counter.js
import { Component } from 'react';

class Counter extends Component {
  (빈칸에 코드를 작성하시오)
  }
  render() {
    const { number } = this.state;    // state를 조회할 때에는 this.state로 조회
    return (
      <div>
        <h1>{number}</h1>
        <button
        // onClick을 통해 버튼이 클릭되었을 때 호출할 함수 지정
        onClick={() => {
          //this.setState를 사용하여 state에 새로운 값을 넣음
          this.setState({ number: number + 1});
        }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

정답
1. 함수 컴포넌트, 클래스형 컴포넌트
2. render
3. 부모 컴포넌트
4. 클래스형, 함수, useState
5. 생성자
6. 객체
7. X
8.

// MyComponent.js
const MyComponent = props => {
  const { name, children } = props; //비구조화 할당 문법
	return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );

};

MyComponent.defaultProps = {
  name: '기본 이름'
};

export default MyComponent;

constructor(props){
    super(props);
    this.state ={         // state의 초기값 설정
      number: 0
    };