[리액트 스타터 1] 3장. 컴포넌트

이번 장에서는 컴포넌트에 대해 배워보겠습니다. 1장에서 컴포넌트는 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체라고 배웠습니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다.

---

 

3.1 클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두 가지로, 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.

import React from ‘react‘;
import ‘./App.css‘;


function App() {
  const name = ‘리액트‘;
  return <div className=“react“>{name}</div>;
}



export default App;

 

 

2장에서 보았던 App.js는 함수형 컴포넌트입니다.

 

 

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = '리액트';
    return <div className="react">{name}</div>;
  }
}
 
export default App;

 

함수형 컴포넌트로 작성된 코드를 클래스형 컴포넌트로 수정하였습니다. 기능은 함수형 컴포넌트와 똑같습니다. 그렇다면 차이점으로는 무엇이 있을까요?

 

클래스형 컴포넌트

1. class 키워드가 필요하고 Component로 상속받아야 합니다.

2. render 함수가 반드시 있어야 하고, 그 안에 보여주어야 할 JSX를 반환해야 합니다.

3. 이후 배울 state 기능 및 라이프사이클 기능을 사용할 수 있습니다

4. 임의 메서드를 정의할 수 있습니다

 

 

함수형 컴포넌트

1. 클래스형보다 선언하기 편합니다

2. 클래스형보다 메모리 자원을 덜 사용합니다

3. 클래스형보다 프로젝트를 빌드한 후 배포할 때 결과물의 크기가 더 작습니다

4. state와 라이프 사이클 API의 사용이 불가능합니다

 

그렇다면 함수형과 클래스형 중에 어떤 컴포넌트를 사용해야 할까요? 리눅스 공식 매뉴얼에서는 함수형 컴포넌트와 Hooks를 함께 사용하는 것을 권장하고 있습니다. Hooks란 리액트 v16.8 업데이트 이후 도입된 기능으로, 이 기능을 통해 함수형 컴포넌트에서도 클래스형 컴포넌트와 비슷한 작업을 할 수 있게 되습니다. 그래도 클래스형 컴포넌트의 활용 방법을 익혀두어야 합니다. 우리가 사용하고 있는 교재 <리액트를 다루는 기술>은 초반부에서는 클래스형 컴포넌트를 위주로 사용하여 리액트의 기본을 익히고, 후반부에서는 Hooks를 사용하여 함수형 컴포넌트를 다룹니다.

 

 

---

 

3.2 첫 컴포넌트 생성

 

컴포넌트를 생성하기 위해서는 세 가지 단계가 필요합니다

1. 파일 만들기

2. 코드 작성하기

3. 모듈 내보내기 및 불러오기

 

 

3.2.1. src 디렉터리에 MyComponent.js 파일 생성

 

컴포넌트를 만들기 위해 컴포넌트 코드를 선언해야 합니다. VS Code 왼쪽의 사이드 바에서 파일 목록 중 src 디렉터리를 우클릭하여 새 파일 메뉴를 선택합니다. 새 파일 이름을 MyComponent.js로 입력해 주세요.

 

 

3.2.2. 코드 작성하기

만든 파일을 열어 아래의 컴포넌트 코드를 작성해 보세요. 먼저 함수형으로 작성해 보겠습니다.

import React from 'react';
 
const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트</div>;
};
 
export default MyComponent;

 

위에 코드에서는 function 키워드 대신 () => {}를 사용하여 함수를 만들어 주었습니다. 이는 ES6에서 도입된 화살표 함수 문법입니다. 이 문법은 주로 함수를 파라미터로 전달할 때 유용합니다. 함수형 컴포넌트를 선언할 때는 function 키워드를 사용하는 것과 화살표 함수 문법을 사용하는 것에 차이가 크게 없지만, 좀 더 간결한 화살표 함수를 사용하도록 하겠습니다.

 

(TIP)

VS Code에서 Reactjs Code Snippet 확장 프로그램을 설치했다면 자동으로 컴포넌트 코드가 생성됩니다. 에디터에서 rsc를 입력하고 엔터를 입력하세요. 자동으로 만들어진 코드에서 컴포넌트 이름을 변경할 수 있습니다. 참고로 클래스형 컴포넌트에서는 rcc를 입력하여 사용할 수 있습니다.

 

 

3.3.3. 모듈 내보내기 및 불러오기

 

export default MyComponent;

 

2번의 코드 작성하기에서 작성한 코드의 맨 아래 줄을 확인해 보세요. 이 코드는 다른 파일에서 이 파일을 import 할 때, MyComponent 클래스를 불러올 수 있도록 합니다.

 

그러면 App 컴포넌트에서 MyComponent 컴포넌트를 불러봅시다.

import React from 'react';
import MyComponent from './MyComponent';  //MyComponent 불러오기
 
const App = () => {
  return <MyComponent />;
};
 
export default App;
 

 

두 번째 줄에서 import를 이용해 MyComponent 컴포넌트를 불러왔습니다.

 

 

 

코드를 저장하고 브라우저를 확인하면 렌더링 되어있는 것을 확인할 수 있습니다.

 

---

 

3.3 props

 

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정하는 요소입니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 예시에서는 App 컴포넌트에서 MyComponent의 props 값을 설정할 수 있습니다.

 

3.3.1 JSX 내부에서 props 렌더링

props 값은 컴포넌트 함수의 파라미터로 받아와 사용할 수 있습니다. MyComponent 컴포넌트에서 name이라는 props를 렌더링 하도록 수정해 봅시다.

import React from ‘react‘;

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

export default MyComponent;

 

 

 

 

3.3.2 컴포넌트를 사용할 때 props 값 지정하기

MyComponent 컴포넌트를 불러와 사용하는 부모 컴포넌트인 App 컴포넌트에서 props의 값을 지정합니다.

 

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

 

 

 

그럼 다음과 같이 수정된 것을 확인할 수 있습니다

 

 

3.3.3 props 기본값 설정: defaultProps

만약 props 값을 지정하지 않는다면 어떻게 될까요?  '안녕하세요, 제 이름은 입니다'가 출력될 것입니다.

그렇다면 props 값을 지정하지 않아도 보여줄 기본값 defaultProps을 설정해 봅시다.

import React from 'react';
 
const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

위처럼 MyComponent를 수정하여, props 값을 지정하지 않는다면 '안녕하세요, 제 이름은 기본 이름입니다.'가 출력되는 것을 알 수 있습니다.

 

 

3.3.4 태그 사이의 내용을 보여주는 children

children이란 컴포넌트 태그 사이의 내용을 보여주는 props입니다. App 컴포넌트를 아래와 같이 수정해 보세요

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent>리액트</MyComponent>;
};
 
export default App;

 

<MyComponent> 태그 사이에 있는 '리액트'라는 문자열을 MyComponent 내부에서 보여줄 수 있습니다. 그러기 위해 MyComponent 내부에서 props.children 값을 보여주어야 합니다.

 

import React from 'react';
 
const MyComponent = props => {
  return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

MyComponent 컴포넌트를 수정하면 아래와 같은 결과가 나옵니다.

 

 

3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

위의 예시에서 props 값을 보기 위해 props.라는 키워드를 붙여야 했습니다. 작업을 편하게 하기 위해 비구조화 할당 문법을 사용하여 props. 키워드 사용 없이 내부 값을 바로 추출할 수 있습니다.

import React from 'react';
 
const MyComponent = props => {
  const { name, children } = props;    //비구조화 할당 문법
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

이렇게 추출하면 props.name, props.children 대신 name, children으로 사용할 수 있습니다.

이렇게 객체에서 값을 추출하는 문법을 객체 비구조화 할당이라고 부릅니다. 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있습니다.

 

import React from 'react';
 
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

앞으로 함수형 컴포넌트에서는 이렇게 파라미터 부분에서 비구조화 할당 문법을 사용합니다.

 

 

3.3.6 propTypes를 통한 props 검증

컴포넌트에서 필수적으로 사용할 props를 지정하거나, props의 타입을 지정할 때 propsTypes를 사용합니다. 지정하는 방법은 기본 props를 설정할 때와 비슷합니다.

 

우선 코드 상단에 PropTypes를 import 구문으로 불러옵니다.

import PropTypes from ‘prop-types‘;

 

 

그 후 하단에 원하는 props의 타입을 지정합니다.

MyComponent.propTypes = {
  name: PropTypes.string
};

 

이 예시에서는 name 값은 무조건 문자열 형태로 전달해야 합니다. 만약 name 값을 숫자로 전달한다면 Console 탭에서 경고 메시지를 출력합니다.

 

 

필수적으로 사용할 props를 지정하고 싶다면 isRequired 키워드를 사용하면 됩니다. 이 키워드가 붙은 props를 만들지 않았다면 경고 메시지가 띄워집니다.

import React from ‘react‘;
import PropTypes from ‘prop-types‘;


const MyComponent = ({ name, favoriteNumber, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
      <br />
      제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
  );
};



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



MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};



export default MyComponent;

 

MyComponent에 favoriteNumber라는 props를 새로 만들었습니다. 이 props는 숫자를 필수로 넣어주어야 합니다. 아직 App 컴포넌트에서 favoriteNumber에 값을 넣어주지 않았기 때문에 Console 창에 경고 메시지가 나타납니다.

 

 

 

이 외에도 PropTypes에는 다양한 종류가 있습니다.

• array: 배열

• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미합니다. 예를 들어 arrayOf(PropTypes.number)는 숫자로 이루어진 배열입니다.

• bool: true 혹은 false 값

• func: 함수

• number: 숫자

• object: 객체

• string: 문자열

• symbol: ES6의 Symbol

• node: 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX 코드. children도 node PropType입니다.)

• instanceOf(클래스): 특정 클래스의 인스턴스(예: instanceOf(MyClass))

• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나

• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나

• objectOf(React.PropTypes.number): 객체의 모든 키값이 인자로 주어진 PropType인 객체

• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체

• any: 아무 종류

 

이 외에도 더 자세한 정보는 https://github.com/facebook/prop-types 에서 확인할 수 있습니다.

 

 

3.3.7 클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때 render 함수에서 this.props를 조회하면 됩니다. defaultProps와 propTypes는 함수형 컴포넌트와 같은 방식입니다.

 

import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;

class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}

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

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};

export default MyComponent;

 

 

추가로 defaultProps와 propTyeps를 설정할 때 클래스 내부에서 지정할 수도 있습니다.

import React, { Component } from ‘react‘;
import PropTypes from ‘prop-types‘;

class MyComponent extends Component {
  static defaultProps = {
    name: ‘기본 이름‘
  };
  static propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
  render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    return (…);
  }
}

export default MyComponent;

 

 

---

3.4 state

위에서 배운 props는 부모 컴포넌트에서 설정하는 값으로, 컴포넌트 자신은 읽기 전용으로만 접근할 수 있습니다. 반면에 state란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 리액트에는 두 가지 종류의 state가 있습니다. 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수형 컴포넌트에서의 useState라는 함수를 통해 사용하는 state입니다.

 

 

3.4.1 클래스형 컴포넌트의 state

먼저 클래스형 컴포넌트가 지니고 있는 state를 배워보겠습니다. src 디렉터리에 Counter.js 파일을 생성하여 아래와 같은 코드를 입력하세요

import React, { Component } from ‘react‘;
 
class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {          // state의 초깃값 설정하기
      number: 0
    };
  }
  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;

 

 

위의 코드를 하나씩 살펴보겠습니다.

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

 

컴포넌트에서 state를 설정할 때는 다음과 같은 constructor 메서드를 작성합니다. 이는 컴포넌트의 생성자 메서드인데, constructor을 작성할 때는 반드시 super(props)를 호출해야 합니다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출합니다. 그 후, this.state 값에 초깃값을 설정해 주었습니다. 컴포넌트의 state는 객체 형식이어야 합니다.

 

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>
    );
  }

 

위의 render 함수에서 현재 state를 조회하려면 this.state를 조회하면 됩니다. 이 컴포넌트에서는 버튼을 클릭할 때마다, 화면에 출력되는 숫자의 값을 증가시킵니다. 이러한 기능을 구현하기 위해 button 안에 onClick이라는 값을 props로 넣어주었습니다. 이를 통해 버튼이 클릭될 때, this.setState를 이용해 state에 새로운 값을 넣어줍니다. 이러한 이벤트는 4장에서 더 자세히 배우겠습니다.

 

import React from ‘react‘;
import Counter from ‘./Counter‘;


const App = () => {
  return <Counter />;
};



export default App;

 

Counter 컴포넌트를 다 작성했다면 App에 불러와 렌더링 합니다.

 

브라우저에서 [+1]이라고 쓰인 버튼을 누르면 위의 숫자가 하나씩 증가하는 것을 확인할 수 있습니다.

 

 

또한, state 객체 안에 여러 값이 있을 수 있습니다.

import React, { Component } from ‘react‘;


class Counter extends Component {
  constructor(props) {
    super(props);
    // state의 초깃값 설정하기
    this.state = {
      number: 0,
      fixedNumber: 0
    };
  }
  render() {
    const { number, fixedNumber } = this.state; // state를 조회할 때는 this.state로 조회합니다.
    return (
      <div>
        <h1>{number}</h1>
        <h2>바뀌지 않는 값: {fixedNumber}</h2>
        <button
          // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
          onClick={() => {
            // this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}



export default Counter;

 

 

constructor 메서드를 선언하지 않고 초깃값을 설정할 수 있습니다. 클래스 내부에 constrcutor  메서드 대신 아래 코드를 입력해 보세요

  state = {
    number: 0,
    fixedNumber: 0
  };

 

앞으로는 이 방식으로 state의 초깃값을 설정하겠습니다.

 

 

 

this.setState를 사용한다고 해서 state 값이 바로 바뀌지 않습니다. 만약 바로 업데이트를 하고 싶다면 this.setState를 사용할 때, 객체 대신 함수를 인자로 넣어주면 됩니다. prevState는 기존 상태이고, props는 현재 지니고 있는 props입니다. props가 필요하지 않으면 생략할 수 있습니다.

 

this.setState((prevState, props) => {
return {
  // 업데이트하고 싶은 내용
}
})

 

코드를 수정하여 this.setState를 두 번 호출해 보겠습니다

 

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
  onClick={() => {
    this.setState(prevState => {
      return {
        number: prevState.number + 1
      };
    });
    // 위 코드와 아래 코드는 완전히 똑같은 기능을 합니다.
    // 아래 코드는 함수에서 바로 객체를 반환한다는 의미입니다.
    this.setState(prevState => ({
      number: prevState.number + 1
    }));
  }}
>
  +1
</button>

 

OnClick에서 두 번째로 setState 함수를 사용할 때, 화살표 함수에서 바로 객체를 반환하도록 했습니다.

이렇게 객체 대신 함수를 인자로 넣어주면 브라우저에서 [+1]을 누르면 숫자가 2씩 증가합니다.

 

 

 

setState를 사용해 값을 업데이트한 후, 특정 작업을 하고 싶다면 setState의 두 번째 파라미터로 콜백 함수를 등록하여 작업을 처리할 수 있습니다.

<button
  // onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정합니다.
  onClick={() => {
    this.setState(
      {
        number: number + 1
      },
      () => {
        console.log(‘방금 setState가 호출되었습니다.’);
        console.log(this.state);
      }
    );
  }}
>
  +1
</button>

 

위처럼 코드를 수정하고 console 창을 열면 ‘방금 setState가 호출되었습니다.’라는 메시지와 state 값이 출력됩니다.

 

 

 

3.4.2 함수형 컴포넌트에서 useState 사용하기

리액트 16.8 이후부터 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다. 이 과정에서는 Hooks를 사용하게 됩니다. Hooks의 종류는 다양하지만 이번 장에서는 useState만 배워보겠습니다.

 

 

Hooks를 사용하기 전 배열 비구조화 할당이라는 것을 알아봅시다. 배열 비구조화 할당은 이전에 배운 객체 비구조화 할당과 비슷합니다.

const array = [1, 2];
const one = array[0];
const two = array[1];

// 위와 아래 코드는 같은 표현

const array = [1, 2];
const [one, two] = array;

 

위의 3행의 표현을 아래 2행의 표현처럼 사용할 수 있습니다.

 

 

그럼 새 컴포넌트를 만들어보겠습니다. src 디렉터리에 Say.js 파일을 생성하고 아래의 코드를 작성하세요

import React, { useState } from ‘react‘;


const Say = () => {
  const [message, setMessage] = useState(“);
  const onClickEnter = () => setMessage(‘안녕하세요!’);
  const onClickLeave = () => setMessage(‘안녕히 가세요!’);



return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};



export default Say;

 

useState 함수의 인자에는 상태의 초깃값을 넣어줍니다. 클래스형 컴포넌트에서는 state가 객체 형태여야 했지만, useState에서는 자유입니다. 함수를 호출하면 배열이 반환되는데 배열의 첫 번째 요소는 현재 상태이고, 두 번째 요소는 상태를 바꾸어주는 함수입니다. 이 상태를 바꾸어주는 함수를 세터(setter) 함수라고 부릅니다. 위의 코드에서는 배열의 이름이 각각 message와 setMessage이지만, 다른 이름으로 바꾸어도 상관없습니다.

 

import React from 'react';
import Say from './Say';
 
const App = () => {
  return <Say />;
};
 
export default App;

 

이제 App에서 Say 컴포넌트를 렌더링 해보세요

 

 

 

그리고 한 컴포넌트에서 useState 여러 번 사용할 수 있습니다.

 

 

 

---

 

 

3.5 state를 사용할 때 주의사항

 

클래스형/함수형 컴포넌트에서 state를 사용할 때 주의해야 할 사항이 있습니다. state 값을 바꿀 때, 세터 함수를 사용해야 한다는 것입니다. setState나 useState에서 바로 state 값을 바꾸면 오류가 발생합니다.

// 아래는 모두 잘못된 코드!!

// 클래스형 컴포넌트에서…
this.state.number = this.state.number + 1;
this.state.array = this.array.push(2);
this.state.object.value = 5;


// 함수형 컴포넌트에서…
const [object, setObject] = useState({ a: 1, b: 1 });
object.b = 2;

 

state 값을 바꾸기 위해서는 배열이나 객체의 사본을 만들고, 그 사본에 값을 업데이트한 후, 그 사본의 상태를 setState 또는 세터 함수를 통해 업데이트합니다.

 

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 20 }; // b 값만 수정한 사본 만들기

 

객체에 대한 사본을 만들 때는 점 세 개가 연달아 붙어있는 spread 연산자를 사용하여 처리합니다. 스프레드 연산자는 배열, 문자열, 객체 등 반복 가능한 객체를 개별 요소로 분리할 수 있습니다. 위의 예시에서는 nextObject 객체에 object의 값을 덮어쓴 후, b의 값을 수정하였습니다.

 

// 배열 다루기

const array = [
{ id: 1, value: true },
{ id: 2, value: true },
{ id: 3, value: false }
];

let nextArray = array.concat({ id: 4 }); // 새 항목 추가
nextArray.filter(item => item.id != = 2); // id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? { ...item, value: false } : item)); // id가 1인 항목의 value를 false로 설정

 

배열에 대한 사본을 만들 때는 배열의 내장 함수들을 사용합니다. concat 함수를 통해 원본 배열 array에 id가 4인 새 항목을 추가한 사본을 만들었습니다. filter 함수를 이용하여 id가 2가 아닌 함수들만을 필터링합니다. map 함수를 이용하여 id가 1이면, value 값을 false로 설정하도록 했습니다.

 

이에 대한 자세한 내용은 이후 배워보도록 하겠습니다.

 

 

---

 

3.6 정리

props

- 컴포넌트 자신 내에서는 수정 X, 부모 컴포넌트에서만 수정 O

- 클래스형 컴포넌트: this.props로 값 추출 가능, defaultProps와 propTyeps를 클래스 내부에서 지정 가능

- 함수형 컴포넌트: props로 값 추출 가능

 

state

- 컴포넌트 자신 내에서 수정 가능

- 클래스형 컴포넌트: state는 객체 형식이어야 함, this.setState 함수로 state 값 수정 가능

- 함수형 컴포넌트: useState 함수 사용, state 형식 자유, 배열을 반환하는데 첫 번째 원소는 현재 상태, 두 번째 요소는 상태를 바꾸는 함수

- state는 함수형 컴포넌트 방식을 권장

 

---

Quiz

1. 클래스형 컴포넌트에는 (A) 키워드가 필요하고 (B)를 상속받아야 한다.
2. props 값은 (A)만 설정할 수 있다.
3. 클래스형 컴포넌트에서 props를 사용할 때, render 함수에서 (A)를 조회할 수 있다.
4. 리액트의 state는 두 가지 종류가 있는데, 하나는 클래스형 컴포넌트가 지닌 (A)이고, 다른 하나는 함수형 컴포넌트에서의 (B)라는 함수를 통해 사용하는 state이다.
5. useState 함수를 호출하면 배열이 반환되는데, 첫 번째 배열은 (A)이고, 두 번째 배열은 (B)이다.
6. state는 클래스형 컴포넌트에서는 (A) 형식이어야 하고, 함수형 컴포넌트는 (B)이다.
7. state 값을 바꾸기 위해서는 배열이나 객체의 ( A )를 만들고, 그 (A)에 값을 (B)를 통해 업데이트한다.
8. MyComponent 컴포넌트에서 ‘age’라는 props를 만들고, 숫자를 필수적으로 넣도록 하세요.
9. useState 함수를 사용하여 버튼을 클릭할 때마다 3씩 증가하는 컴포넌트를 만드세요. 작업에 끝날 때마다, console에 확인 메시지를 출력하세요.

 

 

---

Corner React1
Editor: 이조