[TIL] 10/31 클래스/함수형 컴포넌트, useState

1. 컴포넌트

 

원래 리액트에서는 클래스형 컴포넌트를 썼지만, 리액트 18버전 이후로 리액트 훅이란 것이 생기면서 함수형 컴포넌트에서 state 관리, 라이프사이클 등을 사용할 수 있게 되면서 더 간단하게 사용할 수 있는 함수형 컴포넌트를 사용하고 있다. 

 

1.1. 클래스형 컴포넌트

 

Component 클래스를 상속해야 하기 때문에 Component 를 import 해와야한다. 클래스형 컴포넌트에서는 render() 메서드를 통해 화면을 그린다. 

import { Component } from "react";

class ClassCom extends Component {
    render() {
        return (
            <div>
                클래스형 컴포넌트
            </div>
        );
    }
}

export default ClassCom;

 

 

1.2. 함수형 컴포넌트

 

함수형 컴포넌트는 render() 메서드 없이 그냥 함수 안에서 return 해주면 되기 때문에 클래스형 컴포넌트보다 훨씬 간단하게 사용할 수 있다는 장점이 있다. 

function FuncCom() {
    return (
        <div>
            함수형 컴포넌트
        </div>
    );
}

export default FuncCom;

 

화살표 함수를 사용해서 컴포넌트를 만들 수도 있다. 

const FuncCom = () => {
    return (
        <div>
            함수형 컴포넌트
        </div>
    );
}

export default FuncCom;

 

 

 

2. State 사용하기

일반 변수를 사용하면 상태관리를 할 수 없기 때문에 state 를 사용해서 상태 관리를 한다. 리액트 훅 중에 useState 를 통해 데이터의 상태 관리를 해줄 수 있다. 

 

일반 변수를 사용했을 때 변수에 담긴 데이터가 바뀌어도 화면이 다시 렌더링되지 않지만, state 변수에 데이터의 값을 담아 사용하면 데이터가 바뀌면(데이터의 상태가 바뀌면) 화면이 다시 렌더링 된다. 

import { useState } from 'react'; // useState 가져오기

const TodoList: React.FC = () => {
    const [ state, state변경함수 ] = useState<타입>(초기값);
    
    return (
        ...
    );
}

 

 

2.1. state 가 array 또는 object 자료형일 경우

 

이렇게 ...todos 로 기존의 값들을 가져오고 뒤에 새로운 데이터를 붙여서 사용할 수 있다. 이때 ... 을 spread 연산자라고 한다. 

spread 연산자를 사용해서 기존 데이터들 + 새로운 데이터가 들어간 새로운 배열을 생성해서 원본 데이터를 건드리지 않는다.

(원본 데이터를 마구 고쳐버리면 곤란해지기 때문 -> 원본 훼손)

setTodos([...todos, { id: Date.now(), text: newTodo, isChecked: false }]);

 

배열은 참조형이기 때문에 변수는 배열 자체를 담고 있는 것이 아니라 배열이 있는 메모리의 주소값을 담고 있다. 

그래서 b 라는 다른 변수에 a 의 값(a 배열의 주소값)을 넣어줘도 a 배열이 들어가는 것이 아니라 a 배열의 주소값이 들어간다. 때문에 변수 a, b 는 결국 같은 배열을 가리키고 있는 것이다.

 

c 는 spread 연산자를 사용해서 새롭게 배열을 만들고 기존의 데이터 값들을 펼쳐서 넣어주었기 때문에 a, b 와는 다른 값을 가지게 된다. 

c 라는 배열 자체를 새롭게 만들었기 때문에 a, b 와는 다른 c 배열의 메모리 주소 값을 담고 있는 것이다. 

// 얕은 복사
let a = [1, 2, 3];
let b = a;
console.log(a === b); // true -> a, b는 같은 메모리 주소를 담고 있음

// 깊은 복사
let c = [...c];
console.log(a === c); // false -> 스프레드 연산자를 이용해 새로운 배열 만듦, a와 다른 메모리 주소 담고 있음

 

 

 

3. 자잘자잘 새롭게 알게된 내용들

 

3.1. 타입스크립트에서 함수형 컴포넌트 타입은 React.FC

 

React.FC 는 함수형 컴포넌트를 정의할 때 사용하며, FC 는 Function Component 라는 뜻.

const TodoList: React.FC = () => {
    // ...
};

 

 

3.2. type 기능 활용해보기

 

이전까지는 React.js 만 사용해봐서 type 이라는 사용자가 정의하는 타입 기능을 써볼 일이 없었는데, 타입이 있는 타입스크립트를 사용하면서 처음 사용해보았다. 

 

todo 라는 타입을 만들어서 투두를 저장하는 식으로 코드를 짰는데, 타입 자체를 투두로 정해놓으니 넣어야할 값이 명확하게 보여서 좋았다. 확실히 타입이 지정되어 있으니 변수에 잘못된 타입을 쓰는 에러도 잡기 편하고 명확해서 좋은 것 같다.

type Todo = {
    id: number;
    text: string;
    isChecked: boolean;
};