Component 만들기

Component

• 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다.
• 컴포넌트는 개념적으로 JavaScript 함수와 유사하다. 'props'라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React 엘리먼트를 반환한다.
• 엘리먼트는 일반 객체(plain object)로 React 앱의 가장 작은 단위다. 엘리먼트는 컴포넌트의 '구성 요소'다.
• 컴포넌트를 선언하는 방식에는 "함수형 컴포넌트와 클래스형 컴포넌트"가 있다.

1. Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}

• 클래스형 컴포넌트는 React.Component 클래스를 상속 (이미 구현되어 있는 클래스에 기능을 추가함)받는 것으로 기본 형태를 갖춘다.
• 컴포넌트는 JSX를 반환해야하는데, 클래스는 return 문을 사용할 수 없으므로, 클래스형 컴포넌트에서는 JSX를 반환하기 위해 render() 함수를 사용한다. 리액트는 클래스형 컴포넌트의 render() 함수를 자동으로 실행시킨다.

2. Function Component

function Welcome(props) {
  return <h1>Hello</h1>;
}

• 함수형 컴포넌트는, props로 받을 객체 인자를 정의하고, JSX를 반환하는 것으로 기본 형태를 갖춘다.
• 함수형 컴포넌트에서는 return문에서 JSX를 반환할 수 있다.
  
  

---

props

• 컴포넌트는, 데이터를 가진 하나의 props 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다.
• state와는 다르게, props은 컴포넌트 외부에서 데이터를 제공받는다.
• props는 컴포넌트에서 컴포넌트로 전달하는 데이터다. 컴포넌트의 속성으로, 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서만 설정 가능하다.

props 지정하기

props는 <ComponentName prop1={propValue1} prop2={propValue2} ... /> 형태로 컴포넌트를 부를 때 함께 지정한다. 아래 코드에서는 Dog 컴포넌트에 name prop와 age prop를 지정하였다.

<Dog name="Ari" age={10} />
<Dog name="Bori" age={7} />

• 같은 타입의 컴포넌트에 다른 props 값 적용으로
• props 값은 다르나, 패턴 동일하게 효율적인 컴포넌트 재사용 가능
• props에는 불리언 값(true, false), 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있다.
• 공백 구분으로 여러 개를 담는 것도 가능하다.
• props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({})로 값을 감싸야 한다.

props 받아 사용하기

• props는 읽기 전용 이므로 컴포넌트의 내부에서 props를 수정해서는 안 된다. 입력값을 수정하지 않는 함수를 순수 함수라고 호칭하며, 모든 React 컴포넌트는 자신의 props를 다룰 때, 순수 함수처럼 동작해야한다.

• props를 받는 함수형 컴포넌트에 인자를 정의하면, props를 속성으로 가지는 객체 Object가 해당 인자로 전달된다. 컴포넌트 내부에서 사용 시, 객체에 존재하는 값을 가져오듯 점 연산자(.)를 사용하여 원하는 props를 꺼내 쓸 수 있고, 이를 중괄호로 감싸 { [인자 이름].[props 이름] } 형태로 사용한다.

  // 객체 인자를 통해 props 받아오기
  function Dog(props) {
   return {
     <div>{props.name}</div>
     <div>{props.age}</div>
   }
  }

• props를 받을 때, 구조 분해 할당(참조)을 사용하여 아래와 같이 점 연산자 사용을 줄일 수 있다.

• 'prop-types' 라이브러리를 통해 컴포넌트의 특별한 프로퍼티인 propTypes를 선언하여 컴포넌트가 받은 props의 타입을 확인하거나, defaultProps 프로퍼티를 할당하여 props의 초기값을 정의할 수 있다.
  Typechecking with Proptypes - React Docs(참조)

  // 객체 인자를 구조 분해 할당하여 props 받아오기
  function Dog({ name, age }) {
   return {
     <div>{name}</div>
       <div>{age}</div>
     }
  }
  
  // 컴포넌트 props 초기값 지정
  Dog.defaultProps = {,
   name: '이름',
   age: 0,
  }
  
  // 컴포넌트 props 타입 확인
  Dog.propsTypes = {,
   name: PropTypes.string.isRequired,
   age: PropTypes.number,
  }

• 클래스형 컴포넌트에서 props를 사용할 때는 this.props로 불러와 사용한다. 클래스형 컴포넌트에서 propTypes나 defaultProps를 사용할 때는, 클래스 내부에서도 지정할 수 있다.

  // 클래스형 컴포넌트에서 props 사용하기
  class Dog extends React.Component {
   static defaultProps = { ... };	// 컴포넌트 props 초기값 지정
   static propTypes = { ... };	// 컴포넌트 props 타입 확인
   render() {
     // 구조 분해 할당으로 props 사용
     const { name, age } = this.props;	
     return <div>{name}</div>;
   }
  }

  
  

---

State

state는 컴포넌트 UI를 위한 데이터가 저장된 오브젝트로, props나 state의 값이 바뀌면 그 컴포넌트의 render 함수가 다시 호출된다. render 함수가 가지고 있는 하위의 컴포넌트들의 각 render 함수도 다시 호출된다. 즉 props나 state의 값이 바뀌면 화면이 다시 그려진다.

setState

setState() 리액트의 함수형 컴포넌트내에서 상태를 관리하기 위해 사용되는 hooks인 useState()를 통해 반환되는 함수로 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 리렌더링된다.

• 비동기 동작
• 연속적으로 호출 했을 때 리액트 내부적으로 Betch 처리됨
• state 객체를 넘겨주며, 새로운 state를 반화하는 함수를 인자로 넘겨줄 수 있음

class Habit extends Component {
  state = {
    count: 0,
  };

  handleIncrement = () => {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count);
  }
  
  render() {
    return <button onClick={this.handleIncrement}></button>
  }
}