[인스타그램클론코딩] #7.2 Post Component part Two

안녕하세요 강정호 입니다

 

오늘은 Post를 게시판에 보여주는 기능을 개발하면서 배울 개념들에 대해서 작성해볼게요.

 

useState

useState는 가장 기본적인 Hook 이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해주는 기능이다.

즉 한마디로 요약하자면 "함수형 컴포넌트 내부에서 특정 변수의 값을 변경시키는 것" 이라고 생각하면 된다.

 

useState에 대한 예시입니다. (출처 : 리액트를 다루는 기술 Velopert 김민준 저서, 8장 Hooks)

import React, { useState } from 'react';

const Counter = () => {

	//1) value : 상태를 변경할 변수
    //2) setValue : useState 함수를 호출하여 반환 받은 상태를 변경할 수 있는 set함수
	const [value, setValue] = useState(0);
    
    return(
    	<div>
        	<p>
            	현재 카운터 값은 <b>{value}</b>입니다.
            </p>
            <button onClick={() => setValue(value + 1)}> +1 </button>
        	<button onClick={() => setValue(value - 1)}> -1 </button>
        </div>
    );
};

export default Counter;

const [value, setValue] = useState(0);

 

useState 함수에는 파라메터의 초기값인 0을 넣어줍니다. 즉 기본값이 0으로 시작합니다. useState 함수는 배열을 반환하는데 첫번째 원소는 상태값, 두번쨰 원소는 상태를 설정하는 함수(setValue) 입니다. setValue 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링 됩니다.

 

** 클래스형 컴포넌트와 함수형 컴포넌트의 차이

참고 링크 : 리액트 클래스 컴포넌트, 함수형 컴포넌트의 차이

 

클래스 컴포넌트의 특징

- state, Lifecycle 관련 기능을 사용할 수 있다.

- 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.

 

함수형 컴포넌트의 특징

- state, Lifecycle 관련 기능을 사용할수 없다 ==> Hook 을 통해 해결

- 컴포넌트 선언이 편리하다

- 클래스형 컴포넌트보다 메모리를 덜 사용한다.

 

앞으로는 함수형 컴포넌트와 hook을 사용하는 것을 권장하고 있다.