3# 컴포넌트

GitHub - gilbutITbook/080203: 리액트를 다루는 기술 개정판

(본 포스팅은 위의 리액트를 다루는 기술(개정판)을 기반으로 작성했습니다.)

 

 

 

 

 

 

'컴포넌트 및 클래스형 컴포넌트(rcc)의 기능'

• 컴포넌트의 기능은 단순 템플릿 이상
• data에 맞춰 UI를 생성
• 라이프사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙일 수 있음
• 클래스는 state 및 라이프사이클 기능 사용 가능
• 임의 메서드를 정의 가능
• render 함수 안에서 보여주어야 할 JSX를 반환해야 함

 

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}

export default App;

- 리액트 v16.8 엡데이트 이후 Hooks의 도입으로 state와 라이프사이클 API를 다른 방식으로 사용할 수 있게 되었다.
- extension : Reactjs code snippets 설치를 하면 예약어를 통해 쉽게 클래스형 컴포넌트와 함수형 컴포넌트를 생성할 수 있다.

 

---

 

'함수형 컴포넌트(rsc)의 특징'

• 큰 차이는 없는 것을 고려해야 함
• 선언하기 편하고 메모리 자원도 클래스형보다 덜 사용
• 빌드 후 배포할때도 함수형 컴포넌트를 사용하는 것이 파일 크기가 더 작음
• 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형과 Hooks를 사용하도록 권장

 

import React from 'react'; // export한 컴포넌트 모듈을 불러온다.
import Temp from ' ./Temp';

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

export default App; // 다른 파일에서 import 가능하도록 모듈을 내보낸다.

일반 함수 : 자신이 종속된 객체
화살표 함수 : 자신이 종속된 인스턴스

 

---

 

props
컴포넌트 속성을 설정할 때 사용하는 요소. 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

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

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

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

// PropTypes를 통해 해당 값의 type을 지정
MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

export default MyComponent;

 

state
컴포넌트 내부에서 바뀔 수 있는 값. 클래스 컴포넌트는 state이며, 함수형 컴포넌트는 useState이다.

props : 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값. 컴포넌트 자신은 props를 읽기 전용으로 사용 가능하다.
this.state : state 조회
constructor : state 초깃 값 설정

 

① 클래스형 컴포넌트의 state

import React, { component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state의 초깃값 설정하기
    this.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;

 

② this.setState에 객체 대신 함수 인자 전달하기

onClick={() => {
    this.setState(prevState => {
        return {
            number: prevState.number + 1
        };
    });
    this.setState(prevState => ({
        number: prevState.number + 1
    })
}}

• return없이 바로 객체를 반환받아서 클릭할 때 숫자가 1씩 더함
• setState를 통해 업데이트를 시켜 특정 작업을 하고 싶을 때는 두번째 인자로 콜백함수를 등록해 작업 처리

 

③ 함수형 useState

import React, { useState } from "react";

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

  const [color, setColor] = useState("black");
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: "red" }} onClick={() => setColor("red")}>
        빨간색
      </button>
      <button style={{ color: "green" }} onClick={() => setColor("green")}>
        초록색
      </button>
      <button style={{ color: "blue" }} onClick={() => setColor("blue")}>
        파란색
      </button>
    </div>
  );
};

export default Say;

1. useState를 사용하기 위해 import
2. useState()로 초기값 인자로 설정
3. 함수를 호출하면 배열이 반환
4. 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꿔주는 함수.
5. 이벤트 연결
6. 다른 상태 관리

 

 

---

 

+ state의 값을 변경할 때는 setState/useState를 통해 전달받은 세터 함수를 사용해야 한다.