[React] React를 다루는 기술 3장 컴포넌트

존경하는 김민준 개발자님의 저서를 읽고 정리했습니다.

컴포넌트

• 컴포넌트의 기능은 단순 템플릿 이상이다.
• data가 주어졌을 때 이에 맞추어 UI를 만들어 줌,
• 라이프사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있습니다.

클래스형 컴포넌트

• 클래스는 state및 라이프사이클 기능 사용가능, 임의 메서드 작성 가능.
• JS의 클래스는 ES6에서 생김. 그전에는 prototype을 사용해야했음.
• render함수 안에서 보여주어야 할 JSX를 반환해야함.

함수형 컴포넌트

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

화살표 함수와 기존 function은 서로 가리키고 있는 this값이 다르므로 온전한 대체를 이루지 못한다. arrow func는 파라미터를 전달할 떄 유용하다.

• 일반 함수는 자신이 종속된 객체를 this로 가리키며
• 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.

import React from 'react';

function App() {
  return <div></div>;
}

export default App;

• react 스니펫 : rfc or rsc + tab
• 아래 export는 모듈 내보내기 코드.
• 모듈을 가져올때는 import로 컴포넌트 가져와 jsx로 삽입.

Props

• properties로 컴포넌트의 속성을 설정하는 요소.
• 부모 컴포넌트에서 정해 자식 컴포넌트로 주입함.

import "./App.css";
import Mycomponent from "./Mycomponent";
function App() {
  return (
    <>
      <Mycomponent name="React">나나나칠드런</Mycomponent>
    </>
  );
}
export default App;

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

const MyComponent = ({ name, children }) => {
  //   const { name, children } = props;
  return (
    <>
      <div>
        안녕하세요, 제 이름은 {name}입니다.
        <br />
        {children}은 컴포넌트 태그 사이 값을 가져와 보여줍니다.
      </div>
    </>
  );
};

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

// PropTypes를 통해 해당 값의 type을 지정해준다.(string) isRequired -> 필수요소.
MyComponent.propTypes = {
  name: PropTypes.string.isRequired
};

export default MyComponent;

• 매개변수로 props 받아오기.
• children은 태그 사이값.
• defaultProps로 props안넘어왔을 시 디폴트 값 설정
• PropTypes 모듈 사용해 타입 강제할 수 있다.(test code)
  • array, arrayOf, bool, func, number, object, string, symbol, node, instanceOf, oneOf, oneOftype, objectOf, shape, any

State

• 컴포넌트 내부에서 바뀔 수 있는 값.
• props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 props를 읽기 전용으로만 사용가능. 바꾸려면 부모에서 변경.
• 클래스 컴포넌트가 가지는 state와 함수형 컴포넌트의 useState.
• state를 조회할때는 this.state로 조회.
• constructor를 통해 state초깃값 설정.

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

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

• 두번째 setState에서 ({}) 형태로 객체를 return없이 바로 반환 반환핟고록 했기 때문에 숫자가 클릭마다 2씩 오르게 됨.
• setState로 값을 업데이트 시켜 준후 특정 작업으 ㄹ하고 싶을 때는 setState의 두번째 인자로 콜백함수를 등록해 작업을 처리한다.

함수형 useState

• 비구조화 할당을 통해 할당시킨다.
• 상태의 초깃값을 인자로 넣어준다(객체 아니어도 됨. 숫자, 문자열, 객체, 배열..)
• 함수를 호출하면 배열이 반환됨. 첫번째 원소는 현재상태, 두번째 원소는 상태를 바꿔주는 함수.(Setter)

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;