[리다기] 03. 컴포넌트

리액트를 슬기롭게 다루기 위해 "리액트를 다루는 기술" 읽기를 시작했습니다.

• 책을 읽으면서 중요한 내용과 나중에 개발을 하며 참고할 만한 내용을 정리합니다.
• 빠르게 읽기보다는 각 내용을 하나하나 이해하고 적용하는데 집중합니다.

✏️ 컴포넌트의 기능

• 데이터가 주어졌을 때 이에 맞춰 UI를 만들어준다.
• 라이프사이클 API를 이용해 컴포넌트가 화면에서 나타났을 때, 사라질 때, 변화가 일어났을 때 주어진 작업을 처리한다.
• 임의 메서드를 만들어 특별한 기능을 붙여준다.

✏️ 함수 컴포넌트의 장, 단점

장점

• 클래스형 컴포넌트보다 선언하기 편하며, 메모리 자원도 덜 사용한다.
• 프로젝트를 완성하여 빌드한 후 배포할 때도 클래스형 컴포넌트보다 결과물의 파일 크기가 더 작다.

단점

• state와 라이프사이클 API의 사용이 불가하다.

→ 하지만 리액트의 hooks이 도입되면서 해당 문제는 해결되었다.

✏️ 화살표 함수 vs 일반 함수

• 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
• 화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있다.

✏️ props값을 따로 지정하지 않았을 때 보여줄 기본값을 설정하는 defaultProps

const MyComponent = (props) => {
	return <div>my name is {props.name}.</div>;
};

MyComponent.defaultProps = {
	name : "jake"
};

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

const App = () => {
	return <MyComponent>자식</MyComponent>;
};

const MyComponent = (props) => {
	return <div>my name is {props.childern}.</div>; 
};

// --> props.childern === 자식

✏️ 컴포넌트의 필수 props을 지정하거나, props의 타입을 지정하는 propTypes

1. props의 타입 지정

• propTypes를 사용하려면 상단에 import 구문을 사용해 불러와야 한다.

import PropTypes from 'prop-types';

• 그리고 타입을 지정한다.

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

• 다른 타입을 입력할 경우, 화면에 렌더링되긴 하지만 console에 경고 메세지가 출력된다.

1. 필수 propTypes 지정

• propTypes을 지정하지 않은 경우 경고메세지를 띄워준다.

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

✏️ state와 props

state

• 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• 리액트에서는 두가지 종류의 state가 있다.
  • 클래스형 컴포넌트가 지니고 있는 state
    • 이때 state이 초기값은 객체 형태이어야 한다.
  • 함수형 컴포넌트에서 useState함수를 통해 사용하는 state
    • 초기값의 형태는 자유이다.

props

• 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값
• props을 전달받는 컴포넌트는 해당 props를 읽기 전용으로만 사용할 수 있다. → 즉, props을 바꾸려면 부모컴포넌트에서 바꿔주어야 한다.
  

✏️ 배열 비구조화 할당

• 배열 안에 들어 있는 값을 쉽게 추출할 수 있도록 해주는 문법

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

✏️ useState 사용하기

• useState 함수를 호출하면 배열이 반환된다.

// 객체 다루기
const object = { a: 1, b: 2, c: 3 }; 
// 사본을 만들어 b값만 덮어쓰기
const nextObject = { ...object, b: 5 };

// 배열 다루기
const arr = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false },
];
// 새 항목 추가
let nextArr = arr.concat({ id: 4 });
// id가 1인 항목의 value를 false로 설정
nextArr.map((item) => (item.id === 1 ? { ...item, value: false } : item));

• 배열의 첫번째 원소는 현재 상태이고, 두번째 원소는 상태를 변경해주는 함수, 세터(setter)함수이다.
• 구조 분해할당을 통해 이름을 자유롭게 설정할 수 있다.

✏️ state 사용시 주의사항

• state 값을 바꿔야 할때는 setState 혹은 useState를 통해 전달받은 세터함수를 사용해야 한다.

✏️ state를 통해 체나 배열을 업데이트해야 한다면?

1. 배열이나 객체 사본을 만들고, 그 사본에 값을 업데이트한다.
2. 그리고 그 사본의 상태를 setState 혹은 세터함수를 통해 업데이트한다.

// 객체 다루기
const object = { a: 1, b: 2, c: 3 }; 
// 사본을 만들어 b값만 덮어쓰기
const nextObject = { ...object, b: 5 };

// 배열 다루기
const arr = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false },
];
// 새 항목 추가
let nextArr = arr.concat({ id: 4 });
// id가 1인 항목의 value를 false로 설정
nextArr.map((item) => (item.id === 1 ? { ...item, value: false } : item));

• 객체에 대한 사본을 만들 때는 spread 연산자(…)를 사용한다.
• 배열에 대한 사본은 배열의 내장 함수를 활용한다.