⚛️ React 2 - Component

💫 : 이 글은 VeloPert 님이 만드신 책 리액트를 다루는 기술 로 공부한 내용을 토대로 올립니다.

이번 글에서는 컴포넌트에 대해 알아보려고 한다. 👨‍💻

---

컴포넌트

사용자 인터페이스(UI)를 구축하기 위해 재사용 가능한 요소이다.
각 컴포넌트는 자체적으로 독립적이며, 상태(state)와 속성(props)을 가질 수 있다.

컴포넌트의 기능은 다음과 같이 이루어진다.

• 데이터가 주어졌을 때 UI를 만들어 준다.
• Life-Cycle API를 이용해 컴포넌트의 변화에 따른 작업을 처리할 수 있다.

컴포넌트의 선언 방식

컴포넌트를 선언할 수 있는 방식은 두 가지이다.

• 클래스형 컴포넌트
• 함수 컴포넌트

클래스형 컴포넌트

클래스형 컴포넌트의 구조는 아래와 같이 이루어진다.

import { Component } from 'react';

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

클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있으며
임의 메소드를 정의할 수 있다.

⚠️ 중요 사항

• render 함수가 있어야 한다.
  또한 함수 내부에서 보여줘야 할 JSX를 반환해야한다.

함수형 컴포넌트

함수형 컴포넌트는 다음과 같은 구조로 이루어진다.

const MyComponent = () => {
	return <div> 리액트 어렵다. </div>
};

export default MyComponent;

여기서 함수를 작성할 때 function 키워드가 아닌 ES6에서 도입된 화살표 함수로 작성했다.

화살표 함수

함수를 파라미터로 전달할 때 사용하는 문법이며, ES6 문법에서 함수를 표현하는 방식

// 기존의 함수 선언 방식
setTimeout(function () {
	console.log("Hello World !");
}, 1000);

// ES6 - 화살표 함수
setTimeout(() => {
	console.log("Hello World !");
}, 1000);

기존 함수와 화살표 함수의 차이점은 가리키는 객체가 다르다.
일반 함수의 경우는 자신이 종속된 객체를 this로 가리킨다.
화살표 함수의 경우는 자신이 종속된 인스턴스를 가리킨다.

---

props

컴포넌트의 속성을 설정할 때 사용하는 요소이다.

props는 properties를 줄인 표현으로 props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다.

• props의 값을 지정하지 않았을 때의 기본값 설정 : defaultProps

const MyInfoComponent = props => {
	return (
    	<div>
      		안녕하세요. 제 이름은 {props.myName} 이에요!
      	</div>;
    );
}

MyInfoComponent.defaultProps = {
	myName : '기본 이름'
};

export defualt MyInfoComponent;

비구조화 할당

ES6의 비구조화 할당 문법을 이용하여 내부 값을 바로 추출할 수 있는 방법이 있다.
이를 이용할 경우 많은 props의 값을 핸들링할 수 있다.

import React from "react";

const Props = (props) => {
  // 객체 비구조화 할당
  const { nickname, age, job } = props;
  return (
    <div>
      내 닉네임 : {nickname} <br />
      내 나이 : {age} <br />
      내 직업 : {job} <br />
    </div>
  );
};

export default Props;

이 뿐만 아니라 함수의 파라미터가 객체일 경우 해당 값을 바로 비구조화하여 사용 가능하다.

import React from "react";

// 파라미터에 객체를 바로 전달!
const Props = ({ nickname, age, job }) => {
  return (
    <div>
      내 닉네임 : {nickname} <br />
      내 나이 : {age} <br />
      내 직업 : {job} <br />
    </div>
  );
};

export default Props;

propTypes (props 타입 검증)

컴포넌트에서 필수 props를 알려주거나 prop의 타입을 지정할 때는 propTypes를 사용한다.

⚠️ 중요 사항

• import 구문을 통해 PropTypes를 불러와야 함.

사용 예시는 다음과 같다.

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

const PropType = ({ name, age }) => {
  return (
    <div>
      내 이름 : {name} <br/>
      내 나이 : {age}
    </div>
  );
};

PropTypes.propTypes = {
  name: PropType.string, // 문자열만 받도록 지정
  age: PropType.number.isRequired, // 숫자만 받도록 지정, 값이 필수로 들어와야 한다.
  
};

export default PropTypes;

---

state

컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

여기서 props와 차이점은 props의 경우 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이다. 따라서 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용이 가능함.

여기서 props를 바꾸려면 부모 컴포넌트에서 바꿔줘야 한다.

⚠️ 중요 사항

• 직접 수정하지 말고 setState를 사용한다.
  상태를 변경할 때는 직접 수정하는 것이 아니라 setState() 메서드를 사용해야 한다.
  이는 리액트의 상태 업데이트를 관리하고 컴포넌트의 렌더링을 효율적으로 처리하기 위함이다.

• 상태는 불변성을 유지해야 한다.
  setState() 메서드를 호출하여 상태를 업데이트할 때 이전 상태를 직접 변경하지 않고,
  새로운 상태 객체를 생성하여 사용해야 한다.

• 비동기로 상태를 업데이트할 수 있다.
  setState() 메서드는 비동기로 동작할 수 있다.
  여러 번의 상태 업데이트가 있을 경우, 이전 상태에 의존하는 경우에는 함수형 업데이트나 콜백 함수를 사용하여 안정적으로 상태를 업데이트해야 한다.

• 상태 초기화는 생성자 또는 useState() 훅을 사용한다.
  클래스 컴포넌트에서는 생성자를 사용하여 상태를 초기화할 수 있다. 함수 컴포넌트에서는 useState() 훅을 사용하여 초기 상태를 설정할 수 있다.

내가 배운 내용으로 작성한 구조는 다음과 같았다.

import React, { useState } from "react";
/*  useState 사용해보기.
    Hooks & 비구조화 할당 이용 */
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;

해당 코드의 기능은 한 컴포넌트 내부에서 useState를 사용해 버튼 입력에 따른 텍스트와 색상이 변경되는 기능을 갖고 있다.

여기서 message와 setMessage가 담긴 배열을 비구조화 할당하여 첫 번째 원소를 현재 상태, 두번 째 원소는 상태를 바꾸어 주는 함수이다. 이 함수를 세터 함수라고 부른다!

다음은 렌더링한 결과이다.

---

• 정리 ✅

props와 state 둘 다 비슷해 보일 수 있지만 역할이 매우 다르다.
props의 경우 부모 컴포넌트가 설정하고 state의 경우 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트 할 수 있는 차이점이 있다.

하지만 props를 사용한다고 해서 해당 값이 무조건 고정되는 것이 아니며 부모 컴포넌트의 state를 자식 컴포넌트의 props에 전달해 호출하면 props도 유동적으로 사용이 가능하다는 것이다.

Reference

• 도서 : 리액트를 다루는 기술 📖
• React 공식 사이트